Изображения ведут пользователя за руку, но если они тяжелы или неправильно размечены, поисковик отводит глаза. Ускорив картинки, мы улучшаем поведенческие метрики, снимаем лишнюю нагрузку с сервера и выигрываем в видимости. Однажды я сократил вес галереи вдвое и увидел, как трафик из Картинок Google ожил буквально за неделю.
Форматы: не все пиксели равны
Фотографии по привычке сохраняют в JPEG, и это оправданно для сложных сцен с плавными градиентами. Но там, где нужна прозрачность или четкие границы, лучше работает PNG, а для логотипов и иконок незаменим SVG, ведь он масштабируется без потери резкости.
Современные кодеки дали фору ветеранам. WebP экономит десятки процентов веса по сравнению с JPEG, а AVIF часто ужимает еще сильнее при близком качестве. Поддержка у этих форматов уже широкая, однако стоит обеспечивать корректный запасной вариант через элемент picture.
| Формат | Где уместен | Плюсы | Нюансы |
|---|---|---|---|
| JPEG | Фото, баннеры | Хорошее сжатие | Нет прозрачности |
| PNG | Скриншоты, графика | Четкие края, альфа | Тяжелее JPEG |
| WebP | Универсально | Меньше вес | Нужен фолбэк |
| AVIF | Фото нового поколения | Очень сильное сжатие | Кодирование медленнее |
| SVG | Логотипы, иконки | Вектор, кристальная четкость | Следите за безопасностью и весом |
Атрибуты, которые понимают роботы и люди
Alt-текст нужен не ради галочки. Он помогает скринридерам и подсказывает поисковику, что изображено и зачем. Пишите коротко по делу, без набивки ключей, а декоративным элементам задавайте пустой alt, чтобы их пропустили.
Файл с осмысленным именем работает лучше, чем абракадабра из цифр. Укажите ширину и высоту прямо в разметке, чтобы страница не прыгала, и подключите lazy-loading для тех изображений, что ниже первого экрана. Геройскую картинку, напротив, имеет смысл пометить fetchpriority=»high».
Альт-текст и подписи
Хороший alt отвечает на простой вопрос что видит пользователь, если картинка не загрузилась. Например, вместо «фото1» уместно «домашняя пицца с базиликом на деревянной доске». Для ссылочных картинок alt должен отражать цель перехода.
Подписи под фото читают вчетверо чаще основного текста, их стоит использовать, когда изображение несет смысловую нагрузку. В паре figure и figcaption картинка получает контекст, а страница дополнительные точки входа из поиска.
Размеры, адаптивность и поведение
Атрибуты width и height резервируют место и снижают CLS. Связка srcset и sizes позволяет отдавать разные варианты под разные экраны, не заставляя мобильные устройства тянуть десктопные полотна. Для форматов нового поколения помогает picture с несколькими source, где в конце стоит надежный JPEG или PNG.
Lazy-loading экономит трафик, но не применяйте его к ключевому изображению, влияющему на LCP. Атрибут decoding=»async» разгружает основной поток, а для иконок в SVG полезно указывать role=»img» и корректные описания при необходимости доступности.
Сжатие и рабочий процесс
Оптимизация изображений для SEO: форматы, атрибуты, сжатие сходятся в одном прагматичном принципе сохраняем качество, убираем лишнее. Для фотографий допустима умеренная потеря, если она незаметна глазу. Графику лучше сжимать без потерь, а лишние метаданные и превьюшки EXIF смело удалять.
Инструментов достаточно. Для повседневной работы годятся Squoosh, ImageOptim, TinyPNG и встроенный экспорт в Photoshop. Для пайплайна на сервере подойдут cwebp, avifenc, mozjpeg и SVGO для векторной графики.
- Сначала ресайз до нужных размеров, потом сжатие.
- Профиль цвета приводим к sRGB, чтобы браузеры показывали одинаково.
- Проверяем артефакты на контрастных границах и мелком тексте.
- Автоматизируем в CI, чтобы никто не заливал исходники по 8 МБ.
Из личной практики
На одном контентном проекте я перевел фото на WebP с fallback, внедрил srcset и выставил width и height во всех карточках. Средний вес страницы упал с 2,8 до 1,4 МБ, а LCP на мобильных улучшился примерно на 35 процентов.
Через месяц в отчете Search Console выросла доля показов в выдаче Картинок, особенно по страницам с пошаговыми рецептами. Пользователи стали чаще досматривать материалы до конца, что приятно заметно в аналитике.
Как проверить результат и не потерять качество
Запускайте тесты в Lighthouse и PageSpeed Insights, смотрите не только общий балл, но и вклад изображений в LCP, CLS и TBT. В браузерных инструментах разработчика легко отследить, какой вариант из srcset пришел на конкретный экран.
Для индексации полезны корректные карты сайта с блоками image и регулярная проверка отчетов в Search Console. Если проект растет, вынесите медиа на CDN с автоматическим преобразованием под клиента и кэшированием на границе сети.
Картинки умеют продавать и объяснять, но работают они только тогда, когда их не замечаешь как препятствие. Чуть больше дисциплины в форматах, атрибутах и сжатии превращают тяжелую галерею в легкий инструмент роста, а поисковик охотнее показывает такие страницы выше.