Розмір фото для сайту: скільки має важити світлина в інтернет-магазині? Ми перевірили JPG і WebP
Наберіть у пошуковику «розмір фото для сайту» — і отримаєте відповіді, які кардинально різняться між собою. Більшість порад написано для блогерів або програмістів, а не для того, хто веде магазин із сотнями фото товарів.
Нижче ви знайдете конкретне число, пояснення, звідки воно береться, і спосіб до нього дійти, не зіпсувавши вигляду фото. Усе зводиться до двох кроків: зменшити розміри фото й зберегти його у форматі WebP. Це новіший за JPG формат, який розробив Google; за подібної якості він зазвичай дає легші файли. Ми перевірили це на одному фото й показуємо результат. Ми не обіцяємо, що зміна формату подвоїть продажі, бо чесно цього пообіцяти не може ніхто.
Коротка відповідь: близько 130 КБ на фото товару
Для фото, яке переглядають на картці товару, розумна мета — близько 130 КБ. Мініатюра в списку товарів може важити до кільканадцяти кілобайтів.
Це не норма ні Google, ні будь-якої організації. Такої норми просто немає. Це практичний компроміс: нижче певного порогу фото втрачає деталі, які покупець хоче побачити, — фактуру тканини, малюнок деревини чи блиск глазурі. Вище ви платите часом завантаження за деталі, яких на екрані телефону однаково ніхто не помітить.
Перш ніж почати, перевірте, з чого ви стартуєте. Якщо фото товарів сьогодні важать по кілька мегабайтів, виграш буде великим. Якщо по 200 КБ — невеликим.
Чому вага фото має значення
Зображення — найбільша складова типової головної сторінки. За даними звіту HTTP Archive Web Almanac 2025, медіанна вага головної сторінки, яку відкривають на телефоні, становить 2,56 МБ, а медіанна сумарна вага зображень на такій сторінці — близько 911 КБ. Це приблизно третина, і це більше, ніж увесь код JavaScript.
Друга причина для магазину важливіша. Google вимірює, як швидко з’являється найбільший елемент, видимий на екрані. Цей показник називається LCP. На 76% сторінок, які відкривають на телефоні, цим найбільшим елементом є саме зображення, а в магазині це зазвичай фото товару або банер.
Google очікує, що цей елемент з’явиться протягом 2,5 секунди. Не в одному тесті, а щонайменше в трьох чвертях реальних відвідувань. Результат понад 4 секунди він вважає поганим.
Чи поліпшить швидший сайт ваші позиції в Google?
Може трохи допомогти, але менше, ніж пишуть у багатьох порадах. Google зазначає, що його системи ранжування враховують показники швидкості. Але одразу додає, що добрі результати не гарантують високої позиції, а сторінка з доречним вмістом усе одно виграє у швидшої, але менш доречної.
Швидкість важить найбільше тоді, коли кілька сторінок мають приблизно однаково добрий вміст. Сам формат файлу не є фактором ранжування. Google не винагороджує фото за те, що воно у форматі WebP. Опосередковано він винагороджує сторінку, яка швидше завантажується.
Будьте обережні й із цифрами, що гуляють інтернетом. Популярне твердження, ніби секунда затримки — це на 7% менше конверсій, походить з опитування компанії Aberdeen Group, проведеного у 2008 році серед понад 160 компаній, а не з вимірювання поведінки покупців. Не спирайтеся на нього, ухвалюючи рішення.
Розміри йдуть перед форматом
Саме тут найчастіше помиляються. Перехід на WebP — це другий крок, а не перший.
Фото з телефону на 12 Мп має 4000 × 3000 пікселів. Google Merchant Center — панель, через яку магазини передають товари в Google Покупки, — рекомендує фото товарів розміром приблизно 1500 × 1500 пікселів. Це розумний орієнтир і для вашого магазину.
Якщо магазин віддає файл, більший за місце, яке фото займає на екрані, браузер однаково його зменшить, але спершу мусить завантажити його повністю.
Ми перевірили це на одному фото
Ми взяли фото товару — керамічного горнятка на гладкому тлі — і зберегли його чотирма способами. Вибрали його свідомо: насичений помаранчевий колір і плавний градієнт тла — саме ті місця, де стиснення легко лишає сліди. Зате з погляду самої ваги файлу це простіший випадок, ніж фото з фотоапарата.
| Версія | Розміри | Вага |
|---|---|---|
| Оригінал у JPG | 2880 × 2880 px | 1826 КБ |
| Лише зменшене, досі JPG | 1500 × 1500 px | 550 КБ |
| Лише WebP, повний розмір | 2880 × 2880 px | 128 КБ |
| Зменшене й збережене у WebP | 1500 × 1500 px | 122 КБ |
Саме лише зменшення розмірів знизило вагу файлу на 70%. Збереження у форматі WebP із цільовою вагою 130 КБ потім полегшило його ще більш ніж учетверо. Загалом фото в п’ятнадцять разів легше за оригінал.
Проте це друге зменшення — не заслуга самого формату. Зменшений JPG і далі мав якість 95, а розширення стиснуло WebP сильніше, щоб умістити його в 130 КБ. Скільки дає сам формат, пишемо нижче.
Найпромовистіше — порівняння двох останніх рядків. Обидві версії важать майже однаково, але вони не однаково добрі. Якість збереження задають за шкалою до 100: що вона нижча, то більше дрібних деталей зникає. Щоб умістити фото повного розміру в 130 КБ, розширення мусило знизити якість до 55. Зменшене фото вмістилося в ті самі 130 КБ з якістю 87, і, за нашим вимірюванням, стиснення спотворило його менше. Саме тому розміри йдуть перед форматом.
Тест ми провели 13 вересня 2026 року нашим розширенням ConverterSEO 1.31.1, налаштованим на цільову вагу 130 КБ, на сервері з WordPress 7.1 і графічною бібліотекою GD. Фото горнятка не з фотоапарата: ми згенерували його спеціально для цього тесту і зберегли як JPG з якістю 95. Справжні фото з фотоапарата мають більше шуму й зазвичай важать більше, тож у вас цифри вийдуть інші. Головне — напрям: спершу розміри, потім формат.
Чи погіршує WebP якість фото?
Так, трохи. WebP, який використовують для фото, — це формат зі втратами, тож під час збереження він завжди щось відкидає. Формулювання «без втрати якості» трапляється в порадах і навіть у самого Google, але за ним стоїть порівняння, в якому якість обох файлів оцінював алгоритм. Це не означає, що файл нічого не втратив. Стиснення без втрат для фото товарів використовують рідко, бо файли тоді виходять у багато разів більшими.
Однак за розумних налаштувань ця різниця може бути дуже малою. Ось той самий фрагмент горнятка з нашого тесту в обох версіях.
Порівняння піксель за пікселем показує, що WebP відрізняється від оригіналу трохи більше, ніж JPG ліворуч. На екрані, навіть у збільшенні, цю різницю важко помітити. Цятки в глазурі, відблиск і край горнятка лишилися на своїх місцях.
Обережними варто бути у двох випадках:
- Плавні переходи кольорів, наприклад тло студійного фото. За надто сильного стиснення замість плавного градієнта можуть з’явитися смуги.
- Дуже висока якість. Тут WebP ледве дотягує до JPG, тож файл не завжди вийде меншим.
Перш ніж переводити у WebP усі фото в магазині, спробуйте на кількох і перегляньте їх у збільшенні поруч з оригіналами. Почніть із тих, що мають гладке тло й насичений колір.
WebP чи JPG: скільки ви насправді виграєте
У своєму дослідженні Google повідомив, що WebP на 25–34% менший за JPG, коли алгоритм оцінює якість обох файлів як однакову. Це правда, але із застереженням, про яке поради зазвичай мовчать. Тест провели приблизно у 2011 році й порівнювали WebP з JPG, збереженим старою програмою, яка за тієї самої якості створює більші файли, ніж новіші інструменти.
Новіший аналіз компанії Cloudinary 2023 року дає повнішу картину. За нижчих налаштувань якості WebP на 25–35% менший за JPG, збережений без оптимізації, а за вищих ця перевага зменшується. Порівняно з JPG, збереженим сучасною програмою, яка сама сильно зменшує файли, наприклад mozjpeg, він менший уже лише на 3–5%.
Що це означає для вас? Якщо ви завантажуєте фото просто з фотоапарата, виграш буде помітним, але значною мірою завдяки меншим розмірам і сильнішому стисненню, а не самому формату. Якщо хтось колись добре стиснув ваші файли JPG, сама зміна формату дасть небагато, а більше ви виграєте на розмірах.
Є ще новіший формат — AVIF. У тому самому аналізі Cloudinary він виявився меншим за WebP приблизно на 10–15%, але за стандартних налаштувань його збереження тривало приблизно вдесятеро довше. Для магазину з тисячами фото це відчутна різниця.
Куди можна надсилати WebP, а куди ні
Фото товару потрапляє не лише у ваш магазин. Ви також завантажуєте його на ROZETKA Marketplace, у Google Покупки, іноді на Amazon. Не всюди WebP пройде.
| Куди | Чи прийме WebP |
|---|---|
| Ваш магазин на WordPress | Так, від версії 5.8, якщо сервер підтримує WebP |
| Google Merchant Center | Так |
| ROZETKA Marketplace | Так: довідковий центр для продавців перелічує формати JPEG, GIF, PNG і WebP (сторінку оновлено 12 червня 2026 року) |
| Amazon | Радше ні: його не було в переліку дозволених форматів (станом на 2024 рік) |
| Імпорт товарів у WooCommerce з файлу CSV або з іншої програми | Так, від версії 7.7 |
Звідси просте правило: зберігайте оригінали фото в JPG або PNG, а WebP використовуйте на сайті свого магазину. Не конвертуйте єдину копію, яку маєте.
Чи підтримують WebP браузери ваших клієнтів?
Так. За даними сервісу Can I Use за серпень 2026 року, близько 97% браузерів, якими користуються у світі, повністю підтримують WebP.
Safari підтримує WebP від версії 14, що вийшла у вересні 2020 року разом з iOS 14. Проте на комп’ютерах Mac це працює лише починаючи з macOS 11 Big Sur. Тож фраза «Safari не підтримує WebP», яка досі трапляється в старих порадах, уже роками неактуальна. Пошукова система Google також офіційно підтримує зображення у WebP.
Що WordPress уміє, а чого ні
WordPress від версії 5.8, що вийшла в липні 2021 року, дає змогу завантажувати зображення WebP до медіабібліотеки, якщо сервер підтримує цей формат. Але сам він не перетворить ваші файли JPG чи PNG. У 2022 році до версії 6.1 намагалися додати автоматичне створення WebP із завантажуваних файлів JPG, але цю зміну прибрали ще до виходу версії.
Чи вміє ваш сервер зберігати WebP, можна перевірити в адмінпанелі WordPress: Інструменти → Здоров’я сайту → Інформація → Обробка мультимедіа. Знайдіть там рядки «Формати файлів, підтримувані бібліотекою GD» і «Формати файлів, підтримувані ImageMagick». Якщо в котромусь із них є WEBP, усе гаразд.
Фото, які вже є у вашому магазині, лишаться в старому форматі, доки ви щось із ними не зробите. Є два шляхи.
- Окремі фото ви безкоштовно перетворите в конвертері WebP. Він працює у вашому браузері, тож файли не потрапляють ні на який сервер.
- Усі фото разом обробить розширення ConverterSEO. Воно стискає їх на сервері вашого магазину, одноразово: під час завантаження фото або тоді, коли ви запустите обробку фото, які вже є в бібліотеці. Ніколи — під час візиту клієнта.
Одне важливе застереження. Стиснувши фото, розширення замінює файл у медіабібліотеці версією WebP, а оригінал видаляє. Якщо оригінали фото є у вас лише у WordPress, перед початком зробіть їхню копію — наприклад, збережіть на комп’ютер папку wp-content/uploads через файловий менеджер у панелі хостингу.
Як перевірити, чи це себе виправдає
Запустіть PageSpeed Insights для картки товару й для сторінки категорії. Якщо інструмент не вказує на зображення, які варто поліпшити, виграш від WebP буде невеликим.
Ефект оцінюйте за даними реальних відвідувань, а не за одним вимірюванням, бо окремий тест виходить то кращим, то гіршим. Такі дані PageSpeed Insights показує у верхній частині звіту, якщо сторінка має достатньо відвідувань. Google перевіряє, чи сторінка завантажується швидко щонайменше в трьох чвертях реальних відвідувань.
І ще одна річ, яку легко зіпсувати. Ліниве завантаження (lazy loading) відкладає отримання фото до моменту, коли клієнт прогорне до нього сторінку. Не вмикайте його для головного фото товару. Google прямо радить цього не робити, бо таке завантаження затримує появу найважливішого елемента сторінки. Ліниве завантаження має сенс для фото, розміщених нижче.
З чого почати у своєму магазині
- Перевірте, скільки важать ваші фото товарів і які в них розміри: у медіабібліотеці клацніть фото й подивіться поля «Розмір файла» та «Розміри».
- Зменште їх приблизно до 1500 пікселів — саме такий розмір Google Merchant Center рекомендує для фото товарів.
- Збережіть їх у форматі WebP так, щоб вони важили близько 130 КБ.
- Перегляньте кілька фото у збільшенні, особливо ті, що мають гладке тло.
- Зберігайте оригінали в JPG для Amazon та інших маркетплейсів.
- Оцінюйте ефект за реальними відвідуваннями, а не за одним тестом.
Якщо фото у вас кілька, вистачить безкоштовного конвертера WebP. Якщо їх сотні, розширення ConverterSEO обробить їх усі разом, а стиснення у WebP у ньому безкоштовне й без обмежень. А якщо ви хочете, щоб ці самі фото мали ще й добрі назви файлів та описи, зазирніть у статтю про те, як підготувати зображення для SEO.