Как оптимизировать изображения под SEO

Картинки с сайта — это не только оформление, но и дополнительный источник трафика. Они попадают в результаты поиска Google: в миниатюры выдачи, расширенные сниппеты, панели знаний и новостные блоки. В Яндексе изображения отображаются в разделе «Картинки» и тоже способны приводить посетителей. Поэтому имеет смысл заниматься оптимизацией картинок так же системно, как и текстом. Ниже — по шагам, что для этого нужно сделать.

Из чего складывается оптимизация изображений

На практике работа с картинками — это несколько последовательных задач: проверить права и уникальность, подобрать формат и вес файла, прописать alt и подписи, почистить метаданные и добавить изображения в карту сайта. Разберём каждый этап отдельно.

Используйте уникальные изображения и закрывайте вопрос с правами

С картинками работает та же логика, что и с текстом: поисковые системы ценят уникальный контент. Если на странице стоят те же стоковые иллюстрации, что и на десятках других сайтов, поиск объединит все копии в один результат. А в выдачу попадёт версия с самого авторитетного домена — и почти наверняка не ваша.

Поэтому лучше публиковать собственные материалы. Свои фотографии, оригинальные иллюстрации и инфографика с гораздо большей вероятностью попадут в «Картинки» и приведут трафик.

Проверить уникальность изображения можно через сервисы обратного поиска по картинкам — например, TinEye. Если находятся десятки совпадений, картинку стоит заменить на менее растиражированную или доработать: обрезать, поменять фон или цветовую гамму.

Если нет своего фотографа или дизайнера, изображения можно купить на стоках — таких как Freepik, Pexels, Pixabay, Mockupfree и аналогичных. После покупки сохраняйте подтверждение прав на случай претензий: чек или сертификат, идентификатор изображения и текст лицензии.

Важный момент: не используйте материалы с пометкой «Editorial use only» (только для редакционного использования) в коммерческих проектах. Это нарушение авторских прав и риск судебных разбирательств. По той же причине не стоит брать первые попавшиеся картинки из поиска — это чревато юридическими проблемами.

В поиске по картинкам Google можно отфильтровать результаты по типу лицензии. В настройках есть пункт «Права использования», где доступен выбор лицензии — например, Creative Commons, которая разрешает коммерческое применение. Это удобный способ сразу отсечь то, что использовать нельзя.

Подберите формат, оптимизируйте вес и размер

Чем быстрее открывается страница, тем выше шанс занять хорошие позиции и удержать посетителя. На уровне изображений ключевая метрика — LCP (Largest Contentful Paint). Это время, за которое отрисовывается самый крупный видимый элемент страницы: обычно большая обложка или главное фото товара. Хорошим показателем считается LCP до 2,5 секунд.

Проверить значение можно в инструментах вроде PageSpeed Insights. Если проверка показывает больше 2,5 секунд, значит, изображение грузится медленно и тянет вниз оценку всей страницы.

Оптимизировать картинку можно по трём параметрам: формат, размер в пикселях и вес файла.

Формат. По умолчанию выбирайте AVIF или WebP — они почти не теряют в качестве, поддерживают прозрачность и при этом весят меньше альтернатив. PNG подойдёт для изображений с прозрачным фоном и чёткими границами: скриншотов интерфейсов, схем, пиктограмм. Логотипы и иконки лучше публиковать в SVG.

Старые браузеры (например, Safari до 14-й версии или Internet Explorer) не поддерживают AVIF и WebP. Для них в вёрстке стоит подключать запасной вариант в JPEG. В разметке это выглядит так:

<picture>

<!-- AVIF, затем WebP, затем JPEG как запасной вариант -->

<source srcset="/img/hero.avif" type="image/avif">

<source srcset="/img/hero.webp" type="image/webp">

<img src="/img/hero.jpg" alt="Описание изображения">

</picture>

Размер. Экспортируйте картинку под фактическую ширину контейнера — ту, с которой она реально отображается в вашей CMS. Чтобы её узнать, откройте инструменты разработчика в браузере, наведите курсор на изображение и посмотрите параметр Rendered size — например, 800×533. Здесь 800 и есть фактическая ширина контейнера, под неё и нужно готовить файл.

Не загружайте в контейнер шириной 800 пикселей изображение большего размера: вы только добавите лишний вес и ухудшите LCP. Ширина картинки должна соответствовать ширине контейнера.

Для экранов с высокой плотностью пикселей (Retina, 2×) нужна версия покрупнее, иначе изображение будет выглядеть размытым. Если базовая ширина — 800 пикселей, добавьте вариант на 1600. В вёрстке для фиксированной ширины это может выглядеть так:

<picture>

<!-- AVIF, затем WebP, затем JPEG как запасной вариант -->

<source type="image/avif" srcset="/img/hero.avif 1x, /img/hero@2x.avif 2x">

<source type="image/webp" srcset="/img/hero.webp 1x, /img/hero@2x.webp 2x">

<img

src="/img/hero.jpg"

alt="Описание изображения"

width="800" height="533">

</picture>

Вес. Сжимайте файл до уровня, где артефакты ещё не бросаются в глаза. Ориентировочные значения: обложке обычно достаточно 150–250 КБ, иллюстрациям — 80–150 КБ, превью — 30–80 КБ.

Для сжатия подойдут сервисы вроде Squoosh, TinyPNG/TinyJPG, Optimizilla, Compressor.io. Для сайтов на WordPress есть плагины-оптимизаторы, которые сжимают картинки прямо в админке.

Если на каком-то уровне сжатия качество начинает заметно сыпаться, поднимите настройку на шаг — обычно это примерно +10% к фактической ширине в пикселях. Например, если сейчас ширина 800 пикселей, следующий шаг — 880.

Пропишите внятные атрибуты, подписи и имена файлов

Поисковые системы пока не умеют в полной мере «видеть» содержимое картинки и во многом опираются на текстовые подсказки. Поэтому корректно заполненные атрибуты и подписи — главное условие, чтобы изображение попадало в релевантную выдачу.

Основные элементы здесь — alt-текст, подпись под изображением и имя файла. Проверить, заполнены они или нет, можно краулерами для технического аудита вроде Screaming Frog SEO Spider.

Атрибут alt. Это описание изображения для поисковых роботов и для пользователей с нарушениями зрения. Оно должно коротко пояснять, что изображено и как это связано с темой страницы. Например:

<img src="kofemashina.jpg" alt="Схема фильтра кофемашины">

Не оставляйте alt пустым — иначе поисковик просто не поймёт, о чём картинка. Можно добавить одно-два ключевых слова по теме страницы, но без переспама.

Если на странице несколько похожих изображений, дайте им разные alt — например, «вид спереди» и «вид сзади». Иначе поисковик сочтёт их дубликатами и покажет в выдаче только одно.

Атрибут title. Появляется при наведении курсора на картинку. На ранжирование почти не влияет, так что добавлять его необязательно. Но он может пригодиться, чтобы дать читателю дополнительное пояснение:

title="Фильтр кофемашины крупным планом"

Если решили использовать title, проследите, чтобы он отличался от alt, — не дублируйте текст слово в слово.

Подпись. Это текст непосредственно под картинкой на странице. Как правило, это не HTML-атрибут, а просто визуально оформленный фрагмент текста. При этом именно подписи поисковые боты нередко анализируют на соответствие изображения теме страницы.

Напишите под картинкой короткое описание или пояснение. Где уместно — включите ключевой запрос или близкий по смыслу синоним. Пример подписи: «Схема устройства фильтра кофемашины: показаны основные детали и их расположение».

Имена файлов и URL. Название изображения попадает в URL и учитывается при индексации. Поэтому ещё до загрузки дайте файлу понятное имя на латинице.

Не оставляйте варианты вроде IMG_001.jpg или nbvfh3478.png — по ним бот ничего не поймёт. Не нужно и засорять имя стоп-словами вроде image или picture.

Оптимально — 3–6 слов через дефис, без спецсимволов и пробелов. Хорошие примеры: kofemashina-filter-scheme.webp, red-sneakers-nike.jpg. И избегайте откровенного переспама — не стоит называть файл kupit-kofemashinu-deshevo-seo.webp.

После публикации страницы не меняйте URL файла. Если переименовать или переместить изображение, поисковик упрётся в битую ссылку (404), картинка выпадет из выдачи и потеряет накопленные позиции.

Очистите EXIF-данные

EXIF — служебные данные внутри изображения: модель камеры, дата съёмки, геометки, эскизы, история правок. Они полезны фотографам, но для веба чаще избыточны и вдобавок увеличивают размер файла. Поэтому перед загрузкой картинки имеет смысл почистить от всего лишнего.

Что стоит убирать:

• Геолокацию и личные данные. Камеры и смартфоны часто записывают GPS-координаты съёмки. Если вы не ведёте, скажем, туристический блог с привязкой к местам, хранить геометки на сайте незачем.
• Миниатюры, превью, историю редактирования. Иногда в файл сохраняются эскизы или данные о правках (в метаданных XMP/IPTC). Они добавляют вес — их тоже лучше удалить.
• Профиль цвета и ориентацию — оставить. Это тот минимум, что стоит сохранить: встроенный цветовой профиль (ICC, например sRGB) и параметр ориентации кадра. Они нужны для корректной передачи цветов и правильного поворота изображения, а весят буквально пару килобайт.
• Авторство и права. Если вы автор и хотите это обозначить, можно оставить в IPTC-метаданных своё имя или информацию о лицензии.

Если хотите, чтобы в поиске по картинкам Google появлялась плашка Licensable, добавьте в IPTC-поля ссылку на условия лицензии (Web Statement of Rights, Licensor) либо укажите лицензию в разметке Schema.org.

Очистить EXIF помогают многие сервисы сжатия — например, Squoosh и TinyPNG удаляют метаданные по умолчанию. Для полного контроля подойдут утилиты вроде ExifTool — консольной программы, которая умеет удалять и редактировать любые теги. Есть и десктоп-приложения для пакетной чистки метаданных под разные операционные системы.

Создайте карту изображений (sitemap)

После того как картинки оптимизированы, нужно позаботиться об их индексации. Если изображений десятки или сотни — особенно когда они подгружаются сложными скриптами, — поисковым ботам бывает трудно их обнаружить. Решение — карта сайта, которая подскажет поисковикам, где что лежит.

Sitemap — это XML-файл со списком важных страниц сайта. В него можно добавить и ссылки на ключевые изображения каждой страницы. Принцип такой: для каждой страницы вы перечисляете её главные картинки — обложку, фото из галереи, значимые иллюстрации — блоками <image:image> с абсолютными ссылками, то есть полным адресом с протоколом и доменом.

В файле карты сайта это выглядит так:

<url>

<loc>https://example.com/page1</loc>

<image:image>

<image:loc>https://example.com/images/pic1.jpg</image:loc>

</image:image>

<image:image>

<image:loc>https://example.com/images/pic2.jpg</image:loc>

</image:image>

</url>

Готовую карту остаётся отправить в панели для вебмастеров — в Google Search Console и в Яндекс Вебмастере.

Коротко: чек-лист по оптимизации изображений