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

Но изображения могут приводить отдельный поисковый трафик. Особенно это заметно в интернет-магазинах, travel-проектах, рецептах, дизайне интерьеров, медицине, недвижимости, товарах, инструкциях, статьях и визуальных подборках.

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

Поэтому оптимизация картинок нужна не ради галочки. Она помогает:

• получать переходы из Google Images;
• улучшать видимость товаров;
• усиливать обычные страницы в поиске;
• ускорять загрузку сайта;
• делать контент понятнее;
• улучшать доступность для пользователей;
• повышать шансы на появление в визуальной выдаче и расширенных результатах.

1. Начните не с SEO, а с хорошей картинки

Самый сильный способ выделиться в поиске по картинкам — использовать собственные изображения.

Это могут быть:

• фотографии товаров;
• фото команды;
• кадры производства;
• снимки офиса;
• результаты работ «до и после»;
• скриншоты интерфейсов;
• схемы;
• графики;
• инфографика;
• авторские иллюстрации;
• видеообложки;
• фотографии из поездок;
• изображения реальных кейсов.

Уникальная картинка не обязательно должна быть снята на дорогую камеру. Иногда хороший кадр на смартфон с нормальным светом полезнее, чем безликое фото из фотобанка, которое уже стоит на сотнях сайтов.

Стоковые изображения можно использовать, если у вас есть лицензия. Но не стоит ожидать, что обычная картинка из бесплатного фотобанка сама по себе даст преимущество в поиске.

И уж точно не нужно брать чужое изображение из Google Images и «уникализировать» его поворотом, обрезкой, зеркальным отражением или водяным знаком. Это не надёжная SEO-стратегия, а иногда ещё и риск нарушения авторских прав.

2. Выбирайте современные форматы

Старые рекомендации «PNG для всего, JPEG для фото, GIF для анимации» уже устарели.

Сегодня обычно стоит ориентироваться так:

• AVIF — для фотографий и многих крупных изображений, если ваш сайт и CDN поддерживают его;
• WebP — универсальный современный формат для фотографий и графики;
• JPEG — хороший запасной вариант для фото;
• PNG — для изображений, где нужна прозрачность или сохранение деталей без потерь;
• SVG — для логотипов, иконок, схем и векторной графики;
• GIF — только в редких случаях, когда без него нельзя обойтись;
• MP4 или WebM — чаще лучше GIF для анимации, потому что видео обычно весит значительно меньше.

WebP и AVIF обычно позволяют заметно уменьшить вес файлов по сравнению со старыми растровыми форматами. Это особенно важно для мобильных пользователей и скорости загрузки. (web.dev)

Но формат не должен быть самоцелью. Главная задача — передать изображение в хорошем качестве и с минимальным весом.

3. Называйте файлы понятно

Название файла помогает поисковой системе и пользователю понять, что изображено на картинке.

Плохо:

IMG_4827.jpg
photo-01-final-new.png
скриншот 2026-06-17.png

Лучше:

ledyanoi-otel-icehotel-shvetsiya.webp
remont-kuhni-do-i-posle.webp
vesy-dlya-magazina-bestves.webp

Имя файла не нужно превращать в спам.

Плохо:

kupit-vesy-vesy-kiev-vesy-nedorogo-vesy-cena.webp

Лучше написать коротко и по делу.

Google рекомендует использовать описательные названия файлов, заголовки и alt-текст, а также размещать изображения рядом с релевантным содержимым страницы. (Google for Developers)

4. Правильно заполняйте alt

alt — это альтернативный текст изображения.

Он нужен не только для SEO. Его используют программы чтения с экрана, а также он помогает понять содержимое изображения, если файл не загрузился.

Хороший alt кратко описывает то, что действительно есть на изображении.

Например:

<img src="icehotel-room.webp"
     alt="Ледяной номер в Icehotel в Юккасъярви, Швеция">

Для карточки товара:

<img src="bestves-shop-scales.webp"
     alt="Электронные торговые весы BESTVES с дисплеем">

Плохой вариант:

alt="купить весы Киев недорого лучшие весы цена доставка"

Это не описание картинки, а набор ключевых слов.

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

Не нужно обязательно дублировать alt в title. Атрибут title не заменяет alt и обычно не нужен для оптимизации изображения.

5. Размещайте картинку рядом с релевантным текстом

Поисковые системы оценивают не только сам файл, но и страницу вокруг него.

Для Google важно:

• заголовок страницы;
• основной текст;
• подпись к картинке;
• подзаголовки;
• название файла;
• alt;
• контекст, в котором используется изображение.

Если на странице написано про Icehotel, а рядом стоит фотография ледяного номера с понятным названием файла и alt, поисковику проще связать картинку с темой.

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

Поэтому не стоит вставлять изображения «куда-нибудь для красоты». У каждой картинки должна быть понятная роль в материале.

6. Указывайте размеры и не допускайте прыжков страницы

Атрибуты width и height нужны не потому, что поисковику обязательно известен размер картинки. Их главная задача — заранее зарезервировать место на странице.

Если размеры не заданы, страница может сначала показать текст, а потом резко сдвинуть его вниз после загрузки изображения. Это ухудшает пользовательский опыт и показатель CLS, один из Core Web Vitals.

Пример:

<img src="hotel-room.webp"
     width="1200"
     height="800"
     alt="Ледяной номер в Icehotel">

Для адаптивного дизайна размеры можно задать в HTML, а в CSS использовать:

img {
  max-width: 100%;
  height: auto;
}

Изображения без заранее определённых размеров считаются одной из частых причин плохого CLS. (web.dev)

7. Загружайте разные размеры для разных устройств

Не стоит отправлять пользователю на телефоне фотографию шириной 4000 пикселей, если на экране она отображается шириной 400.

Для этого используют адаптивные изображения через srcset и sizes.

Пример:

<img
  src="hotel-1200.webp"
  srcset="
    hotel-480.webp 480w,
    hotel-800.webp 800w,
    hotel-1200.webp 1200w,
    hotel-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  width="1200"
  height="800"
  alt="Ледяной номер в Icehotel в Швеции">

Так браузер сам выберет подходящий размер изображения для конкретного экрана и качества соединения.

Это снижает вес страницы и помогает быстрее показать контент пользователю. Изображения часто становятся самым тяжёлым ресурсом сайта, поэтому их оптимизация заметно влияет на производительность. (web.dev)

8. Используйте lazy loading, но не для первого экрана

Картинки, которые находятся далеко ниже первого экрана, можно загружать лениво:

<img src="gallery-photo.webp"
     loading="lazy"
     width="1200"
     height="800"
     alt="Северное сияние над Юккасъярви">

Это позволяет браузеру не скачивать сразу все изображения длинной страницы.

Но не ставьте loading="lazy" на главную картинку в первом экране, особенно если она является самым крупным элементом страницы. Она может замедлить LCP, то есть время появления основного содержимого.

Для ключевого изображения лучше использовать обычную загрузку, а при необходимости — приоритетную загрузку или preload. Отложенная загрузка полезна для изображений ниже первого экрана, но может ухудшить скорость важной картинки вверху страницы. (web.dev)

9. Сжимайте изображения перед загрузкой

Даже современный формат не спасёт, если вы загрузили фото на 12 мегабайт.

Перед публикацией стоит проверить:

• реальный размер картинки;
• нужное разрешение;
• степень сжатия;
• качество после сжатия;
• прозрачность;
• необходимость анимации;
• наличие лишних метаданных.

Часто фотографию можно уменьшить в несколько раз без заметной потери качества. Особенно это касается фоновых картинок, превью, баннеров и изображений в статьях.

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

10. Делайте изображения доступными для поиска

Если картинка важна для SEO, убедитесь, что поисковик может её найти.

Проверьте:

• изображение не закрыто в robots.txt;
• файл отдаёт код 200;
• URL картинки стабильный;
• изображение не подгружается только после клика или сложного JavaScript-сценария;
• картинка есть в HTML или корректно рендерится;
• мобильная и десктопная версии показывают те же важные изображения;
• картинка не скрыта за авторизацией;
• нет случайного noindex на странице;
• изображение доступно в нормальном размере.

Google отдельно предупреждает, что URL картинок не должны постоянно меняться при каждой загрузке страницы, иначе их может быть сложнее обработать и индексировать. (Google for Developers)

Для больших сайтов, маркетплейсов, галерей и интернет-магазинов имеет смысл добавить изображения в XML Sitemap. Это помогает Google находить картинки, особенно если они загружаются через JavaScript или неочевидную структуру сайта. (Google for Developers)

11. Добавляйте структурированные данные, когда это уместно

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

Например:

• Product для товаров;
• Article для статей;
• Recipe для рецептов;
• VideoObject для видео;
• Event для событий;
• JobPosting для вакансий.

Важно: разметка должна соответствовать тому, что реально видно пользователю. Нельзя ставить в Schema.org вымышленные рейтинги, цену или изображение, которого нет на странице.

Структурированные данные не гарантируют богатый сниппет, но могут сделать страницу более понятной поисковой системе и дать право на специальные элементы в выдаче Google Images. (Google for Developers)

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

Перед публикацией изображения проверьте:

1. Картинка своя или используется законно по лицензии.
2. Она действительно помогает пользователю.
3. Выбран подходящий формат: AVIF, WebP, JPEG, PNG, SVG или видео.
4. Файл назван понятно.
5. Есть корректный alt.
6. Картинка размещена рядом с релевантным текстом.
7. Заданы width и height.
8. Изображение адаптировано под мобильные устройства.
9. Картинка сжата без заметной потери качества.
10. Важные изображения не загружаются лениво.
11. Изображения ниже первого экрана используют lazy loading.
12. Поисковик может найти и скачать файл.
13. Для больших каталогов настроена image sitemap.
14. Для товаров и других подходящих страниц добавлена корректная Schema.org-разметка.

Вместо вывода

Оптимизация картинок — это не про хитрости, повороты на 15 градусов и попытку обмануть поиск.

Это про хорошие оригинальные изображения, понятное описание, правильную техническую подачу и быструю загрузку.

Если картинка полезна пользователю, нормально встроена в страницу, быстро открывается на телефоне и помогает понять тему материала, у неё гораздо больше шансов получить трафик из Google Images, чем у случайного файла с названием IMG_0047.jpg.

Обновлено 1 июля 2026 года