Как оптимизировать изображения для страниц товаров электронной коммерции | Bulk Image Compressor
Изображения товаров продают вещи. Если покупатель не может четко разглядеть детали, он не покупает. Но если ваши изображения слишком велики и страницы загружаются медленно, они уходят до того, как изображения успеют загрузиться. Правильный баланс — одна из самых практичных вещей, которые вы можете сделать для интернет-магазина.
Хорошая новость в том, что вам не нужно выбирать между качеством и скоростью. С правильными настройками сжатия и форматами ваши фото товаров могут выглядеть четко на экране, быстро загружаясь на любом устройстве.
Почему размер изображений товаров имеет значение
На типичной странице товара от 4 до 8 изображений: основное фото, несколько ракурсов, возможно, детальный снимок и лайфстайл-изображение, показывающее товар в использовании. Если каждое из них — несжатый файл по 4 МБ от вашего фотографа, это 16-32 МБ изображений на страницу.
Медленные страницы товаров напрямую вредят продажам. Исследование Deloitte показало, что улучшение скорости мобильного сайта на 0,1 секунды привело к увеличению конверсий на 8,4% для розничных сайтов. Самый большой фактор скорости страницы для электронной коммерции — почти всегда изображения.
Есть также мобильный фактор. Большинство онлайн-покупок совершается с телефонов. Ваши изображения товаров должны быстро загружаться на сотовых соединениях, а не только на быстром Wi-Fi.
Снимки на белом фоне против лайфстайл-фото
У этих двух типов изображений товаров разные характеристики сжатия.
Снимки товаров на белом фоне — это то, что вы видите на Amazon, eBay и большинстве страниц со списками товаров. Они обычно имеют чистый белый фон с товаром в центре. Эти изображения очень хорошо сжимаются, потому что большие области сплошного белого требуют очень мало данных. Вы часто можете сжимать их с качеством JPEG 75-80% и не видеть почти никакой разницы.
Лайфстайл-фото показывают товары в реальных условиях. Кружка на кухонной стойке, куртка на модели на улице, обувь на городском тротуаре. Эти изображения имеют большую визуальную сложность с разнообразными фонами, текстурами и освещением. Им нужны немного более высокие настройки качества, около 80-85%, чтобы сохранить детали.
Оба типа могут быть значительно меньше оригиналов. Снимок товара на белом фоне размером 5 МБ обычно сжимается до 200-400 КБ. Лайфстайл-фото размером 6 МБ сжимается до 300-600 КБ.
Требования и рекомендации платформ
У разных платформ электронной коммерции свои рекомендации по изображениям. Вот спецификации для основных:
Shopify рекомендует изображения размером 2048 x 2048 пикселей. Максимальный размер файла — 20 МБ, но они настоятельно рекомендуют держать изображения значительно ниже этого. Shopify выполняет некоторое автоматическое сжатие и отдает WebP, когда браузер его поддерживает, но начало с оптимизированных изображений дает лучшие результаты.
WooCommerce не устанавливает строгих ограничений, поскольку работает на вашем собственном хостинге. Это означает, что оптимизация изображений полностью ваша ответственность. Размеры миниатюр по умолчанию — 600 x 600 для каталога и полный размер изображения для страницы товара. Вы должны изменять размер и сжимать перед загрузкой.
Amazon требует минимум 1000 пикселей по самой длинной стороне (для функции увеличения) и рекомендует 2000 пикселей. Максимальный размер файла — 10 МБ. Главное изображение должно иметь чисто белый фон (RGB 255, 255, 255). Amazon сжимает изображения на своей стороне, но загрузка уже оптимизированных изображений дает вам больше контроля над конечным результатом.
Etsy рекомендует 2000 пикселей по самой короткой стороне. Они принимают файлы до 1 МБ. Поскольку лимит Etsy относительно мал, вам почти наверняка придется сжимать перед загрузкой.
Рекомендуемые размеры и размеры файлов
Для большинства платформ электронной коммерции вот практический ориентир:
| Тип изображения | Размеры | Целевой размер файла |
|---|---|---|
| Основное фото товара | 2000 x 2000px | 200-400 КБ |
| Альтернативные ракурсы | 2000 x 2000px | 200-400 КБ |
| Детальный снимок/зум | 2000 x 2000px | 250-500 КБ |
| Лайфстайл-фото | 2000 x 1333px | 300-600 КБ |
| Миниатюра | 600 x 600px | 30-60 КБ |
Эти размеры дают достаточное разрешение для функций увеличения, сохраняя страницы быстрыми. Общая загрузка изображений на страницу товара в идеале должна быть менее 2 МБ.
Выбор правильного формата
JPEG — стандарт для фото товаров. Он хорошо работает с фотографиями и поддерживается везде. Используйте его по умолчанию.
WebP обеспечивает примерно на 25-35% лучшее сжатие, чем JPEG при том же визуальном качестве. Если ваша платформа его поддерживает (Shopify делает это автоматически, WooCommerce требует плагин), WebP — отличное улучшение. Для более глубокого сравнения форматов прочитайте наше сравнение JPEG, PNG и WebP.
PNG нужен только когда изображения ваших товаров требуют прозрачности. Например, если вы продаете товары, которые нужно показывать без фона вообще, PNG сохраняет эту прозрачность. В противном случае избегайте PNG для фото товаров, потому что размеры файлов намного больше.
Пакетная обработка для каталогов товаров
Если у вас магазин с десятками или сотнями товаров, сжатие изображений по одному нереалистично. Каталог товаров на 200 позиций с 5 изображениями каждая означает 1000 изображений для обработки.
Вот где пакетное сжатие экономит часы. С помощью Bulk Image Compressor вы можете загрузить целую папку с изображениями товаров и сжать их все сразу. Всё работает в вашем браузере, поэтому ваши фото товаров никогда не загружаются на внешний сервер. Это важно, когда вы работаете с невыпущенными товарами или изображениями, которыми не хотите делиться до запуска.
Вот рабочий процесс, который хорошо работает для каталогов товаров:
-
Сначала измените размер. Приведите все изображения к нужным размерам (2000 x 2000px для большинства платформ). Не отправляйте изображения 6000px через сжатие, когда они будут отображаться только при 2000px.
-
Разделите по типу. Поместите снимки на белом фоне в одну партию, а лайфстайл-фото в другую. Это позволит использовать разные настройки качества для каждой.
-
Сожмите снимки на белом фоне с качеством 75-80%. Чистые фоны эффективно сжимаются при более низких настройках.
-
Сожмите лайфстайл-фото с качеством 80-85%. Дополнительные детали в этих изображениях выигрывают от немного более высокого качества.
-
Выборочно проверьте несколько результатов. Откройте несколько сжатых изображений и сравните их с оригиналами. Убедитесь, что текст на упаковке все еще читаем, а детали товара четкие. Подробнее об этом в нашем руководстве уменьшение размера файла без потери качества.
-
Загрузите на вашу платформу. Замените оригиналы сжатыми версиями.
Влияние на вашу прибыль
Более быстрые страницы товаров означают больше продаж. Это прямая связь. Когда покупатель нажимает на ваш товар из поиска или рекламы, у вас есть около двух-трех секунд, прежде чем он решит, ждать или нажать кнопку «назад».
Оптимизированные изображения также снижают расходы на хостинг и CDN. Если вы обслуживаете 500 000 просмотров страниц товаров в месяц и сокращаете средний объем изображений с 8 МБ до 1,5 МБ на страницу, это терабайты сэкономленного трафика.
Ваши фото товаров — самый важный актив в вашем интернет-магазине. Правильное сжатие позволяет сохранить визуальное качество, необходимое вашим покупателям, обеспечивая при этом быстрый опыт, который действительно ведет к покупкам.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor