Новый формат
Картинка-ссылка: как сделать изображение кликабельным
Картинка-ссылка — изображение, по клику ведущее на URL: баннер, логотип в шапке, превью в галерее. В HTML это `<a href="…"><img …></a>`.
Ниже — когда так делать, как разметить код, какие атрибуты важны и чем картинка-ссылка отличается от текстовой для SEO и UX. База про виды ссылок — в соседних материалах.
Зачем делают картинку-ссылку
Визуал ловит взгляд быстрее текста: логотип на главную, превью товара в карточку, схема проезда на контакты, баннер на акцию.
Для робота важнее текстовые анкоры и структура. Картинки дополняют UX; на них не стоит вешать всю перелинковку сайта.
Удачные сценарии:
- логотип → главная;
- превью в каталоге / блоге;
- баннер акции → посадочная;
- lightbox/галерея (клик открывает крупнее — уже UX, не обязательно SEO-анкор).
HTML: обёртка a + img
Базовый шаблон: `<a href="/catalog/"><img src="/images/banner.webp" alt="Каталог насосов" width="600" height="200"></a>`.
В CMS обычно: выделить изображение → «вставить ссылку» → указать URL. Проверяйте, что href полный и ведёт куда нужно (https, без опечаток).
Полезные атрибуты img:
- `src` — путь к файлу на вашем хостинге;
- `alt` — смысл для скринридеров и если файл не загрузился;
- `width` / `height` — пропорции в вёрстке;
- `loading="lazy"` — для нижеfold-баннеров (не для LCP-героя).
Свои файлы и вес
Грузите изображения на свой сервер или CDN. Чужой hotlink ломается, когда донор меняет URL или запрещает внешние запросы.
Сжимайте: WebP/AVIF где поддерживается пайплайн, корректный размер под слот (не 4000px в колонку 300px). Атрибуты width/height не заменяют оптимизацию файла.
Чеклист веса:
- уникальные/свои креативы;
- сжатие без мыла на тексте баннера;
- не плодить десяток тяжёлых баннеров на одной странице;
- проверять мобильную ширину.
UX и SEO-гигиена
Подпись и alt должны совпадать с назначением ссылки. «Нажмите сюда» на картинке без alt — слабый паттерн.
Эффекты hover (тень, прозрачность) допустимы, если не мешают клику на тач-устройствах: область нажатия должна быть достаточной.
Правила размещения:
- мера: баннеры не перекрывают текст и формы;
- соответствие теме страницы;
- для меню и важных CTA дублируйте текстовую ссылку рядом;
- не выдавайте рекламу за «просто картинку» там, где нужна маркировка.
Краткий вывод
Картинка-ссылка удобна для визуальных переходов: оберните img в `<a>`, задайте alt и лёгкий файл с своего хостинга. Для смысла и SEO текстовые ссылки сильнее — комбинируйте, не заменяйте ими всю навигацию.
Частые вопросы
Текстовая ссылка лучше картинки для SEO?
Для передачи смысла анкора — обычно да: текст однозначен. Картинка нуждается в понятном alt и контексте. Навигацию меню чаще делают текстом.
Обязателен ли alt?
Да для доступности и понятности, если картинка несёт смысл. Для чисто декоративных — пустой alt="", но тогда не делайте из них единственный путь к важному разделу.
Можно ли ссылаться на чужую картинку по URL?
Технически да (hotlink), на практике плохо: права, скорость, чужой CDN может отдать заглушку. Храните файлы у себя и оптимизируйте.
width и height ускоряют сайт?
Резервируют место в вёрстке (меньше сдвигов). Сам файл легче не станет — нужды сжатие, современный формат и адекватный размер в пикселях.
Картинка-ссылка = баннер?
Баннер — частный случай: рекламный креатив со ссылкой. Те же правила: вес файла, ясный оффер, не перекрывать контент.
Нужны баннеры и кликабельные блоки на сайте?
Сверстаем лёгкие креативы со ссылками — без тяжёлых картинок и битых href.
Обсудить задачу
