Что такое WebP — стоит ли переводить картинки сайта на этот формат
Скачали картинку, а она в непонятном «.webp», и любимый редактор её не открывает? Или наоборот — оптимизируете сайт, и все руководства хором советуют «переведите изображения на WebP»? Разбираем, что это за формат, почему он захватил веб, насколько он действительно легче PNG и JPG — и в каких случаях гнаться за ним не стоит.
WebP — формат изображений от Google (2010), созданный специально для веба. Умеет всё сразу: сжатие с потерями (как JPG) и без потерь (как PNG), прозрачность и анимацию (как GIF). В среднем файлы на 25–35 % легче JPG и на ~26 % легче PNG при том же видимом качестве. Поддерживается всеми современными браузерами. Не подходит для: печати, векторных логотипов (там нужен SVG) и как формат‑исходник.
Откуда взялся WebP
К концу 2000-х веб жил на трёх форматах‑ветеранах: JPG (1992) для фото, PNG (1996) для графики с прозрачностью, GIF (1987) для анимации. Каждый решал одну задачу и тянул за собой ограничения своей эпохи. В 2010 году Google представил WebP — формат на базе видеокодека VP8, спроектированный под единственную цель: уменьшить трафик веба. Логика простая: изображения — самая тяжёлая часть страниц, а Google‑поиску и Chrome выгодно, чтобы веб грузился быстрее.
Что умеет WebP
Главная особенность формата — он объединяет возможности всех трёх ветеранов:
| Возможность | JPG | PNG | GIF | WebP |
|---|---|---|---|---|
| Сжатие с потерями | ✅ | ⛔ | ⛔ | ✅ |
| Сжатие без потерь | ⛔ | ✅ | ⛔ | ✅ |
| Прозрачность | ⛔ | ✅ | частично | ✅ |
| Анимация | ⛔ | ⛔ | ✅ | ✅ |
На практике это означает: фотографию можно сжать сильнее, чем в JPG, без видимой разницы; логотип с прозрачным фоном — легче, чем в PNG; анимацию — кратно легче, чем в GIF. Про базовую разницу подходов к сжатию мы подробно писали в статье PNG или JPG — что лучше.
Сколько реально экономит WebP
Официальные замеры Google: с потерями WebP на 25–34 % легче JPG сопоставимого качества, без потерь — на ~26 % легче PNG. Наш собственный опыт совпадает: превью PNG‑логотипов в каталоге Trace Logos отдаются в WebP и весят в среднем на 95–98 % меньше оригиналов — правда, тут работает ещё и уменьшение размеров под сетку карточек.
Сильнее всего WebP выигрывает на «фотографической» графике с прозрачностью — то, что раньше приходилось сохранять в тяжёлый PNG-24, потому что JPG не умеет прозрачность. Такие файлы худеют в разы. На маленьких простых картинках (иконки 16×16) разница почти незаметна.
Поддержка: можно ли уже не бояться
Да. С 2020 года WebP поддерживают все актуальные браузеры: Chrome, Safari (с macOS Big Sur / iOS 14), Firefox, Edge, Opera и Яндекс Браузер. Проблемы остались за пределами браузеров:
- Старые редакторы и просмотрщики могут не открывать WebP (лечится обновлением или конвертацией).
- Некоторые соцсети и мессенджеры при загрузке конвертируют WebP сами или не принимают его.
- Печать и полиграфия — типографиям нужен TIFF/PDF/PNG, WebP там не формат.
Если файл не открывается — конвертируйте обратно: любой онлайн‑конвертер, macOS Просмотр («Экспортировать как…») или даже вставка в Figma с последующим экспортом в PNG решают задачу за минуту.
Как перевести картинки в WebP
- Онлайн: Squoosh (проект Google — с наглядным сравнением «до/после» и ползунком качества), Convertio и десятки аналогов.
- Командная строка: официальная утилита
cwebp input.png -q 80 -o output.webp— качество 75–85 закрывает большинство задач. - Автоматически на сайте: сборщики и CDN (Vercel, Cloudflare, ImageKit) конвертируют картинки в WebP на лету и отдают браузеру лучший поддерживаемый формат — самый правильный путь для больших сайтов.
- Экспорт из редакторов: Photoshop (начиная с версии 23.2) и Figma экспортируют в WebP напрямую.
В HTML классический паттерн постепенного внедрения — тег <picture>: браузер сам выберет WebP, а старый клиент получит PNG‑запасной вариант. Подробнее о вставке графики — в статье как вставить SVG на сайт.
Когда WebP не нужен
- Векторные логотипы и иконки. WebP — растровый формат. Логотип в нём поплывёт при масштабировании; правильный выбор — SVG (разбор — в статье SVG или PNG для логотипа).
- Исходники. Храните оригиналы в PNG/TIFF или векторе, а WebP генерируйте как производный формат для отдачи. Пережатие «с потерями поверх потерь» деградирует картинку.
- Печать. Типографии WebP не ждут.
- Когда уже есть AVIF. Более новый формат AVIF сжимает ещё сильнее WebP (в среднем на 20–30 %), но медленнее кодируется. Для максимальной оптимизации современный стек — AVIF + WebP‑фолбэк; для простоты — просто WebP.
Как это устроено у нас
Каталог Trace Logos использует ровно описанную схему: исходники логотипов хранятся в SVG и полноразмерных PNG, а для сетки карточек автоматически генерируются лёгкие WebP‑превью. Открывая каталог, вы грузите мегабайты вместо десятков мегабайт — а скачивая логотип, получаете полноценный исходник в нужном формате.