Картинки в поиске работают как витрина: заметил, кликнул, остался. Когда изображения тяжелые и без подписи, трафик утекает сквозь пальцы; когда они быстрые и понятные роботам, страницы растут в ранжировании. Разберёмся, какие форматы выбрать, какие атрибуты прописать и как без потерь уменьшить вес.
Форматы: не переплачиваем за байты
Тема звучит просто: оптимизация изображений для SEO: форматы, атрибуты, сжатие; на практике нюансов хватает. Фото без прозрачности чаще всего уместно хранить в JPEG, иллюстрации и логотипы — в SVG, а универсальным рабочим вариантом для веба давно стал WebP. Если важен максимальный выигрыш в размере, посмотрите на AVIF, он экономит еще больше, хоть и кодируется дольше.
PNG оставьте для скриншотов и элементов интерфейса, где нужна кристальная четкость и альфа-канал. В проектах с историей полезно готовить «лестницу совместимости»: AVIF или WebP как основной ресурс, JPEG или PNG как резервный вариант через элемент picture.
Короткая памятка по форматам
| Формат | Где уместен | Плюсы | На что смотреть |
|---|---|---|---|
| JPEG | Фотографии без прозрачности | Небольшой вес при хорошем качестве | Качество 60–80, прогрессивный JPEG |
| PNG | Скриншоты, иконки с прозрачностью | Четкость без потерь | Тяжел для фото |
| WebP | Большинство изображений на сайтах | Сильное сжатие, прозрачность | Проверьте поддержку старых браузеров |
| AVIF | Фото и иллюстрации с приоритетом веса | Минимальный размер | Медленнее кодирование, совместимость |
| SVG | Логотипы, пиктограммы, диаграммы | Масштаб без потерь | Оптимизация кода, безопасность |
Атрибуты, которые читают роботы и люди
Alt — это голос картинки в поиске. Опишите предмет кадра конкретно и по делу: «стеклянная кружка 350 мл на деревянном столе», а не «кружка» или «фото1». Имя файла тоже значимо, используйте транслитерацию и дефисы: kruzhka-350ml-steklo.jpg.
Заранее задавайте width и height, чтобы страница не «скакала» при загрузке; это снижает Cumulative Layout Shift и повышает удобство. Подписи к важным визуалам помогают контексту, а для галерей и карточек товаров уместны разметка schema.org и понятные подписи в figcaption.
- loading=»lazy» экономит трафик на длинных страницах;
- decoding=»async» ускоряет отрисовку;
- srcset и sizes подбирают нужный размер для экрана;
- для иконок используйте чистый, оптимизированный SVG.
Сжатие без потери смысла
Перед сжатием уменьшите исходные габариты до нужных: нет смысла хранить на карточке товара фото 4000×3000, если блок выводит 1200 пикселей. Приведите цветовое пространство к sRGB и удалите лишние метаданные; это часто дает десятки процентов экономии без видимых потерь.
Для ручной работы удобны Squoosh и ImageOptim, для пакетной — скрипты на базе MozJPEG, libwebp и libavif. На практике хорошо работают ориентиры: JPEG с качеством 60–80, WebP около 70–80, AVIF на уровне 45–55. Смотрите глазами, а не только на цифры: сравнивайте детали, текстуры и артефакты.
Адаптивность и скорость как факторы ранжирования
Правильно собранный srcset избавляет мобильных пользователей от перекачки десктопных картинок. Элемент picture позволяет отдать AVIF на новых браузерах и автоматически подменить его на WebP или JPEG там, где поддержки нет.
Ленивая загрузка экономит миллисекунды, но не забывайте о первой видимой области — ключевые изображения стоит загружать сразу. CDN с трансформацией изображений на лету снимает боль рутины: один оригинал на сервере, на выходе десятки вариаций по размеру и формату.
Практика, которая окупается
Когда в моем проекте мы перешли на WebP с корректными alt и srcset, поведение пользователей стало спокойнее: меньше рывков верстки, быстрее первый контент. На отчетах Core Web Vitals это выглядело убедительно, а в поиске страницу стали находить по тем самым уточняющим запросам, что были вписаны в alt.
Смысл прост: не гнаться за магией, а последовательно доводить базу — выбрать формат по задаче, сжать чисто и осторожно, подписать грамотно. Тогда тихая работа картинок складывается в ощутимый результат: сайт грузится быстрее, пользователи видят то, что нужно, поисковик понимает, что показывать выше.