WebP — это графический формат от Google, который кодирует изображения плотнее, чем JPEG и PNG, при сопоставимом визуальном качестве. Что это значит на практике: одна и та же картинка в вебпи весит меньше, а значит страница отдаётся быстрее. Формат поддерживает и сжатие с потерями, и без потерь, а ещё прозрачность (альфа-канал) и анимацию — то есть закрывает задачи, которые раньше делили между собой JPEG, PNG и GIF.
Вес изображений напрямую влияет на LCP — метрику из Core Web Vitals, отвечающую за скорость появления главного контента. Картинки часто оказываются самым тяжёлым элементом страницы, поэтому перевод их в этот формат разгружает загрузку. Проверить выигрыш можно в PageSpeed Insights: он прямо подсказывает заменить устаревшие форматы на современные.
§ 01Зачем нужен формат
Скорость мобильной загрузки упирается в вес медиа, и формат изображений от Google решает именно эту задачу. Он даёт три сценария в одном контейнере: сжатие с потерями для фотографий, сжатие без потерь для графики с чёткими линиями и прозрачность вместо PNG. Анимация тоже поддерживается — картинки webp заменяют тяжёлые GIF. Для чего нужно: чем легче страница, тем ниже LCP и меньше расход трафика у пользователя на мобильном интернете.
§ 02Как настраивается
Перевод в этот тип файлов делается на уровне сборки или сервера. Варианты:
- плагины CMS, которые генерируют версии автоматически;
- утилита
cwebpдля ручной конвертации; - модули
mod_pagespeedили обработка на CDN.
В разметке правильнее отдавать формат через тег <picture> с несколькими <source> — браузер сам выберет вебп, а при отсутствии поддержки возьмёт JPEG. Так фолбэк не ломает вёрстку.
LCP 4.2 → 2.1 c — Интернет-магазин мебели на Magento 2 сжал hero-изображение из 820kb в 145kb через WebP и preload. LCP упал с 4.2 до 2.1 с за 6 недель. Замер через PSI и CrUX-75th, конверсия выросла на 11%.
вес страницы −38% — Медиапортал об образовании на WordPress перевёл 1200 иллюстраций в WebP через плагин ShortPixel. Суммарный вес страниц снизился на 38%, отказы упали на 9% за 3 месяца. Динамика по GA4 и Search Console.
§ 03Как проверить, что работает
Открой DevTools в Chrome, вкладка Network, и посмотри столбец Type у изображений — там должно стоять webp. Второй способ — PageSpeed Insights: если формат внедрён, из отчёта пропадает рекомендация про современные форматы картинок. Дополнительно вес страницы виден в поле Transferred той же вкладки Network. Замер до и после конвертации показывает разницу в килобайтах напрямую.
§ 04Подводные камни
Старые браузеры и часть почтовых клиентов формат не читают, поэтому фолбэк на JPEG обязателен — без него часть аудитории увидит битые картинки. Для мелкой иконки выигрыш в весе бывает нулевым, а иногда файл получается даже тяжелее исходного PNG. Отличается от AVIF: тот сжимает ещё плотнее, но поддержка у него уже. Перед массовой конвертацией сравни размеры на своих же изображениях, а не полагайся на общее правило.