Оптимизация карточек товара
Как сжать фото товара без потери качества
· 4 min read
Уменьшите фото товара до размера в пикселях, в котором оно реально отображается, а затем экспортируйте в WebP или AVIF: при том же визуальном качестве они обычно на величину от 25 до 50 процентов легче JPEG. Ориентируйтесь примерно на 100 до 300KB на изображение в зависимости от его роли на странице. По критерию Largest Contentful Paint от Google страница медленная, если она грузится дольше 2,5 секунды, и слишком тяжёлое главное фото часто оказывается единственным виновником.
Сделайте это в RorlAIProduct: Clean studio backdrop for anything boxed or bottled.Почему размер файла влияет на конверсию, а не только на загрузку
Largest Contentful Paint измеряет, сколько времени требуется, чтобы самый большой видимый элемент страницы отобразился полностью. По порогам самого Google, меньше 2,5 секунды это хорошо, от 2,5 до 4 секунд требует улучшения, а больше 4 секунд это плохо. На странице товара самый большой видимый элемент почти всегда главное фото. Это значит, что один слишком тяжёлый файл изображения может в одиночку решить, пройдёт ли ваша страница тест, как бы быстро ни загружалось всё остальное.
Это не абстрактная игра в баллы. Медленно загружающееся главное фото это первое, что покупатель видит в вашем объявлении, ещё до того, как он прочитал хоть слово описания или увидел цену.
Реалистичный бюджет размера
| Роль изображения | Разумная цель |
|---|---|
| Главное фото, с увеличением | 150 до 300KB |
| Второе фото галереи или миниатюра | 60 до 120KB |
| Главное фото на мобильном, в первом экране | менее примерно 150 до 200KB |
Это рабочие ориентиры, собранные из современных рекомендаций по оптимизации изображений, а не официальная спецификация какой-либо площадки, и они немного меняются в зависимости от сложности картинки. Простой товар на белом фоне сжимается сильнее, чем насыщенная сцена, прежде чем потеря качества становится заметной. Поэтому воспринимайте таблицу как потолок, а не как значение, в которое нужно попасть точно.
Порядок действий, который действительно экономит байты
- 1Сначала уменьшите размер, потом сжимайтеКамера или инструмент генерации обычно экспортирует изображения шириной 3000 до 4000 пикселей. Если на вашей странице фото показывается в блоке шириной 1200 пикселей, сначала уменьшите его примерно до этой ширины. Сжатие слишком большого изображения всё равно отдаёт слишком большое изображение, просто чуть меньше.
- 2Экспортируйте в WebP, если площадка его поддерживаетWebP обычно на величину от 25 до 35 процентов легче JPEG при том же визуальном качестве, а AVIF может дать ещё больше. Большинство современных e-commerce платформ и браузеров поддерживают WebP; проверьте, отдаёт ли ваша платформа его автоматически или файл нужно загружать сразу в этом формате.
- 3Если WebP недоступен, выставьте качество JPEG около 70 до 85Настройки экспорта по умолчанию в редакторах часто неоправданно высоки. Качество в этом диапазоне для большинства фото товаров визуально неотличимо от оригинала и заметно легче экспорта на 100 процентов.
- 4Удалите встроенные метаданныеНастройки камеры, цветовые профили сверх нужного странице и GPS-данные, которые встраивают некоторые телефоны, добавляют вес, которого покупатель никогда не увидит. Большинство инструментов сжатия удаляют их по умолчанию; убедитесь, что ваш тоже.
Самое важное различие:
- Сжатие без потерь сохраняет каждый пиксель точно таким, каким он был снят, и почти не уменьшает фотографию. Оно подходит для графики с плоскими цветами и чёткими краями, а не для фотографии
- Сжатие с потерями отбрасывает данные, которые человеческий глаз почти не замечает, и именно там для фото лежит реальная экономия
- Современный кодировщик с правильными настройками остаётся намного ниже порога, при котором покупатель заметит разницу, и задолго до порога, при котором её заметили бы вы
Где место сгенерированному или отредактированному фото
Фото из любого инструмента редактирования или генерации нужно пропустить через тот же этап уменьшения и сжатия, что и фото прямо с камеры. Такие инструменты по умолчанию часто экспортируют в полном разрешении, а экспорт в полном разрешении несёт ту же проблему веса, откуда бы ни взялись пиксели: с сенсора или из модели. Считайте это сырым файлом, который ждёт того же бюджета, а не готовым материалом.
Common questions
- Ухудшится ли вид фото товаров после сжатия?
- При разумной настройке нет. Сжатие с потерями в описанных здесь диапазонах настроено так, чтобы отбрасывать детали, которых человеческий глаз не замечает, поэтому правильно сжатое фото выглядит так же в обычном размере просмотра, а загружается в разы быстрее.
- Использовать WebP или остаться на JPEG?
- Используйте WebP, если его поддерживает платформа вашего магазина: он обычно на величину от 25 до 35 процентов легче JPEG при том же качестве. Возвращайтесь к хорошо настроенному JPEG, только если ваша платформа или тема не отдаёт WebP автоматически.
- Нужны ли отдельные размеры изображений для мобильных и компьютеров?
- В идеале да. Покупатель на мобильном видит фото в гораздо меньшем пространстве, чем на компьютере, поэтому более лёгкий файл для мобильных реально экономит время загрузки без заметной потери качества на этом экране.
- Влияет ли размер файла изображения на продажи или только на оценку скорости?
- Скорость страницы и конверсия связаны настолько тесно, что большинство e-commerce платформ уже считают её фактором ранжирования и конверсии, а не просто лабораторным показателем. Главное изображение, которое в одиночку выводит страницу за порог Largest Contentful Paint в 2,5 секунды, это реальное, измеримое замедление, которое чувствует покупатель, а не абстрактный балл.