WebP: формат, который ускоряет сайт вдвое почти без потерь
WebP — формат изображений, разработанный Google. При том же визуальном качестве файл весит на 25–35% меньше JPEG, а по сравнению с PNG выигрыш бывает и вдвое.
Для сайта это прямая экономия: картинки — обычно самая тяжёлая часть страницы, и именно они определяют, за сколько секунд человек увидит первый экран.
Сравнение форматов
| WebP | JPEG | PNG | AVIF | |
|---|---|---|---|---|
| Вес при равном качестве | низкий | средний | высокий | самый низкий |
| Прозрачность | да | нет | да | да |
| Анимация | да | нет | нет | да |
| Сжатие без потерь | да | нет | да | да |
| Поддержка браузерами | практически везде | везде | везде | хорошая, но не полная |
| Скорость кодирования | средняя | высокая | высокая | низкая |
WebP умеет то, ради чего раньше держали два формата: сжатие с потерями как у JPEG и прозрачность как у PNG. Это его главное практическое преимущество.
AVIF сжимает ещё сильнее, но кодируется заметно медленнее и поддерживается чуть хуже. Разумная схема на сегодня — AVIF первым вариантом, WebP вторым, JPEG запасным.
Как подключить правильно
Не заменять картинки вслепую, а отдавать WebP тем, кто его понимает, с запасным вариантом для остальных. Делается тегом picture:
<picture> <source srcset="foto.webp" type="image/webp"> <img src="foto.jpg" alt="описание" width="800" height="600"> </picture>
Браузер сам берёт первый формат, который умеет читать. Атрибуты width и height обязательны — без них вёрстка прыгает при загрузке, а это портит показатель CLS.
Второй путь — отдавать WebP на уровне сервера по заголовку Accept, тогда правки в шаблоне не нужны. Большинство современных CMS и CDN умеют это из коробки.
Влияние на поиск
Прямого фактора «используется WebP» нет ни у одной поисковой системы. Влияние идёт через скорость:
- LCP — время отрисовки главного элемента экрана. Чаще всего этот элемент и есть картинка. Норма для Google — до 2,5 секунды.
- CLS — смещение вёрстки. Лечится указанием размеров, а не форматом.
- Поведение людей. Медленная страница на мобильном интернете просто закрывается.
Замерять надо по реальным посетителям в Search Console, а не в синтетическом тесте. Разбор всех трёх показателей — на странице продвижение в Google.
Что ещё сделать вместе с конвертацией
Смена формата сама по себе даёт меньше, чем кажется, если остальное не приведено в порядок:
- Не грузить картинку больше, чем нужно. Фотография 4000 пикселей шириной, ужатая стилями до 400, — самая частая и самая дорогая ошибка. Никакой формат этого не компенсирует.
- Отложенная загрузка для всего, что ниже первого экрана:
loading="lazy". - Разные размеры под разные экраны через
srcset. - Первые изображения экрана грузить сразу, без lazy, иначе LCP только ухудшится.
- Alt у каждой картинки — и для поиска по картинкам, и для доступности.
Где WebP не нужен
Для логотипов, иконок и схем. Там место векторному SVG: он масштабируется без потерь и весит меньше любого растра.
Когда файл отдают на скачивание. Клиент, которому нужна фотография для печати, ждёт JPEG или TIFF. WebP он откроет не во всякой программе.
При сложной анимации. Видео в формате MP4 почти всегда легче анимированного WebP.
Когда картинок мало и они лёгкие. Если страница весит полмегабайта, экономия ста килобайт не изменит ничего. Начинать надо с замера, а не с конвертации.
Коротко
- WebP весит на 25–35% меньше JPEG при том же качестве и умеет прозрачность и анимацию.
- Поддерживается практически всеми браузерами, но запасной вариант через picture всё равно нужен.
- Прямого фактора ранжирования нет — влияние идёт через скорость и LCP.
- Указывать width и height обязательно, иначе вёрстка прыгает и портится CLS.
- Картинка, загруженная в большем размере, чем показывается, сводит выигрыш формата к нулю.
- Для логотипов и иконок правильный выбор — SVG, а не WebP.
Ускоряем сайты и приводим Core Web Vitals в норму — техническое обслуживание сайтов.