WebP

Файл WebP побудований на базі контейнера RIFF, такого самого формату, як у WAV. Всередині цього контейнера статичне зображення можна закодувати двома способами. Lossy режим базується на кодеку VP8 intra-frame — тому самому відеокодеку, що використовується у відео WebM; він прогнозує блоки пікселів і зберігає стислий опис помилки, саме тому фотографічні файли так сильно зменшуються. Lossless режим прогнозує кожен піксель на основі його сусідів і зберігає різницю, що за принципом схоже на PNG, але з ширшим набором режимів прогнозування. Контейнер також може містити alpha channel для прозорості та послідовність animation frames, синхронізованих у мілісекундах, тож один файл може замінити GIF. Оскільки формат є єдиним контейнером, сервер може вибирати між lossy, lossless або анімованим вмістом з одного й того самого розширення .webp без зміни написання URL.

Проведіть аудит зображень на шаблонах, які забезпечують найбільшу частку вашого органічного трафіку, і надавайте версію WebP для будь-якого головного зображення (hero image), фото товару або статті, які передаються у форматах JPEG або PNG. Генеруйте файли в розмірах, які фактично потрібні вашому макету, а не в нативній роздільній здатності вихідного ресурсу, і зберігайте оригінальний майстер-файл у вашій DAM, щоб ви могли перекодувати його пізніше, якщо якість кодувальника покращиться. Використовуйте елемент picture або заголовок узгодження вмісту (content negotiation header), щоб браузери, які не можуть декодувати WebP, все одно отримували робочий запасний варіант. У Next/Image, wp_get_attachment_image або у конвеєрі обробки зображень вашого CDN встановіть WebP як пріоритетний формат виводу. Нарешті, оновіть ваші XML-карти сайту для зображень та схему image:secure_url, щоб пошукові системи могли знайти нові файли.

Відкрийте сторінку в Chrome, відкрийте DevTools, перейдіть на панель Network і відфільтруйте за Img. У колонці Type для наданих файлів відображається image/webp; у колонці Size — обсяг переданих байтів. Щоб переконатися, що використовувався енкодер, натисніть правою кнопкою миші на мініатюру, виберіть Open in new tab і перевірте URL або заголовки відповіді. З боку пошуку, звіти Core Web Vitals у Search Console та CrUX відображають показник Largest Contentful Paint та елементи LCP, пов'язані із зображеннями, які зменшений WebP-файл може прискорити. У Lighthouse аудит Serve images in next-gen formats перелічує кожне растрове зображення, яке не є WebP або AVIF. Журнали сканування, що фіксують Content-Type відповіді, також покажуть змішаність форматів на всьому сайті.

• Завантаження WebP-файлу, але використання посилання на нього через тег img із жорстко прописаним розширенням .jpg, через що браузер все одно завантажує оригінал.
• Відсутність резервного варіанту для старих версій Safari та Internet Explorer, які замість WebP мовчки відображають іконку битого зображення.
• Збереження WebP всередині існуючого контейнера JPEG, через що файл залишається з розширенням .jpg і неправильним заголовком Content-Type.
• Повторне кодування вже стиснутого (lossy) JPEG у стиснутий (lossy) WebP з очікуванням другого раунду значної економії пам'яті; видимі артефакти вже зафіксовані.
• Надання майстер-зображення розміром 4000px для слота 400px навіть у форматі WebP та використання формату як заміни адаптивного розміру.

WebP — це не єдиний формат наступного покоління, і для чисто фотографічного контенту AVIF зазвичай перемагає його за стисненням, хоча й ціною повільнішого кодування та слабшої підтримки в старих інструментах. WebP також часто плутають із WebM, який є відеоконтейнером на базі VP8 та VP9; вони мають спільні кодеки, але це різні файли для різних завдань. Формат підходить для скриншотів, фотографій товарів та іконок, але це не векторний формат, тому логотипи, для яких важливе нескінченне масштабування, все ще краще використовувати у форматі SVG. Lossless WebP, хоча він і менший за PNG, є більшим за свій lossy-подібник; перетворення кожного PNG на lossless WebP — це втрачена можливість для фотографічного контенту.

До: /uploads/2024/03/hero.jpg — 2,840,192 байт, віддається як image/jpeg, використовується у головному блоці 1200x630 та знову у сітці пов'язаних постів 200x105. Після: /uploads/2024/03/hero-1200.webp — 318,440 байт (lossy, q=75) для головного блоку, та /uploads/2024/03/hero-200.webp — 14,902 байт (lossy, q=70) для мініатюри, обидва віддаються як image/webp через CDN із резервним варіантом JPEG. HTML використовує елемент <picture>, тому браузер без підтримки WebP все одно отримає оригінальний JPEG. Показник Lighthouse Serve images in next-gen formats на сторінці падає до нуля, а час рендерингу елемента LCP зменшується приблизно на пів секунди на мобільному з'єднанні середнього рівня.

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

• Google — WebP documentation and reference implementation
• Google — Image best practices for SEO
• WebP
• Wikidata — Q62617958