Ймовірно, з вами таке траплялося. Сторінка товару виглядає відшліфовано в Shopify, фотографії чіткі в редакторі, а потім мобільні відвідувачі починають відскакувати, поки ваш рейтинг PageSpeed вперто тримається на позначці шістдесяти. Проблема зазвичай не в «поганому дизайні». Проблема в тому, що розміри файлів зображень занадто великі для макета, і кожен зайвий байт має пройти, перш ніж покупець побачить товар, ціну або кнопку «Додати до кошика».

Ось чому рішення щодо зображень на вітрині магазину ніколи не є лише дизайнерськими рішеннями. Вони впливають на швидкість завантаження сторінки , візуальну якість і на те, яку частину сторінки Google може сканувати та відображати достатньо швидко, щоб це мало значення. Якщо вам потрібен практичний спосіб змінити розмір без здогадок, посібник зі зміни розміру зображень Ясіна Мальті стане корисним помічником, оскільки він допоможе вам зрозуміти механіку, перш ніж завантажувати наступну партію.

Зміст

Чому розміри файлів зображень мають значення в магазині Shopify

Продавець може переглянути відшліфовану сторінку товару в адміністративній панелі Shopify і все одно не помітити суттєвої проблеми. Сторінка може нормально відображатися на ноутбуці через Wi-Fi, а потім зависати на мобільному пристрої, головне зображення з’являтися пізно, а покупець прокручує сторінку далі згину, перш ніж вона здається готовою. Саме цей проміжок між сторінкою, яка виглядає добре, і сторінкою, яка завантажується швидко, визначає розмір файлів зображень, чи стане відвідування прибутком, чи шкодою.

Прихована конкуренція на кожній сторінці

Кожне зображення на вітрині магазину конкурує з текстом, скриптами, схемою та терпінням клієнта. Якщо головне фото занадто велике, воно не тільки споживає трафік, але й уповільнює момент, коли відвідувач може оцінити пропозицію. Вага зображення – це питання конверсії та питання Core Web Vitals одночасно.

Продавці Shopify зазвичай відчувають це в першу чергу на сторінках товарів та колекцій. Кілька великих фотографій можуть зробити весь макет важким, особливо в мобільних мережах, і ця вага проявляється в найважливіших місцях: головному зображенні, сітці колекції, масштабуванні товару та мініатюрах. Головне зображення має інше завдання, ніж мініатюра, тому воно не повинно нести таке ж навантаження на розмір файлу. Те саме стосується сіток колекцій, де повторювані зображення швидко накопичуються та перевантажують кожен прокручування.

Розмір файлу зображення також впливає на те, як швидко сторінка стає придатною для використання, тому його слід розглядати в тій самій розмові, що й планування макета. Розміри необробленого зображення мають значення, але розмір кінцевого файлу – це те, що браузер має отримати та декодувати. Як пояснюється в посібнику зі зміни розміру зображень Ясіна Мальті , менший експорт може зберегти візуальну роль зображення, одночасно позбавляючись зайвої ваги.

Практична винагорода

Причина, чому це важливо, проста. Базова кількість пікселів встановлює базову лінію, а стиснення та формат визначають кінцевий розмір файлу. 24-мегапіксельне зображення з 24-бітним RGB містить близько 72 мільйонів байтів необроблених піксельних даних, тоді як те саме зображення може займати близько 423,41 КБ як JPEG зі 100% якістю або приблизно 211,7 КБ з якістю JPEG 90%, залежно від параметрів експорту ( Scantips ). Ця різниця пояснює, чому два магазини можуть використовувати зображення, які виглядають майже однаково, і все одно отримувати дуже різні результати швидкості.

Практичне правило: якщо зображення важливіше для продажу, ніж для декору, вкажіть його цільовий розмір файлу, перш ніж завантажувати.

Це стандарт, який повинні використовувати продавці. Встановіть бюджет для кожного слота вітрини, а потім підберіть файл відповідно до завдання. Банер-герой може виправдати більшу вагу, ніж мініатюра, але жоден з них не повинен перевантажувати решту сторінки. Як тільки ця звичка сформується, сторінками товарів легше керувати, і кожне нове завантаження має своє місце, а не стає ще одним прихованим вантажем.

Розмір зображення проти розміру файлу та чому обидва мають значення

Продавці часто використовують ці терміни так, ніби вони означають одне й те саме, а потім дивуються, чому зображення виглядає нормально в адміністративній панелі, але уповільнює роботу магазину. Розмір зображення – це розміри в пікселях, ширина на висоту. Розмір файлу – це вага експортованого файлу в байтах на диску, зазвичай КБ або МБ, і вона змінюється залежно від стиснення, формату та бітової глибини. Два зображення можуть мати однакові розміри та все одно створювати дуже різні витрати на завантаження.

Діаграма, що порівнює розмір зображення в пікселях з розміром файлу в байтах для цифрової фотографії та графіки.

Пікселі встановлюють стелю

Пікселі визначають, скільки візуальних деталей може містити файл. 24-мегапіксельне зображення з 24-бітним RGB містить близько 72 мільйонів байтів необроблених піксельних даних, оскільки 24 мільйони пікселів × 3 байти на піксель = 72 000 000 байт . Це необроблене число є відправною точкою для експорту, а не кінцевою вагою, яку отримує браузер.

Вибір експорту швидко змінює результат. Те саме вихідне фото може мати розмір близько 423,41 КБ у форматі JPEG зі 100% якістю та приблизно 211,7 КБ у форматі JPEG зі 90% якістю. Пікселі залишаються незмінними, тоді як експорт зберігає більшу або меншу кількість оригінальних деталей.

Стиснення та формат визначають результат

Багато аудитів Shopify тут провалюються. Продавці вважають, що велике зображення має бути занадто важким для веб-сторінки, але розміри та вага файлу – це окремі рішення. Зображення великого розміру все ще може бути прийнятним файлом, якщо його добре експортувати. Скромна на вигляд графіка може стати роздутою, якщо її зберегти в неправильному форматі або з неправильною якістю.

Ця різниця має значення для ролі вітрини. Банер-герой може мати більшу візуальну вагу, ніж мініатюра, але зображення сітки колекції все одно має залишатися достатньо світлим, щоб сторінка завантажувалася коректно. Зображення товару з великим масштабом потребують достатньої деталізації пікселів, щоб їх було видно зблизька, тоді як слоти мініатюр зазвичай витрачають витрачену пропускну здатність, якщо експорт зберігає набагато більше деталей, ніж може показати макет.

Емпіричне правило: пікселі визначають, скільки візуальних деталей може відображати зображення. Розмір файлу визначає, скільки файлів має завантажити покупець.

Розділіть ці два числа, і планування зображень стане простіше. Вузький слот для мініатюр не виграє від великих розмірів. Збільшене зображення сторінки продукту потребує достатньої кількості пікселів, щоб виглядати чітким, але експортований файл все одно має залишатися прийнятним для Core Web Vitals та для решти сторінки, яка має завантажитися навколо нього.

Порівняння JPEG, PNG, WebP та AVIF

Кожен формат зображення виконує різну функцію на вітрині Shopify. Фотографія товару, логотип і скріншот потребують різного оформлення, навіть якщо вони розміщені в одній темі. Вибирайте формат на основі функції зображення на сторінці, а не на основі звички.

Інфографіка, що порівнює формати зображень JPEG, PNG, WebP та AVIF з описом їхніх функцій та варіантів використання.

JPEG та PNG все ще займають своє місце

JPEG залишається стандартним вибором для фотографій. Він добре стискається, працює майже скрізь і зазвичай зберігає зображення продуктів достатньо світлими для веб-сторінок. PNG підходить для зображень, яким потрібні чіткі краї, однорідний колір, прозорість або текст, тому логотипи та графіка інтерфейсу користувача часто належать до них, навіть якщо файли зазвичай важчі.

Цей поділ має значення на Shopify, оскільки магазини зазвичай поєднують обидва типи ресурсів. Фотографія способу життя, збережена у форматі PNG, зазвичай має більшу вагу, ніж потрібно нести вітрині магазину. Логотип, збережений у форматі JPEG, може виглядати нерівномірно або втрачати прозорість, що призводить до необхідності очищення пізніше. Формат має відповідати завданню, а не звичці.

Картка колекції — гарний приклад. Якщо зображення являє собою чистий знімок продукту, JPEG зазвичай зменшує вагу, не погіршуючи враження покупців. Якщо ресурсом є значок, іконка або логотип, розташований поверх кольорового фону, PNG краще захищає краї та уникає негарних ореолів.

Розміри файлів push WebP та AVIF менші

Сучасні формати зазвичай ще більше зменшують розмір файлу. Для прикладу зображення порівнянної якості, JPEG з 75% розміром становить приблизно 1,25–1,53 МБ , WebP з втратами – приблизно 0,72–0,88 МБ , AVIF – приблизно 0,57–0,69 МБ , а JPEG XL – приблизно 0,55–0,67 МБ ( W3Techs ). Це суттєве зменшення порівняно зі старими звичками експорту, і це пояснює, чому багато інтернет-магазинів можуть зменшити вагу, не роблячи фотографії розм’якшеними.

Загвоздка в тому, що вибір формату все ще залежить від самого контенту. WebP та AVIF можуть дуже добре працювати для предметної фотографії, але графіка з прозорістю може поводитися по-різному. Якщо файл здебільшого є фотографією, використовуйте формат, який ефективно стискає такий тип зображення. Якщо це логотип або графіка з прозорістю, використовуйте формат, який зберігає чіткі краї.

На вітрині Shopify це зазвичай означає один формат для головного банера, інший для логотипа та ще один для знімків товару крупним планом. Правильний вибір полягає не стільки в тому, що виглядає сучасно, скільки в тому, що забезпечує швидкий перегляд сторінки, водночас чітко показуючи зображення в його фактичному місці.

Правило прийняття рішення: для фотографій із людьми, продуктами або текстурою оберіть JPEG або WebP. Для плоскої графіки, логотипів або скріншотів оберіть PNG. Якщо ваш робочий процес підтримує резервний варіант, AVIF або WebP – це чистіший варіант для живого магазину.

Як роздільна здатність та стиснення змінюють числа

Файл може добре виглядати на екрані, але все одно бути набагато важчим, ніж потрібно. Саме це продавці відчувають у Shopify в першу чергу, оскільки одне й те саме зображення може поводитися дуже по-різному: як головний банер, плитка сітки колекції, зум-знімок продукту або невелика мініатюра. Роздільна здатність контролює, скільки пікселів ви просите браузер перенести, а стиснення контролює, яка частина цієї ваги обрізається перед завантаженням сторінки.

Більше пікселів означає більше даних

Більше зображення – це не просто більше полотно, це більше необроблених даних для обробки браузером. Як було показано раніше, зображення з роздільною здатністю 24 МП містить близько 72 мільйонів байтів необроблених даних перед початком стиснення. Якщо експортувати ту саму сцену з більшою кількістю пікселів, ніж потрібно для вітрини, файл стане важчим, навіть якщо фотографія виглядає майже ідентично після відображення.

Ось чому надмірно великий експорт створює більше, ніж просто захаращення сховища. Він додає ваги перенесення, ускладнює роботу браузера та може уповільнювати зображення саме там, де покупці очікують швидкого завантаження сторінки. Плитка сітки колекції не потребує такого ж корисного навантаження, як зображення продукту з можливістю масштабування, а мініатюра потребує набагато менше, ніж будь-яке з них.

Стиснення економить, але не позбавляє зайвих пікселів

Стиснення може зменшити розмір великого вихідного файлу до рівня, який Shopify може ефективно обслуговувати, але це не скасовує витрати на використання більшої кількості пікселів, ніж потрібно для розміщення. Якщо фотографія продукту потрапляє в галерею з увімкненим масштабуванням, вам потрібна достатня деталізація, щоб залишатися чіткою на хорошому екрані. Якщо те саме зображення потрапляє лише в картку колекції, доставка повнорозмірної версії — це марна трата зусиль.

Якщо говорити про це зрозуміло, то пікселі встановлюють межу для марнування , оскільки завеликі розміри створюють вагу, якої можна уникнути. Параметр якості встановлює межу для економії , оскільки він визначає, скільки деталей зберігатиметься в експорті. Формат контролює, наскільки допомагає це стиснення , оскільки різні типи файлів стискаються по-різному.

Якщо вам потрібні рекомендації щодо розміру зображень у випадках використання Shopify, цей посібник з SEO-оптимізації зображень Shopify стане корисним помічником. Він допомагає пов’язати рішення про експорт із фактичним розміщенням, замість того, щоб розглядати кожне зображення вітрини магазину так, ніби воно виконує одну й ту саму функцію.

Зображення героя, плитка колекції та мініатюра вимагають різного рівня деталізації. Саме цю частину продавці зазвичай не помічають, і саме тому невелика зміна роздільної здатності може здаватися нешкідливою в редакторі, водночас створюючи важче сховище в браузері.

Основні показники веб-сайту та вартість SEO для важких зображень

Важкі зображення шкодять SEO дуже безпосередньо, оскільки Google вимірює враження від завантаження, а не намір, з яким воно випливає. На багатьох сторінках Shopify найбільше видиме зображення, найімовірніше, впливає на процес завантаження. Якщо це зображення занадто важке, Largest Contentful Paint сповільнює завантаження, і відвідувач довше чекає, перш ніж сторінка здаватиметься зручною для використання.

Гістограма, що показує, як збільшення розмірів файлів зображень негативно впливає на час завантаження сторінки з найбільшим вмістом зображення.

LCP зазвичай звинувачують не в тому

Продавці часто звинувачують у цьому додатки, скрипти або код теми, і іноді вони мають рацію. Але головне зображення часто є найлегшою єдиною перемогою. Велике головне фото може затримати момент, коли сторінка стане змістовною, особливо на мобільних пристроях, де якість з’єднання варіюється, а область перегляду достатньо мала, щоб легко помітити надмірно великі ресурси.

Інший показник, на який впливає вага зображення, – це сукупний зсув макета . Якщо ваша тема не резервує місце належним чином для зображень, макет змінюватиметься під час завантаження ресурсів. Це виглядає недбало для покупців і ускладнює використання сторінки. Теми Shopify часто вже виконують частину цієї роботи, але не завжди достатньо, щоб врятувати продавця від поганого робочого процесу із зображеннями.

Цільові розміри не є випадковими

Технічні рекомендації щодо веб-доставки зазвичай передбачають розмір фотографій товарів від 800 до 1000 пікселів та від 80 до 150 КБ , головних зображень менше 200 КБ та загальний розмір зображення сторінки менше 500 КБ . У тих самих рекомендаціях JPEG часто має розмір від 200 до 600 КБ , WebP – від 150 до 450 КБ , AVIF – від 80 до 300 КБ та PNG – від 500 КБ до 3 МБ ( Vizua ). Ці діапазони існують тому, що вага зображення та продуктивність сторінки пов’язані між собою.

Сторінка не обов'язково має бути штучно крихітною, щоб бути швидкою. Вона має бути дисциплінованою. Якщо завантаження зображень роздуте, ви змушуєте браузер виконувати роботу, яка не покращує враження покупця. Це прямі витрати на SEO, а не теоретичні.

Якщо вам потрібен погляд на ширший процес аудиту з точки зору Shopify, корисним орієнтиром буде цей посібник з SEO-оптимізації зображень для Shopify .

Розміри цільових файлів зображень за розміщенням Shopify

Найпростіший спосіб перестати гадати – встановити бюджет на розмір файлу для кожної візуальної ролі на вітрині магазину. Банер-герой виконує іншу функцію, ніж мініатюра, а сітку колекції не слід експортувати з такою ж вагою, як зображення товару з можливістю масштабування. Щойно продавці призначать розміри файлів зображень фактичним місцям розташування, магазин буде легше підтримувати в робочому стані та набагато легше проводити аудит.

Нехай макет магазину диктує ваш вибір експорту

Повноширинні зображення зазвичай потребують більше місця, ніж невеликі блоки макета. Інструкції щодо адаптивних зображень зазвичай вказують на повноширинні зображення розміром близько 1600 пікселів та від 200 до 300 КБ , менші зображення макета розміром 25%-50% ближче до 800 пікселів та від 70 до 350 КБ , а також зображення розміром приблизно вдвічі більший за простір дисплея, щоб вони все ще виглядали чітко на екранах з високою щільністю. На практиці це означає, що одне й те саме вихідне фото часто потребує різних експортів: один для заповненого ним слота, а інший для чіткішого рендерингу, якого очікує щільний екран.

Цільові розміри файлів зображень за розміщенням Shopify Розміщення Ширина цілі Розмір цільового файлу Рекомендований формат
Банер героя Герой верхньої частини сторінки Близько 1600 пікселів від 200 до 300 КБ JPEG або WebP
Мініатюра сітки колекції Колекційна плитка Приблизно від 400 до 600 пікселів від 40 до 80 КБ JPEG або WebP
Фотографія сторінки товару Головна галерея продуктів Приблизно від 800 до 1200 пікселів від 100 до 200 КБ JPEG, WebP або AVIF
Мініатюра або зразок зображення Невеликий опорний отвір Приблизно від 200 до 400 пікселів Тримайте якомога легше JPEG або PNG, залежно від контенту

Головне зображення може мати більшу вагу, оскільки воно заповнює більшу частину області перегляду. Плитка колекції – ні. Саме цю різницю продавцям потрібно враховувати під час експорту зображень для розділів Shopify, оскільки розмір файлу має відповідати простору, який зображення займає на сторінці.

Чому для одного й того ж зображення може знадобитися більше одного експорту

Сторінка товару часто пропонує кілька версій одного й того ж файлу за допомогою адаптивної розмітки. Це нормально. Браузер повинен отримувати менший файл для менших екранів, а більший – лише там, де це потрібно для макета. Таке налаштування зберігає якість масштабування, не надаючи зайвого обсягу кожному відвідувачу.

Та сама логіка застосовується і поза галереєю товарів. Вітрина магазину часто потребує одного способу оформлення для головного героя, іншого для колекційних карток і ще одного для детальних зображень крупним планом. Якщо ви хочете, щоб ресурси для соціальних мереж та спільного використання відповідали візуальним елементам вітрини магазину, цей посібник із соціальних зображень Shopify допоможе поєднати ці потреби поза сторінкою товару з одним робочим процесом роботи із зображеннями.

Емпіричне правило Shopify: нехай слот вирішує, що експортувати. Герой може бути щедрим. Мініатюра сітки ні.

Це правило запобігає поширеній помилці завантаження одного гігантського зображення та сподівання, що тема все вирішить. Теми можуть допомогти, але вони не можуть скасувати невдале рішення щодо експорту.

Поширені помилки, які уповільнюють роботу магазинів

Багато повільних магазинів Shopify працюють повільно, бо хтось повірив у напівправдиве правило та постійно його повторював. Ці звички з'являються в аудитах знову і знову, зазвичай тому, що порада спочатку здавалася розумною і ніколи не перевірялася на відповідність завантаженню вітрини. Як тільки ви відокремите звичку від продуктивності, виправлення зазвичай прості.

П'ять переконань, які викликають здуття живота, якого можна уникнути

  • Вища роздільна здатність завжди означає кращу якість. Це перестає бути правдою, коли зображення вже більше, ніж простір, який воно заповнює. Зайві пікселі ніяк не впливають на сприйняття покупцем, вони лише додають ваги.
  • PNG завжди чіткіший за JPEG. PNG – це правильний вибір для логотипів та графіки з чіткими краями, але фотографії продуктів зазвичай не потребують такого безвтратного навантаження.
  • Shopify автоматично оптимізує все. Shopify допомагає в деяких випадках, але оригінальне завантаження все одно встановлює граничну вагу ресурсу.
  • WebP шкодить SEO, бо Google не може його прочитати. Це переконання застаріло. Пошукові системи можуть відображати сучасні формати, як звичайні зображення.
  • Розмір зображення має значення лише на комп’ютері. Покупці, які користуються мобільними пристроями, спочатку відчувають зайву вагу файлу, оскільки їхні пристрої та з’єднання мають менше місця для помилок.

Продавці можуть використовувати корекцію негайно

Виправлення починається з ролі, а не зі звички. Головне зображення має бути достатньої якості, щоб утримувати верхню частину сторінки. Плитка колекції має залишатися світлою, щоб сітка завантажувалася акуратно. Збільшене зображення може містити більше деталей, оскільки воно виконує інше завдання, тоді як мініатюра або зразок повинні залишатися настільки малими, наскільки дозволяє макет.

Ось чому одне правило експорту для кожного зображення створює проблеми. Якщо ресурсом є фотографія, експортуйте для швидкості та правдоподібного кольору. Якщо це графіка з текстом або прозорістю, захистіть краї та змиріться з тим, що файл може бути більшим. Якщо він займає вузьке місце, не завантажуйте файл, призначений для відображення на повну ширину.

Як зазначено в розділі про роздільну здатність, зображення з роздільною здатністю 24 МП може займати від 2 до 8 МБ після стиснення, чого достатньо, щоб зрозуміти, чому сама лише кількість пікселів не говорить про те, чи готове зображення до веб-розміщення. Основне питання полягає в тому, чи відповідає файл розміщенню в Shopify, яке він обслуговує. Герой може витримувати більше, ніж просто картку сітки, а зображення з масштабуванням може витримувати більше, ніж мініатюру. Експорт має відповідати цій ролі.

Пов’язана помилка полягає в тому, що кожен ресурс заслуговує на однакове очищення метаданих. Якщо зображення достатньо важливе для розміщення, його також достатньо важливо спочатку перевірити. Використовуйте генератор альтернативного тексту для зображень Shopify, щоб забезпечити узгодженість цієї частини робочого процесу, а потім оцініть розмір файлу відповідно до місця, яке він заповнить.

Саме це більшість магазинів ігнорують. Файл не обов'язково має бути крихітним. Він має бути доречним.

Повторюваний контрольний список для вашої наступної партії зображень

Найчистіший робочий процес із зображеннями – це той, який ваша команда може повторювати без здогадок. Щоразу, коли ті самі перевірки відбуваються в одному порядку, ви отримуєте менше завантажень надмірного розміру, менше несподіванок з макетом і менше повільних сторінок товарів, що ховаються в каталозі. Якщо ви готуєте новий дроп товару або оновлюєте тему, запустіть пакетну роботу через цю процедуру, перш ніж щось буде опубліковано.

Проста процедура експорту, яка підходить для Shopify

  1. Експортуйте з цільовою шириною для розміщення. Головне зображення, картка колекції, зображення продукту та мініатюра мають різні функції, тому не завантажуйте більший файл лише тому, що це дозволяє вихідне зображення.
  2. Виберіть формат за роллю. Фотографії зазвичай підходять для JPEG, WebP або AVIF. Логотипи та графіка з великою кількістю тексту краще підходять для PNG, коли прозорість або чіткі краї мають значення.
  3. Збережіть версію для живого магазину та версію для Zoom, якщо потрібно. Файл Zoom може зберігати більше деталей, але видима сторінка не повинна мати такої ваги, якщо цього дійсно не потребує макет.
  4. По можливості використовуйте легший сучасний формат. Використовуйте WebP або AVIF для живого зображення, а JPEG залишайте як резервний варіант там, де важлива сумісність.
  5. Перевірте метадані зображення та альтернативний текст перед публікацією. Якщо ресурс достатньо важливий для публікації, він достатньо важливий для аудиту. Використовуйте генератор альтернативного тексту RankEngine, щоб забезпечити узгодженість цієї частини робочого процесу.

Знімок екрана з https://rankengine.app

Що можна купити за допомогою послідовності

Невеликі покращення накопичуються по всьому каталогу. Одне легше головне зображення саме по собі не перетворить магазин, але цілий набір фотографій товарів правильного розміру, плиток колекцій та мініатюр може зробити вітрину магазину чистішою, швидшою та легшою для покупок. Клієнти помічають це, навіть якщо ніколи не говорять про розміри файлів.

Якщо ваша команда обробляє метадані зображень у великих масштабах, генератор альтернативного тексту RankEngine може забезпечити рух цієї частини робочого процесу, не перетворюючи кожне завантаження на ручну роботу.

Застосуйте цю процедуру до наступної партії, і ваша вітрина одразу завантажиться швидше.