Як оптимізувати зображення для сторінок товарів електронної комерції | Bulk Image Compressor
Зображення товарів продають. Якщо покупець не може чітко розгледіти деталі, він не купує. Але якщо ваші зображення занадто великі, а сторінки завантажуються повільно, вони йдуть до того, як зображення встигають завантажитися. Досягнення правильного балансу — одна з найпрактичніших речей, які ви можете зробити для інтернет-магазину.
Хороша новина в тому, що вам не доведеться вибирати між якістю та швидкістю. З правильними налаштуваннями стиснення та форматами ваші фото товарів можуть виглядати чітко на екрані, швидко завантажуючись на будь-якому пристрої.
Чому розмір зображення товару важливий
Типова сторінка товару має від 4 до 8 зображень: основне фото, кілька ракурсів, можливо, детальний знімок і лайфстайл-зображення, що показує товар у використанні. Якщо кожне з них є нестиснутим файлом по 4 МБ від вашого фотографа, це 16-32 МБ зображень на сторінку.
Повільні сторінки товарів безпосередньо шкодять продажам. Дослідження Deloitte показало, що покращення швидкості мобільного сайту на 0,1 секунди призвело до збільшення конверсій на 8,4% для роздрібних сайтів. Найбільшим фактором швидкості сторінок для електронної комерції майже завжди є зображення.
Також є мобільний фактор. Більшість онлайн-покупок відбувається на телефонах. Ваші зображення товарів мають швидко завантажуватися на мобільних з’єднаннях, а не лише на швидкому Wi-Fi.
Знімки на білому фоні проти лайфстайл-фото
Ці два типи зображень товарів мають різні характеристики стиснення.
Знімки товарів на білому фоні — це те, що ви бачите на Amazon, eBay та більшості сторінок списків товарів. Вони зазвичай мають чистий білий фон із товаром по центру. Ці зображення стискаються дуже добре, оскільки великі області суцільного білого вимагають дуже мало даних. Ви часто можете стискати їх при 75-80% якості JPEG і майже не бачити різниці.
Лайфстайл-фото показують товари в реальних умовах. Чашка кави на кухонній стійці, куртка на моделі на вулиці, взуття на міському тротуарі. Ці зображення мають більше візуальної складності з різноманітним фоном, текстурами та освітленням. Вони потребують дещо вищих налаштувань якості, приблизно 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 vs PNG vs 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