Мой дэйли дайджест

одно техническое понятие в день

WebP

26 июня 2026 · ~11 мин чтения

формат-данных изображения веб оптимизация google

WebP

WebP — это формат изображений от Google (2010), который сжимает картинки заметно сильнее JPEG и PNG при сопоставимом качестве. Один файл умеет и фото с потерями, и иконку без потерь, и прозрачность, и анимацию.

История

История WebP начинается не с картинок, а с видео. В 2010 году Google купил
компанию On2 Technologies и получил видеокодек VP8. Кодек был свободный,
без патентных платежей — Google специально планировал противопоставить его
платному H.264, который душил Web-видео лицензионными отчислениями.

Инженеры быстро заметили: видео — это последовательность кадров, а каждый
кадр — по сути картинка. Если взять один кадр VP8 и сохранить как
самостоятельный файл, получится изображение, которое сжимается лучше JPEG.
Так в сентябре 2010 года появился WebP — формат, который заворачивает
ключевой кадр VP8 в контейнер RIFF (тот же контейнер, что и у WAV-аудио).

Вехи развития:

Формат разрабатывала команда WebM Project внутри Google. Спецификация
открытая, лицензия BSD. Это важно — никто не может прийти и потребовать
денег за использование, как это было с GIF (Unisys, патент на LZW) или
с H.264.

Что это такое

WebP — это контейнер с двумя совершенно разными движками сжатия внутри.

Lossy WebP (с потерями) использует ключевые кадры VP8. Алгоритм
разбивает картинку на блоки 4×4 пикселя, предсказывает каждый блок по
соседним (внутрикадровое предсказание — то же, что в видеокодеках), а
разницу между предсказанием и реальностью сжимает арифметическим
кодированием. В среднем lossy WebP даёт файлы на 25–35% меньше JPEG
при том же визуальном качестве. На сложных сценах (трава, листва, шум)
выигрыш меньше, на плоских (логотипы, скриншоты UI) — больше.

Lossless WebP (без потерь) — это вообще отдельный алгоритм. Он
комбинирует несколько техник: предсказание соседних пикселей, цветовую
трансформацию (отдельно сохраняется яркость и хроматика), словарное
сжатие (повторяющиеся блоки кодируются один раз) и кодирование Хаффмана.
В среднем lossless WebP меньше PNG на 25%.

Контейнер RIFF («чанковый» формат) позволяет складывать в один файл
несколько вещей: само изображение, ICC-профиль цвета, EXIF-метаданные,
кадры анимации, alpha-канал отдельно. Браузер при чтении просто берёт
нужные чанки, остальные пропускает.

WebP vs JPEG. JPEG — формат 1992 года, только lossy, без
прозрачности, без анимации. WebP меньше по размеру, умеет прозрачность,
умеет анимацию.

WebP vs PNG. PNG — без потерь, с прозрачностью, без анимации
(анимированный PNG — APNG — есть, но поддержка хуже). WebP в lossless
меньше PNG, и плюс умеет анимацию.

WebP vs GIF. GIF — 256 цветов, страшное качество, гигантские
файлы. Любая анимированная картинка в WebP будет в 2–10 раз меньше,
при этом 24-битный цвет и плавность.

Аналогии из жизни

Вакуумная упаковка для одежды в путешествии.
Берёшь свитер, кладёшь в специальный пакет, выдавливаешь воздух — и
свитер занимает в чемодане в три раза меньше места. Содержимое то же,
выглядит так же, когда достанешь, — просто компактнее. WebP делает
то же с картинкой: ту же информацию упаковывает плотнее.

Где ломается: свитер можно вернуть к исходному виду полностью. Lossy
WebP — нельзя. Если ты пережал картинку в WebP с низким качеством,
вернуть исходные пиксели уже невозможно — часть деталей выбросили
насовсем, как ножницами. Lossless WebP в этом смысле ближе к
вакуумному пакету: можно «надуть обратно» без потерь.

Сухое концентрированное молоко вместо обычного.
Везти из магазина литр молока тяжело и громоздко. А пакетик сухого
молока на тот же литр весит 100 грамм и помещается в карман. Восстановишь
водой — получишь молоко. WebP — это сухое молоко картинок: лёгкий
файл-«концентрат», который браузер на месте «разводит» в полноразмерное
изображение.

Где ломается: сухое молоко по вкусу отличается от свежего, и
дегустатор это поймёт. Lossy WebP при сильном сжатии даёт характерные
артефакты — размытые «пятна» на коже, лёгкое блочное искажение на
границах. Глаз обычного пользователя не заметит, фотограф или
дизайнер — заметит сразу.

Стенограмма вместо аудиозаписи лекции.
Часовая лекция в MP3 — 50 мегабайт. Стенограмма того же содержания —
100 килобайт. Тысячная разница. Получишь почти всё — текст, мысли,
структуру. WebP похож: выбрасывает то, что человеческий глаз всё
равно не различит (тонкие переходы цвета, мелкий шум), оставляет
то, что воспринимается как «та же картинка».

Где ломается: в стенограмме нет интонации, пауз, эмоций — а они
могут быть важны (на лекции по актёрскому мастерству, например).
Так и WebP теряет тонкие нюансы, которые иногда критичны — например,
плавные градиенты в художественной фотографии могут пойти
ступеньками (это называется banding, полошение).

Как это работает

Допустим, у тебя есть JPEG-фото 4000×3000 пикселей, весом 3.2 МБ.
Ты конвертируешь его в WebP с качеством 80 (типичная настройка для веба).
Что происходит:

Шаг 1. Цветовое пространство. Картинка из RGB переводится в YUV —
это значит, что вместо «красный/зелёный/синий» каждый пиксель описывается
как «яркость + два цветовых компонента». Глаз сильно чувствителен к
яркости, к цвету — слабо. Поэтому цветовые компоненты можно ужать в
2 или 4 раза без видимой потери (chroma subsampling, прореживание
цветности).

Шаг 2. Разбиение на блоки. Картинка делится на блоки 16×16
пикселей (macroblock, макроблок), каждый — на 4×4 (subblock,
субблок). Это унаследовано из VP8: видеокодек так работает с каждым
кадром.

Шаг 3. Внутрикадровое предсказание (intra prediction). Для
каждого блока кодер пытается предсказать его содержимое по уже
обработанным соседям сверху и слева. Например, если левый сосед —
ровный синий, а верхний — тоже синий, скорее всего и текущий блок
синий. Записывается не сам блок, а разница между предсказанием
и реальностью. Эта разница часто близка к нулю, а нули сжимаются
очень хорошо.

Шаг 4. Дискретное косинусное преобразование (DCT). Разность
прогоняется через математическое преобразование, которое выделяет
«важные» частоты — крупные структуры (стены, объекты) и «не важные»
— мелкий шум. Высокочастотный шум потом квантуется (округляется)
сильнее. Это и есть «потеря» в lossy.

Шаг 5. Арифметическое кодирование. Финальный поток битов
сжимается арифметическим кодером — статистическим алгоритмом, который
выдаёт меньше битов для часто встречающихся значений и больше — для
редких. JPEG использует более старый и слабый Хаффман, поэтому
проигрывает.

Шаг 6. Упаковка в RIFF. Полученные битовые потоки сворачиваются
в чанки контейнера. К ним добавляются заголовок (RIFF....WEBP),
информация о размере, цветовом профиле и метаданные.

На выходе — файл примерно 1.1 МБ. Те же 4000×3000, визуально та же
картинка, но в три раза меньше JPEG.

При показе в браузере работает обратный процесс: парсинг чанков,
арифметическое раскодирование, обратный DCT, обратное предсказание,
обратная цветовая трансформация. Современные процессоры делают это
на лету за миллисекунды.

Где встречается в обычной жизни

Где встречается в IT и бизнесе

Кто пользуется

Альтернативы и конкуренты

Когда НЕ стоит использовать

Связанные понятия

Литература и источники

Где встретилось у меня

Вчера работал над лендингом квартала недвижимости — там много больших
фоновых фотографий и галерея. В коде везде встречались ссылки на
.webp файлы как полноэкранные «героические» картинки и
фото-разделители между секциями. Это типичный кейс: на лендинге
девелопера красивая визуализация важнее всего, а WebP позволяет
сделать так, чтобы эта красота открывалась на телефоне быстро.

Краткое резюме