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

Фотографии продают товары и услуги, но они же чаще всего делают сайт медленным. На типичном интернет-магазине изображения занимают от половины до трёх четвертей всего веса страницы. Если их не оптимизировать, посетитель с мобильного интернета ждёт загрузки каталога десятки секунд, а поисковая система снижает оценку удобства. Рассказываем, как выбирать форматы, подбирать размеры, настраивать отложенную загрузку и выстроить процесс так, чтобы сайт оставался быстрым и после сотого загруженного товара.

Почему изображения так важны для скорости

Текст, стили и скрипты страницы вместе обычно весят несколько сотен килобайт. Одна необработанная фотография с современного смартфона или зеркальной камеры может весить несколько мегабайт — как вся остальная страница, умноженная в разы. В карточке товара с галереей из шести снимков или в каталоге из сорока позиций цифры складываются быстро.

Медленная загрузка прямо влияет на бизнес:

• посетители уходят, не дождавшись появления страницы, особенно с телефона и нестабильной связи;
• падает конверсия: пока картинки подгружаются, кнопка «В корзину» может оставаться неактивной или смещаться;
• поисковые системы учитывают скорость и стабильность загрузки при ранжировании;
• растёт нагрузка на сервер и расход трафика, а значит, и затраты на хостинг.

Выбираем формат

Единственно правильного формата нет — есть подходящий под тип изображения. Ошибка многих сайтов в том, что всё сохраняют в одном формате по привычке.

Практическое правило

Фотографии отдавайте в WebP, а при необходимости дополнительно в AVIF с запасным JPEG для старых браузеров. Логотипы и значки делайте в SVG. PNG оставляйте только там, где нужна прозрачность и при этом нельзя использовать WebP. Анимированные GIF заменяйте коротким видео: оно весит в разы меньше и не нагружает процессор.

Подбираем размеры

Частая ошибка — загружать на сайт оригинал и надеяться, что браузер «сам уменьшит». Он действительно покажет картинку в нужном размере, но скачает при этом файл целиком. Миниатюра в каталоге размером 300 пикселей, которая на самом деле является фотографией шириной в несколько тысяч пикселей, — классика медленных магазинов.

Как определить нужные размеры

1. Посмотрите, в каких местах шаблона выводятся изображения: миниатюра в списке, карточка товара, увеличенное фото, баннер, фон блока.
2. Для каждого места найдите максимальную ширину на экранах посетителей.
3. Учтите плотность экрана: на дисплеях высокой чёткости картинка нужна примерно вдвое больше по пикселям, чем её отображаемый размер.
4. Создайте набор версий — например, малую, среднюю, большую — и подставляйте подходящую.

Типичные ориентиры для интернет-магазина: миниатюра каталога — около 400-600 пикселей по большей стороне, основное фото карточки — 800-1200, увеличенное по клику — не больше 1600. Для полноэкранных баннеров достаточно 1600-2400 пикселей в ширину. Это не жёсткие правила, а отправные точки, которые уточняются по дизайну.

Адаптивные изображения

Современный HTML позволяет предложить браузеру несколько версий одной картинки и дать ему выбрать подходящую под экран. Для этого используются атрибуты srcset и sizes, а для разных форматов — элемент picture. Простой пример:

<img src="tovar-800.webp"
srcset="tovar-400.webp 400w, tovar-800.webp 800w, tovar-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 400px"
width="800" height="800" alt="Кроссовки беговые, вид сбоку">

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

Сжатие без заметной потери качества

Размер файла определяется не только пикселями, но и уровнем сжатия. У JPEG и WebP есть параметр качества: на значениях около 70-85 из 100 глаз почти не видит разницы с оригиналом, а вес падает в несколько раз. Выше 90 вес растёт непропорционально быстро, ниже 60 появляются заметные искажения, особенно на градиентах и тексте.

Как подобрать параметры

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

Метаданные

Фотографии с камер несут в себе служебные данные: модель устройства, координаты съёмки, миниатюру, цветовые профили. Для сайта они не нужны, а иногда и опасны (геометка раскрывает место съёмки). Удаление метаданных экономит дополнительные килобайты и защищает приватность.

Ленивая загрузка и приоритеты

Не нужно загружать сразу все картинки страницы. Изображения, находящиеся ниже первого экрана, можно подгружать, когда посетитель приблизится к ним. Для этого достаточно добавить атрибут loading со значением lazy.

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

Типичные ошибки при отложенной загрузке

• ленивая подгрузка применена ко всем картинкам подряд, включая главную;
• у изображений нет заданных размеров, и страница смещается при загрузке;
• скрипт отложенной загрузки сам тормозит страницу, хотя достаточно встроенной возможности браузера;
• картинки в слайдере подгружаются только при переключении, и посетитель видит пустое место.

Доставка: кэш, CDN и хранение

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

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

Изображения и SEO

Оптимизация — это не только вес. Поисковые системы ищут по картинкам, а описание помогает им понять содержимое.

Имена файлов

Вместо IMG_4821.jpg используйте понятные имена латиницей: krossovki-begovye-sinie.webp. Это даёт дополнительный контекст и упрощает работу с файлами.

Атрибут alt

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

Подписи и окружающий текст

Рядом с важными изображениями полезно поставить подпись или абзац, который объясняет, что на них показано. Это улучшает понимание страницы и людьми, и роботами. Об остальных аспектах продвижения мы подробнее пишем в разделе про SEO-продвижение.

Процесс: как не превратить оптимизацию в разовую акцию

Типичная история: сайт разово «почистили», а через полгода магазин снова тормозит, потому что контент-менеджеры загружают оригиналы прямо с камеры. Чтобы это не повторялось, оптимизацию нужно встроить в процесс.

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

• Фотографии отдаются в современных форматах (WebP или AVIF) с запасным вариантом.
• Логотипы и значки выполнены в SVG.
• Размер файла соответствует реальному размеру отображения, а не оригиналу.
• Настроены адаптивные версии через srcset и sizes.
• У всех изображений заданы width и height.
• Ленивая загрузка включена ниже первого экрана и отключена для главного изображения.
• Настроено долгое кэширование и, при необходимости, сеть доставки.
• У файлов понятные имена, у содержательных картинок заполнен alt.
• Метаданные удалены, качество сжатия подобрано на реальных примерах.

Частые вопросы

Итог

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