Как оптимизировать изображения товаров: размеры, сжатие и загрузка

Чтобы оптимизировать изображения товаров, подготовьте версии под реальные места показа, сравните форматы и сжатие на деталях, а затем проверьте, какой файл загружает браузер. Главное фото первого экрана не следует искусственно задерживать отложенной загрузкой; крупную версию для увеличения и фотографии ниже экрана можно загружать позже. Универсального веса в килобайтах для всех товарных снимков нет: решение зависит от размера блока, содержания фотографии и нужной чёткости.

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

Сначала выясните, где и как показывается фото

У фотографии есть три разных характеристики: размеры файла в пикселях, вес в байтах и размер показа на странице. Изображение шириной 2 400 пикселей может занимать в каталоге блок шириной 160 CSS-пикселей — единиц, которыми браузер описывает макет. Если уменьшить его только стилями, браузер всё равно может скачать большой файл целиком.

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

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

Одно фото — разные версии для каталога и карточки

Рассмотрим учебный пример: исходная фотография сумки имеет размер 2 400 × 3 200 пикселей. Миниатюра каталога занимает 160 CSS-пикселей по ширине, главное фото на компьютере — 400, на узком экране — почти всю доступную ширину. Исходник достаточно резкий; мы сохраняем пропорцию 3:4 и не увеличиваем его искусственно.

Коэффициент плотности пикселей экрана называют DPR, от английского device pixel ratio. При DPR 2 одному CSS-пикселю соответствуют два физических пикселя по каждой стороне. Поэтому ориентир для резкого изображения — ширина блока, умноженная на DPR. Это помогает выбрать варианты файлов, но не требует хранить отдельную версию для каждой возможной ширины телефона.

Место показа в учебном макете	Ширина блока	Версия при DPR 1	Версия при DPR 2
Миниатюра каталога	160 CSS-пикселей	160 × 213 пикселей	320 × 427 пикселей
Главное фото на компьютере	400 CSS-пикселей	400 × 533 пикселя	800 × 1 067 пикселей
Главное фото на телефоне с окном 392 пикселя и отступами по 16	360 CSS-пикселей	Ближайшая подходящая версия 400 × 533	Ближайшая подходящая версия 800 × 1 067

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

Не отправляйте файл для увеличения во все миниатюры. В категории с десятками товаров такое решение многократно повторяет лишнюю передачу. При этом не уменьшайте увеличенное фото до размеров каталога: пользователь откроет галерею и получит размытую картинку.

Как браузер выбирает подходящий файл

Атрибут srcset перечисляет доступные версии и их фактическую ширину, а sizes описывает ширину места показа при разных условиях. Браузер выбирает подходящий вариант с учётом этих данных, плотности экрана и условий загрузки. Сам по себе список файлов не помогает, если sizes сообщает ширину, которая не соответствует макету.

Ниже пример HTML для главного фото учебной карточки. Он предполагает отступы по 16 пикселей на узком экране и блок шириной 400 пикселей начиная с ширины окна 600 пикселей. Адреса файлов условные: перед использованием нужны существующие версии и размеры из вашей темы.

<img
  class="product-photo"
  src="/media/bag-front-800.webp"
  srcset="/media/bag-front-400.webp 400w,
          /media/bag-front-800.webp 800w,
          /media/bag-front-1200.webp 1200w"
  sizes="(max-width: 599px) calc(100vw - 32px), 400px"
  width="1200"
  height="1600"
  alt="Зелёная сумка спереди, видны ручки и наружный карман"
>

src оставляет обычный адрес изображения, а width и height задают пропорции и помогают заранее выделить место. Здесь указаны размеры версии шириной 1 200 пикселей; они не означают такой же размер показа. Сам sizes не задаёт ширину блока: он должен соответствовать CSS темы. Например, для этого учебного макета подходят такие стили:

.product-photo { width: 400px; max-width: 100%; height: auto; }
@media (max-width: 599px) {
  .product-photo { width: calc(100vw - 32px); }
}

Этот макет предполагает контейнер, который вмещает указанную ширину. Если тема использует квадратную рамку, отдельно проверьте кадрирование: ручки сумки не должны исчезать после обрезки.

В конструкторе или системе управления сайтом, которую часто называют CMS, код может формироваться автоматически. Тогда проверьте результат в опубликованной карточке: есть ли разные размеры, корректный sizes и отдельная версия для увеличения. Повторная ручная загрузка трёх одинаковых фото в галерею не заменяет адаптивную выдачу одного снимка.

Выберите формат и сжатие по виду товара

Сначала уменьшайте размеры под назначение, затем подбирайте сжатие. Иначе вы будете сравнивать тяжёлые файлы с миллионами пикселей, которые всё равно не нужны в миниатюре. Сохраните исходник отдельно: повторная обработка уже сильно сжатого файла постепенно портит детали.

Для товарных фотографий сравните WebP, AVIF и JPEG в пределах возможностей платформы. PNG полезен для некоторых изображений с прозрачностью или графикой, но прозрачность поддерживает и WebP; она сама по себе не обязывает выбирать PNG. Формат нужно проверять по фактическому весу и виду конкретного снимка, а также по поддержке в нужных браузерах и инструментах магазина.

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

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

Почему один лимит веса не подходит всем снимкам

Белая чашка на однотонном фоне и пёстрый ковёр могут иметь одинаковые размеры, но разный вес после сжатия. Область увеличения требует больше подробностей, чем миниатюра. Поэтому правило «каждое фото меньше 100 КБ» может ухудшить карточку сложного товара, а разрешение загружать мегабайтные файлы в любую сетку — замедлить каталог.

Практический предел определяйте через проверку: файл соответствует месту показа, детали достаточно чёткие, начальная загрузка страницы не перегружена. Ограничения самой CMS и торговых площадок проверяйте отдельно. Требование маркетплейса к размеру фотографии не становится стандартом для собственного сайта.

Разделите главное фото и отложенную загрузку

Главное фото карточки часто оказывается самым крупным видимым элементом первого экрана. Метрика Largest Contentful Paint, или LCP, измеряет время появления такого элемента. Если назначить ему loading="lazy", браузер может начать загрузку позже, хотя покупатель сразу ждёт изображение.

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

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

Автоматизируйте обработку и проверьте CDN

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

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

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

Сделайте фотографии доступными поисковым роботам

Основные товарные изображения размещайте через HTML-элемент img с реальным src. Google не индексирует изображения, заданные как CSS-фон; Яндекс также предупреждает о проблемах с фонами и картинками, доступными только через скрипт. Для галереи с JavaScript проверьте отрисованную страницу и наличие обычных адресов изображений, а не только работу интерфейса после клика.

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

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

Как проверить результат после изменений

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

Лабораторные проверки PageSpeed Insights или Lighthouse помогают найти задержку, тяжёлые запросы и смещение содержимого. Сравнивайте причины и показатели, а не только общий балл. Данные реальных посетителей отражают другие устройства и сети и обновляются за свой период; один удачный локальный запуск не доказывает улучшение для всех покупателей.

В учебном примере результат можно проверить без обещанного процента ускорения: каталог получает небольшие версии, главное фото остаётся резким на DPR 2, увеличение показывает застёжку, а интерфейс не скачет при появлении картинки. Если вес уменьшился, но LCP не изменился, выясните, не задерживают ли фото скрипт галереи, сервер или позднее обнаружение запроса.

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

Достаточно ли перевести все фото в WebP?+

Нет. Большой WebP может остаться избыточным для миниатюры, а сильное сжатие — повредить детали. Проверьте размеры, способ выбора версии, порядок загрузки и качество; затем сравните формат на конкретных фотографиях.

Нужно ли загружать оригинал с телефона в карточку товара?+

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

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

• Сохраните исходные замеры каталога и карточки: известны файлы, объём передачи и момент появления главного фото.
• Измерьте блоки на телефоне и компьютере: подготовленные версии соответствуют их ширине и нужной плотности экрана.
• Проверьте миниатюру, главное фото и увеличение: браузер получает подходящие файлы, детали и пропорции товара сохраняются.
• Сравните сжатые версии на тексте, фактуре и цвете: заметных искажений нет.
• Откройте первый экран с пустым кэшем: главное фото загружается сразу, а место для него выделено заранее.
• Прокрутите галерею и каталог: отложенные картинки появляются вовремя и не оставляют пустых блоков.
• Проверьте адреса изображений и ограничения обхода, включая CDN: робот может получить реальные файлы.
• Повторите измерения в тех же условиях и сохраните результат: видно, какие запросы стали легче и что ещё задерживает страницу.