WebP: что это за формат и когда он лучше JPG

Страница с каталогом товаров медленно открывается на мобильном интернете, хотя текста на ней немного. Двадцать фотографий по 300 КБ — это 6 мегабайт, и почти весь вес страницы дают именно картинки. Дизайнер присылает «оптимизированные для веба» файлы, а они всё равно весят по два мегабайта, потому что сохранены в JPG с качеством 100. Тогда и появляется вопрос про форматы: WebP обещает ту же самую картинку при меньшем весе. Разберёмся, что это за формат, откуда он взялся, когда он действительно лучше JPG, а когда лучше ничего не трогать.

Что такое WebP и откуда он взялся

WebP — растровый формат изображений, который разработала компания Google и представила 30 сентября 2010 года. Замысел был сразу широкий: заменить на вебе сразу три формата — JPEG для фотографий, PNG для графики с прозрачностью и GIF для анимации. Внутри лежит кодек VP8, тот же самый, что используется в видео WebM, поэтому многое в нём знакомо тем, кто уже сталкивался с видеокодеком на вебе. Файл WebP упакован в контейнер RIFF: первые четыре байта читаются как «RIFF», на позиции с 8-й по 11-ю лежит идентификатор «WEBP», дальше идёт блок с данными. Внутри этого блока может находиться VP8 для сжатия с потерями, VP8L для сжатия без потерь или расширенный блок VP8X, если в файле есть анимация и прозрачность. Рядом с картинкой могут идти дополнительные блоки с цветовым профилем ICC, данными EXIF и метаданными XMP.

• разработан Google, первый выпуск состоялся 30 сентября 2010 года;
• сжатие с потерями построено на кодеке VP8, вариант без потерь называется VP8L;
• режим без потерь объявлен 18 ноября 2011 года и включён по умолчанию в libwebp 0.2.0 с 16 августа 2012 года;
• анимация появилась в расширенном формате 3 октября 2011 года;
• файл лежит в контейнере RIFF и может дополнительно нести профиль ICC, EXIF и XMP;

Два режима сжатия: lossy и lossless

Lossy, то есть сжатие с потерями, работает так же, как любой JPEG: часть информации выбрасывается осознанно, глаз этого не замечает, а файл получается заметно меньше. Именно этот режим используют для фотографий. Lossless, то есть сжатие без потерь, пережимает картинку, не потеряв ни одного пикселя: на выходе изображение совпадает с исходным до мельчайших деталей. По аналогии с PNG это понятнее: PNG тоже сжимает без потерь, но WebP делает это лучше, и Google заявляет о 26 процентах меньшем размере, чем у PNG.

• фотография — lossy: размер важнее пиксельной точности, а разница на экране незаметна;
• логотип, иконка, схема с текстом — lossless: каждая линия должна остаться резкой, и PNG-файлы в таких задачах обычно ещё и прозрачные;
• анимация — WebP в расширенном формате, она заметно легче GIF при том же количестве кадров;
• скриншот интерфейса — спорный случай: мелкий текст лучше сжимается без потерь, но если скриншот фотографически насыщенный, выигрывает WebP;

Фотография 4 МБ в JPG по заявлению Google сжимается в WebP примерно на 30 % меньше:
   4 МБ × 0,7 = 2,8 МБ

Прозрачная картинка 1,2 МБ в PNG в варианте lossless:
   1,2 МБ × 0,74 = 0,89 МБ   (на 26 % меньше, по данным Google)

Галерея из 20 фотографий:
   JPG:  20 × 4 МБ = 80 МБ
   WebP: 20 × 2,8 МБ = 56 МБ
   разница: 24 МБ на одной странице

Что даёт WebP на практике

Главный аргумент — вес. По данным Google, WebP в среднем даёт примерно на 30 процентов более сильное сжатие, чем JPEG, без заметной потери качества, а вариант без потерь оказывается примерно на 26 процентов меньше PNG. Для анимации цифры ещё заметнее: по той же статистике переведённая из GIF анимация в WebP с потерями весит на 64 процента меньше, а без потерь — на 19 процентов меньше. Второй эффект — скорость. Меньший файл означает меньше трафика и более быстрое открытие страницы, а это напрямую сказывается на метриках Core Web Vitals и на поведении посетителей. По исследованию Google, 53 процента мобильных посещений прекращается, если страница грузится дольше трёх секунд.

• Chrome на компьютере поддерживает WebP с 17-й версии, вариант без потерь и с прозрачностью — с 23-й, анимацию — с 32-й;
• Firefox — с 65-й версии, Edge — с 18-й, Opera — с 19-й для анимации;
• Safari поддерживает WebP с 14-й версии, то есть с сентября 2020 года, до этого Safari оставался последним браузером без поддержки;
• в Windows картинки WebP открывает приложение «Фотографии», а для Проводника существует отдельное расширение WebP Image Extensions из Microsoft Store;

JPEG, PNG, WebP и AVIF: что выбрать

• JPEG — сжатие с потерями, без прозрачности и без анимации: поддерживается везде, но пережимать JPEG в JPEG нельзя, качество падает поколениями;
• PNG — сжатие без потерь, прозрачность есть, анимации нет: правильный выбор для скриншотов, логотипов и схем, на фотографиях файлы получаются неоправданно большими;
• WebP — сжатие и с потерями, и без потерь, прозрачность и анимация в одном формате: поддержка есть во всех современных браузерах;
• AVIF — сжатие с потерями на базе видеокодекса AV1, прозрачность и анимация есть, качество при том же размере выше, но поддержка пока не везде: Chrome с 85-й версии, Firefox с 93-й, Edge с 121-й, Safari частично с 16.1 и полностью с 16.4;

WebP или AVIF: что выбрать сегодня

Ориентир простой. Если нужна широкая совместимость прямо сейчас, WebP безопаснее: он поддерживается всеми актуальными браузерами с 2020 года. AVIF даёт файл меньше, но в Safari полноценная поддержка появилась только в версии 16.4, а часть устройств на Android до сих пор отстаёт. Разумная схема на будущее — отдавать AVIF первым, WebP вторым, а JPG последним, и тогда старые браузеры получат картинку в любом случае.

Нужен ли WebP Яндексу и Google

Про Google ответ задокументирован прямо: в перечне форматов, которые поиск умеет индексировать вместе с картинками, указаны BMP, GIF, JPEG, PNG, WebP, SVG и AVIF. То есть картинка в WebP индексируется и попадает в поиск по картинкам наравне с JPG. С Яндексом ситуация менее определённая: официального списка поддерживаемых форматов у него нет, а в профильных обсуждениях регулярно встречаются жалобы на то, что WebP-картинки не отдаются в выдаче по картинкам. Практический вывод: если картинки приводят трафик, не выбрасывайте JPG, а отдавайте оба формата, о чём пойдёт речь ниже.

• для индексации в Google формат WebP подходит, отдельных ограничений нет;
• в Яндексе полагаться только на WebP рискованно, особенно если картинки дают заметную долю трафика;
• атрибут alt и имя файла работают одинаково для любого формата и на индексацию не влияют;
• для Google Images важнее, чтобы картинка открывалась по обычному URL и была доступна роботу без JavaScript;

Как отдать WebP и JPG одновременно: picture и type

Правильный способ — не выбирать формат вручную, а отдать браузеру оба варианта и дать ему решить самому. Это делает элемент picture: сначала идут элементы source с атрибутом type, а в конце обычный img как запасной вариант. Браузер читает список сверху вниз и берёт первый source, тип которого он понимает. Если поддержки WebP нет, он пропустит этот source и дойдёт до img. Если поддержка есть, img будет проигнорирован целиком, и в сеть уйдёт только один файл.

<picture>
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Название товара" width="1200" height="630">
</picture>

Что происходит в браузере:
Chrome, Firefox, Edge, Safari 14+  → первый source, файл .webp
старый Safari, Internet Explorer     → img, файл .jpg
бот, который не понимает picture     → img, файл .jpg

Атрибут type обязателен. Без него браузер
попробует загрузить .webp и покажет битую картинку.

Для retina-экранов добавляют srcset с двумя
вариантами ширины, иначе картинка мылится:

<source srcset="/img/hero-800.webp 800w,
                /img/hero-1600.webp 1600w"
        type="image/webp" sizes="(max-width: 600px) 100vw, 600px">

Типичные ошибки при переводе сайта на WebP

• перевели файлы на WebP, но в HTML и CSS остались старые ссылки на .jpg: браузер продолжает качать тяжёлый JPG, а часть картинок на CDN отдаётся по прежним адресам — проверьте, что пути переключены везде, включая темы и встроенные стили;
• потеряли EXIF: при перекодировании через canvas данные EXIF не переносятся, поэтому ориентация из файла и GPS-координаты пропадают, и ориентацию приходится применять заранее;
• пережали фотографию несколько раз подряд: каждое пережатие с потерями наследует огрехи предыдущего, качество падает, а файл всё равно остаётся тяжёлым;
• поставили качество 100 и удивились размеру: параметр качества в WebP работает так же, как в JPEG, и значения 90–82 для фотографий обычно дают лучший баланс;
• потеряли прозрачность при переводе в JPG: альфа-канала в JPEG не существует, прозрачные места заливаются цветом подложки, и на белом фоне появляется прямоугольник;
• забыли про размеры: без атрибутов width и height браузер не резервирует место под картинку, и страница прыгает при загрузке, что плохо и для скорости, и для поведенческих метрик;

Как правильно пережать фото перед публикацией

1. возьмите оригинал, а не уже сжатый JPG из мессенджера: каждое промежуточное сжатие отнимает качество;
2. приведите размер к тому, что реально нужно на странице: для галереи хватает ширины 1200–1600 пикселей, а не четырёх тысяч;
3. выберите режим по типу картинки: фотографии — lossy, логотипы и схемы — lossless;
4. подберите качество: для фотографий начните с 82 и сравните результат с оригиналом рядом, а не на глаз;
5. проверьте прозрачность, если она была: в JPG она исчезнет;
6. сохраните рядом JPG-версию для тех, кому она ещё нужна, и отдавайте обе через picture.

Всё это можно сделать прямо в браузере, без установки программ. Конвертер WebP в JPG читает файл, определяет его настоящий формат по первым байтам и отдаёт JPG, PNG или WebP с настраиваемым качеством; прозрачные места при сохранении в JPG заливаются выбранным цветом, так что результат можно сразу положить в вёрстку. Размеры удобно задать в изменении размера изображения, пропорции под обрезку — через калькулятор соотношения сторон и инструмент обрезки, а если картинку нужно встроить прямо в разметку или CSS, пригодится картинка в Base64.

Частые вопросы

Чем WebP лучше JPG?

Главным образом весом: по заявлению Google, тот же кадр в WebP занимает примерно на 30 процентов меньше места, чем в JPEG, при визуально неотличимом качестве. Дальше идут удобства: в одном формате есть и прозрачность, и анимация, и сжатие без потерь, поэтому JPG, PNG и GIF можно заменить одним файлом. Обратная сторона тоже есть: перекодировать JPG в JPG нельзя без потерь, а вот JPG в WebP — можно, и это нормальный путь для сайта.

Почему Windows не открывает WebP?

Сама операционная система файл понимает, но Проводник по умолчанию показывает для него значок-заглушку. Приложение «Фотографии» в Windows открывает WebP без проблем, а чтобы картинки отображались в самом Проводнике, ставится бесплатное расширение WebP Image Extensions из Microsoft Store, выпущенное для Windows 10 и 11. В браузере на той же системе никаких расширений не нужно, там всё работает из коробки.

WebP или AVIF: что выбрать?

Если приоритет — совместимость, берут WebP: он работает во всех актуальных браузерах с 2020 года. Если приоритет — минимальный вес при готовности к условной поддержке, стоит смотреть на AVIF, но тогда нужна схема с тремя форматами. Компромисс, который чаще всего и оказывается лучшим: отдавать AVIF первым, WebP вторым, JPG последним, и не пытаться обойтись одним форматом.

Нужно ли конвертировать фото для сайта?

Обычно да, если файлы приходят из фотокамеры или из графического редактора с качеством 100: такие снимки весят в несколько раз больше, чем нужно на экране. Если же фотографии уже пережаты для веба один раз и лежат рядом с готовой вёрсткой, конвертация даст заметный выигрыш только там, где счёт идёт на десятки картинок. Для главной картинки страницы разница в сотни килобайт обычно уже ничего не решает.

Можно ли сделать WebP из PNG?

Да, и для графики с прозрачностью это обычно лучший путь: вариант без потерь даёт примерно на 26 процентов меньший файл, чем PNG, сохраняя прозрачность и резкие края. Переводить в JPG при этом не стоит, потому что JPG прозрачность просто не умеет. Важно помнить, что результат считается исходным PNG, а не оригиналом до первой компрессии, поэтому сильно сжатый PNG в WebP без потерь не превратится в картинку лучше исходной.

Как пережать фото, чтобы не было видно потерь?

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