Картинки на сайте: как сделать их лёгкими, находимыми и не тормозящими

Типичная картина в аудите: карточка товара весит 8 мегабайт, потому что фотограф прислал файлы с камеры, а контент-менеджер загрузил их как есть. Страница открывается на мобильном шесть секунд, покупатель уходит, а магазин ищет проблему в хостинге. Между тем картинки — самая простая часть сайта для оптимизации и одна из самых недооценённых.

Что дают правильные картинки

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

Формат и размер

• Формат WebP вместо JPEG и PNG: при том же качестве файл на 25–35% легче. Его поддерживают все современные браузеры. AVIF ещё компактнее, но поддержка чуть уже — хорошо как основной формат с запасным WebP.
• Размер под место на странице. Картинка, которая показывается шириной 600 пикселей, не должна быть 4 000 пикселей в файле. Для карточки товара обычно достаточно 1 200 пикселей по большей стороне, для превью в каталоге — 400–600.
• Сжатие. Даже в правильном размере фото с камеры можно ужать в 3–5 раз без видимой разницы. Сервисы вроде Squoosh делают это в браузере, плагины для CMS — автоматически при загрузке.
• Ориентир по весу: превью — до 50 КБ, основное фото товара — до 150–200 КБ, большой баннер на главной — до 300 КБ.

Лучший вариант — настроить сайт так, чтобы он сам делал всё это при загрузке: пережимал, создавал версии под разные экраны и отдавал WebP. Тогда от контент-менеджера не требуется ничего, и качество не зависит от человека.

Alt-текст: для кого и как писать

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

• Плохо: «диван купить краснодар недорого диван угловой».
• Хорошо: «Угловой диван Мадрид в серой рогожке, вид сбоку».
• Для декоративных картинок вроде фоновых узоров alt оставляют пустым, чтобы не создавать шум.

Название файла тоже читается: IMG_4523.jpg ничего не говорит, а divan-madrid-seryj.jpg — говорит. Настраивать это вручную для каждого фото утомительно, поэтому в магазинах названия генерируют из названия товара автоматически.

Загрузка и вёрстка

Ленивая загрузка: картинки ниже первого экрана подгружаются только когда посетитель до них долистал. Это стандартный атрибут, который поддерживают браузеры, и он экономит мегабайты на длинных страницах каталога. Важно не включать ленивую загрузку для главного изображения на первом экране — оно должно появляться сразу, иначе страдают показатели скорости, которые смотрят поисковики.

Указывайте ширину и высоту картинок в коде. Тогда браузер резервирует место заранее, и текст не «прыгает», пока фотографии грузятся. Этот прыжок — отдельная метрика Core Web Vitals, и картинки без размеров её портят.

С чего начать

1. Прогоните главную и типовую карточку через PageSpeed Insights: в отчёте будет список тяжёлых картинок с потенциальной экономией.
2. Настройте автоматическое сжатие и WebP при загрузке — плагином или на уровне сервера.
3. Пережмите уже загруженные изображения пакетно. Для магазина на тысячи товаров это одна ночь работы скрипта.
4. Добавьте alt по шаблону из названия товара там, где его нет.
5. Включите ленивую загрузку и размеры для картинок в шаблоне.

Магазину сантехники мы пережали каталог из 12 000 изображений: средний вес страницы категории упал с 6 МБ до 900 КБ, а трафик из поиска по картинкам за квартал вырос вдвое. Ни строчки нового текста. Если у вас ощущение, что сайт тяжёлый, — проверьте картинки первыми, а если проверять некому, мы в CasperLab сделаем это в рамках аудита.