Увімкнена конвертація WebP не визначає, яке саме зображення завантажує браузер. Перевірте фактичний запит у вкладці Network: вибраний URL, заголовок Content-Type, розміри та розмір відповіді. Лише тоді ви встановите, чи проблема полягає у відсутності належного варіанта, правилі сервера, кеші чи надто великому зображенні.
Цей посібник призначений для власників магазинів PrestaShop, у яких WebP уже є, але вони й далі бачать важкі зображення або слабкий результат продуктивності. Він містить реальну контрольовану спробу для трьох ілюстрацій і спосіб відокремити конвертацію файлу від його доставки клієнту.
1. Почніть із зображення, видимого на конкретній сторінці
Виберіть одне зображення на сторінці товару або в списку товарів. Не починайте з випадкового файлу в каталозі сервера: тема може використовувати іншу мініатюру, варіант для екрана з вищою щільністю пікселів або адресу з CDN. WebP оригіналу не замінює автоматично всі потрібні розміри.
Відкрийте інструменти розробника, перейдіть до Network, вимкніть кеш на час перевірки та оновіть сторінку. Виберіть фільтр зображень. Для зображень із лінивим завантаженням прокрутіть до потрібного місця. Запишіть URL, тип відповіді, розмір і інформацію про те, чи дані справді були отримані з мережі. Ці параметри описує документація Network у Chrome DevTools.
Не порівнюйте повне завантаження JPEG із рядком WebP, позначеним як memory cache. Такий результат описує інші умови. Так само малий обсяг передавання при відповіді 304 не означає, що сам графічний файл раптом має кілька байтів.
2. Адреса .jpg може повертати WebP
У вихідному коді WebP Pro 2.1.3 доставка зображення може працювати через правила Apache: запит JPG або PNG переписується на наявний варіант WebP, якщо браузер заявляє про його підтримку. Тому адреса, видима в HTML, і надалі може закінчуватися на .jpg, а відповідь мати тип image/webp.
Тому самого перегляду коду сторінки недостатньо для висновку «WebP не працює». Перевірте формат отриманої відповіді. З іншого боку, напис .webp у налаштуваннях чи наявність файлу на диску не доводять, що відповідне правило виконується на сервері, який обслуговує магазин.
Як інтерпретувати спостереження в браузері
Спостереження
Можливий висновок
Наступний крок
URL .jpg, Content-Type image/webp
Сервер віддав WebP, попри збереження вихідної адреси.
Перевірте розміри та байти цього варіанта.
URL .jpg, Content-Type image/jpeg
У цій спробі було віддано JPEG.
Перевірте наявність точного варіанта WebP, правила сервера та кеш.
WebP існує, але стосується іншого розміру
Конвертація не відповідає файлу, вибраному темою.
Додайте потрібний тип мініатюри або правильний діапазон черги.
Зображення надходить із CDN
Відповідь не доставляється безпосередньо правилом основного сервера магазину.
Перевірте формат, ключ кешу та оновлення на боці CDN.
WebP має велику роздільну здатність
Формат може бути правильним, але вибране зображення все ще надто велике.
Порівняйте природні розміри з розміром відображення.
3. Перевірте srcset, picture і вибраний варіант
Для адаптивних зображень браузер вибирає ресурс з урахуванням умов сторінки та пристрою. Перевірте елемент img, за потреби srcset і sizes, а для picture також елементи source. Властивість currentSrc допомагає вказати фактично вибрану адресу, замість того щоб орієнтуватися на перший запис у коді.
Елемент picture дає змогу доставляти альтернативні джерела, наприклад за форматом або умовою media; правила вибору описує документація елемента picture. Не кожна тема використовує цей механізм, і не кожному магазину потрібна зміна HTML, якщо коректно працює узгодження формату на боці сервера.
Повторіть перевірку для телефону. Зображення шириною 2000 px, використане в маленькій мініатюрі, залишається зайвим навантаженням навіть після конвертації. Підбір розміру та вибір формату — це два окремі налаштування.
4. Власне вимірювання: три ілюстрації JPEG і WebP
Для контрольованої спроби ми використали три наявні блогові ілюстрації розміром 700 × 400 px. Кожен JPEG ми конвертували через PHP 8.1.34 і GD 2.3.3 у WebP з параметром якості 80. Ми не змінювали ні розміри, ні кадрування. Chromium завантажив шість файлів із локального HTTP-сервера з вимкненим кешем і без CDN.
Джерелом мініатюр була локальна копія PrestaShop 8.2.8 з Warehouse 4.7.2. Саме вимірювання проводилося на окремій сторінці порівняння, тому воно не вимірює час відкриття сторінки товару чи ефект упровадження модуля. Ми наводимо байти вмісту отриманих відповідей без транспортних заголовків. Усі шість запитів завершилися HTTP 200 і коректним типом зображення.
Виміряний розмір відповіді для тих самих трьох ілюстрацій
Результат показує розміри конкретних файлів. Він не доводить, що кожен WebP буде меншим на таку саму величину або що обидва кодування мають ідентичну візуальну якість. Параметри якості різних форматів не є спільною шкалою. Перегляньте зображення в реальному розмірі використання, звертаючи увагу на написи, дрібні текстури та різкі краї.
5. Перевірте чергу, а вже потім повторюйте конвертацію
У WebP Pro 2.1.3 збереження або масштабування зображення може додати завдання до черги. Готовий варіант з’являється після її виконання. Під час діагностики перевірте, чи вибрано правильний діапазон, чи завдання було оброблено і чи не завершилося воно помилкою. Саме збереження розкладу не запускає автоматично системне завдання CRON.
Зміна якості також не обов’язково одразу змінює наявні файли. У переглянутому коді свіжий WebP може бути пропущений поза режимом перезапису. Якщо ви свідомо змінюєте якість, заплануйте повторне генерування потрібного діапазону, а потім перевірте результат. Не запускайте повну регенерацію всього магазину при кожній дрібній розбіжності.
Під час узгодження формату важливо, щоб проміжний шар розрізняв варіанти відповіді. Правила WebP Pro передбачають Vary: Accept за наявності доступного модуля заголовків Apache. Однак це не означає автоматичної конфігурації будь-якого CDN або Nginx. Перевірте фактичну відповідь із того місця, звідки її завантажує браузер.
Після зміни зображення оновіть відповідний кеш і повторіть ідентичну перевірку. Запишіть вибраний пристрій, стан кешу, URL і розміри. Без цих даних порівняння «до і після» легко змішує різні зображення або різні умови.
Менший файл може скоротити час завантаження, але LCP охоплює також інші етапи, зокрема очікування сервера, виявлення ресурсу та його відображення. Посібник Google з оптимізації LCP показує, чому саме стиснення не розв’язує кожну затримку. Не обіцяйте результату PageSpeed 100 лише на підставі самого формату.
Наступний крок: якщо бракує генерування або доставки належних варіантів, перевірте WebP Pro для PrestaShop. Якщо зображення правильні, а сторінка все ще повільна, підготуйте результати Network і замовте діагностику продуктивності магазину.
Перевірено 13.09.2026. Механізми модуля: код WebP Pro 2.1.3. Вимірювання ілюстрацій: окрема контрольована HTTP-спроба; не є вимірюванням швидкості продукційного магазину.
Модуль дозволяє впровадити зображення товарів, категорій, виробників, постачальників, зображення з модулів, шаблонів тощо у формат WebP. Формат WebP має стати новим відкритим стандартом для стисненої графіки в Інтернеті як прямий конкурент старішого формату JPEG за меншого розміру при порівнянній якості. За допомогою нашого модуля весь процес впровадження...
Патрик Марек — власник PrestaDev.pl і програміст, який спеціалізується на PrestaShop. Уже багато років займається створенням, розвитком і підтримкою інтернет-магазинів. Поєднує роботу над кодом магазину та модулів із налаштуванням серверного середовища, у якому працюють ці рішення.
Проєктує та розвиває модулі PrestaShop, адаптує наявні функції, а також готує інтеграції з оптовими складами та зовнішніми сервісами. Працює над імпортом і оновленням даних про товари, автоматизацією обслуговування каталогу, процесом оформлення замовлення та інструментами, що підтримують щоденну роботу власника магазину.
Його досвід також охоплює оновлення та міграції магазинів, діагностику помилок, аналіз продуктивності, а також налаштування серверів і сервісів, необхідних для роботи PrestaShop. Під час розв’язання проблем враховує залежності між модулями, темою, PHP, базою даних і налаштуваннями хостингу.
У блозі ділиться знаннями, що випливають із багаторічної програмістської практики та роботи з технічним бекендом магазинів. Посібники зосереджені на конкретних проблемах, способах їх перевірки та обмеженнях описаних рішень. Вони допомагають власникам магазинів і технічним спеціалістам підготувати зміни, оцінити їх обсяг і перевірити результат.
Коментарі (0)