Оптимизация изображений для сайта и продвижение картинок в Google

Оптимизация изображений для сайта состоит из двух частей. Сначала изображение готовят под место на странице: подбирают размер в пикселях, формат и степень сжатия, чтобы оно не тормозило загрузку. Затем его подписывают названием файла, атрибутом alt и текстом рядом, чтобы Google показывал его в поиске по картинкам.

Зачем оптимизировать изображения

Изображения часто самая тяжелая часть страницы, так пишет и документация Google. Если первое крупное фото весит несколько мегабайт, страница дольше появляется на экране. Задержку видно по LCP (Largest Contentful Paint) - это показатель Core Web Vitals, время до показа самого крупного элемента первого экрана, и хорошим считается результат до 2,5 секунды. С телефона и мобильного интернета разница заметнее, подробнее об этом в статье оптимизация сайта под мобильные устройства.

Вторая причина в трафике из Google Картинок. Человек ищет фото товара, находит ваше и переходит на страницу, где оно стоит. Без подписей эти переходы чаще достаются другим сайтам.

Какой формат изображений выбрать

Оптимизация изображений для веб начинается с формата, и выбирают его по тому, что на картинке: фото, графика с прозрачным фоном или значок. Google индексирует файлы BMP, GIF, JPEG, PNG, WebP, SVG и AVIF, так что для поиска годится любой формат из таблицы.

По умолчанию ставьте фото в WebP или AVIF, а иконки и логотипы в SVG. Современный формат отдают с запасным: тег picture предлагает браузеру AVIF или WebP, а если тот их не понимает, показывается JPEG или PNG.

Как сжать изображения для сайта

Сжатие изображений для сайта идет в три шага: размер в пикселях под место показа, сжатие файла и своя версия для каждого экрана. Начинайте с первого крупного фото. Самые тяжелые файлы страницы покажет PageSpeed Insights в пункте «Улучшите загрузку изображений», а по всему сайту их находит техническая проверка сайта.

Сжатие с потерями и без потерь

Сжатие с потерями - это удаление деталей, которые глаз почти не замечает: мелких оттенков и шума. Так работают JPEG, а также WebP и AVIF в обычном режиме, и файл становится заметно легче. Сжатие без потерь - это более плотная запись тех же данных: изображение не меняется ни на пиксель, но и выигрыш меньше. Его берут для скриншотов и схем в PNG или WebP.

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

Размер под место на странице

Ширина файла равна ширине места показа на странице, умноженной на 2, и не больше. Двойной запас нужен экранам высокой плотности, как в современных телефонах и ноутбуках: на одну точку макета у них приходится две точки матрицы, и фото без запаса выглядит мягким.

Например, для колонки шириной 800 px нужен файл шириной 1600 px. Более широкий файл четкости не добавит, только вес. Фото с камеры шириной 6000 px на сайт не ставят: сначала уменьшите его в редакторе или в сервисе из таблицы ниже, а потом сжимайте. Фото, которое стоит и в карточке товара, и в каталоге, готовят в двух файлах, каждый своего размера под свое место.

Сервисы и плагины для сжатия

Разовую обработку закроет онлайн-сервис, а сайту на WordPress удобнее плагин, который сжимает каждый файл при загрузке в медиатеку. Бесплатные лимиты на конец октября 2026 года:

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

Адаптивные картинки и отложенная загрузка

Адаптивная картинка - это одно изображение в нескольких файлах разной ширины. Атрибут srcset перечисляет файлы, sizes сообщает ширину места показа, а браузер умножает ее на плотность экрана и берет ближайший файл: телефону с двойной плотностью хватит sofa-800, ноутбуку с плотным экраном нужен sofa-1600.

Атрибуты width и height задают пропорции, и текст не прыгает при загрузке. Такие сдвиги измеряет CLS, еще один показатель Core Web Vitals.

Отложенная загрузка, атрибут loading="lazy", ждет, пока до файла прокрутят. Ее ставят только ниже первого экрана, иначе ухудшится LCP. Строка для разработчика:

<img src="sofa-800.webp"
     srcset="sofa-400.webp 400w, sofa-800.webp 800w, sofa-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800"
     height="600"
     loading="lazy"
     alt="Серый диван">

SEO картинок: как получать трафик из Google Картинок

SEO-оптимизация изображений для Google держится на двух вещах. Название файла, alt и текст рядом объясняют, что на картинке, а выше показывается быстрое и уникальное фото. Поэтому продвижение сайта картинками делают вместе с текстом страницы, а не отдельно, подробнее в статье как писать SEO-статьи.

Название файла

Название файла для SEO картинки пишут латиницей через дефис, словами о том, что на ней изображено: divan-seryj-uglovoj.webp. Google советует короткие описательные имена вместо image1.jpg или IMG_0234.jpg. Кириллица с пробелами в адресе превращается в коды вида %D0%B4, такую ссылку трудно прочитать. Если фото уже приводит трафик из поиска, его адрес не меняйте: новый адрес Google придется найти и проиндексировать заново.

Атрибут alt

Атрибут alt - это текстовое описание изображения в коде страницы. Его зачитывает программа экранного доступа незрячему посетителю, показывает браузер, если файл не загрузился, а Google по нему понимает, что на фото. Три варианта alt к одному фото дивана:

• без alt: программа экранного доступа прочитает имя файла вроде IMG_0234, а Google останется только текст рядом;
• alt="диван купить диван угловой диван недорого": перечень ключевых слов, Google просит так не делать;
• alt="Серый угловой диван с оттоманкой в гостиной": короткое описание того, что видно на фото.

Декоративному элементу, например узору или разделителю, ставят пустой alt="": атрибут есть, текста нет, и экранный диктор его пропускает.

Текст рядом с картинкой и уникальные фото

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

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

Карта сайта для изображений

Карта сайта для изображений - это файл sitemap с адресами изображений, которые Google иначе может не найти, например подгруженных скриптом в галерее или слайдере. В ней у каждой страницы перечислены адреса файлов в тегах image:image и image:loc, до 1000 файлов на страницу. Изображения в обычном теге img прямо в коде страницы робот найдет сам, и для большинства сайтов хватает обычной карты сайта.

Где посмотреть трафик с картинок

Переходы из Google Картинок показывает Search Console, бесплатный сервис Google для владельцев сайтов:

1. Откройте Search Console и выберите свой сайт.
2. В меню слева нажмите «Эффективность», затем «Результаты поиска».
3. Над графиком откройте фильтр «Тип поиска» и вместо веб-поиска выберите поиск картинок.
4. На вкладке «Запросы» под графиком видно, по каким запросам вас находят.
5. На вкладке «Страницы» видно, на какие страницы ведут эти переходы.

Сравните клики с прошлым периодом, чтобы понять, дали ли результат новые подписи и названия файлов.

Ошибки при оптимизации изображений

Ошибки, из-за которых работа над изображениями не дает результата:

• Alt перечнем ключевых слов. Google просит не набивать alt ключами, а человеку с программой экранного доступа такой текст ничего не говорит. Опишите, что изображено.
• Кириллица с пробелами в названии. Файл «Фото 1 диван.jpg» в адресе превращается в набор кодов, переименуйте его латиницей через дефис до загрузки.
• Важная картинка фоном CSS вместо тега img. Изображения, заданные через background-image, Google не индексирует, поэтому фото товаров и схемы ставят тегом img.
• Lazy loading на первом экране. С атрибутом loading="lazy" главное фото появляется позже, и LCP растет.
• Пересжатое фото товара. При увеличении видны пятна и размытые края, покупатель не разглядит фактуру. Сжимайте оригинал, держите качество выше минимального и смотрите результат при 100%.
• Картинка 3000 px в колонке 300 px. Даже с запасом для плотных экранов хватит файла на 600 px, а этот шире в 5 раз: браузер скачивает лишнее и сам уменьшает, а посетитель ждет.

Частые вопросы об оптимизации изображений