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

Чтобы картинки не тормозили сайт и приводили посетителей из поиска, нужны четыре вещи: современный формат (WebP или AVIF), размер под место на странице, сжатие и осмысленные alt-текст с именем файла. Первые три отвечают за скорость, четвёртая — за то, чтобы изображение находилось в поиске по картинкам. Ниже разберём, какой формат для чего подходит, какие размеры и вес считать нормой, как писать alt, как настроить загрузку и с чего начать, если на сайте уже тысячи тяжёлых фотографий.

Что даёт оптимизация картинок

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

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

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

Какой формат выбрать: JPEG, PNG, WebP, AVIF или SVG

Практическое правило: фотографии и баннеры — в WebP, логотип и иконки — в SVG, PNG — только там, где нужна графика без потерь. AVIF хорош как основной формат с запасным WebP: в коде страницы можно указать несколько вариантов одной картинки, и браузер сам возьмёт тот, который понимает.

Если сайт не конвертирует изображения сам, это можно сделать заранее. Для пары файлов подойдёт наш конвертер JPG в WebP, для остальных форматов — универсальный конвертер изображений.

Размер и сжатие: сколько должна весить картинка

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

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

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

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

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

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

У нескольких фотографий одного товара alt должен различаться: общий вид, вид сбоку, ткань крупным планом, механизм в разложенном виде. Одинаковая подпись на десяти снимках не помогает ни поиску, ни человеку с программой чтения экрана. О том, как сделать сайт удобным для таких посетителей, — в статье про доступность сайта.

Имя файла, подпись и текст рядом

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

Поисковик оценивает картинку не в одиночку, а вместе со страницей. На то, по каким запросам она покажется, влияет окружение.

• Текст вокруг. Заголовок страницы, подпись под фото и абзац рядом подсказывают, что изображено.
• Собственные фотографии. Снимок, который стоит ещё на сотне сайтов поставщика, в поиске по картинкам покажут не от вас.
• Доступность для робота. Папка с изображениями не должна быть закрыта в robots.txt, а важные картинки стоит вставлять как обычные изображения, а не как фон в стилях.
• Постоянный адрес. Если при переезде или обновлении файлы переименовали, картинки выпадают из поиска и набирают позиции заново.
• Разметка товара. В магазине фото указывают в микроразметке — так поисковику проще связать снимок с товаром и ценой. Подробнее — в статье про микроразметку Schema.org.

Загрузка и вёрстка: как картинки влияют на скорость

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

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

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

С чего начать: пошагово

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

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

Частые ошибки с картинками

• Фото с камеры загружают как есть. Несколько мегабайт на снимок, который показывается размером с ладонь.
• Фотографии сохраняют в PNG. Формат для графики делает фото в разы тяжелее без выигрыша в качестве.
• Уменьшают картинку только визуально. В коде задана ширина 300 пикселей, а скачивается файл на 3 000.
• Важный текст размещают картинкой. Цены и условия на баннере поисковик не прочитает, а на телефоне их не разглядеть.
• В alt пишут ключевые слова. Или ставят одинаковый alt на все изображения страницы.
• Включают ленивую загрузку везде. Главное фото первого экрана появляется с задержкой, и страница кажется медленной.
• Не задают размеры. Текст скачет при загрузке, посетитель промахивается мимо кнопки.
• Оптимизируют один раз. Старые фото пережали, а новые снова загружаются тяжёлыми, потому что процесс не настроен.

Чек-лист оптимизации изображений

• Фотографии отдаются в WebP или AVIF, логотип и иконки — в SVG.
• Размер файла соответствует месту на странице, есть версии для телефона.
• Превью весит до 50 КБ, фото товара — до 150–200 КБ, баннер — до 300 КБ.
• У содержательных картинок есть alt с описанием, у декоративных он пустой.
• Имена файлов осмысленные, латиницей, без случайных наборов символов.
• Картинки ниже первого экрана загружаются лениво, главное изображение — сразу.
• У изображений в коде указаны ширина и высота.
• Сжатие и конвертация выполняются автоматически при загрузке новых фото.

Коротко

Картинки — самый простой способ ускорить сайт и дополнительный источник посетителей. Формат WebP или AVIF, размер под место на странице, сжатие, описательный alt, понятное имя файла, ленивая загрузка и заданные размеры — этого набора достаточно. Главное — настроить его один раз так, чтобы он работал автоматически.

Если у вас ощущение, что сайт тяжёлый, — проверьте картинки первыми, а если проверять некому, мы в CasperLab сделаем это в рамках SEO-аудита и покажем, сколько веса можно снять со страниц.