Что такое WebP: формат изображений Google, который ускоряет интернет

Что такое WebP простыми словами

WebP (читается «ве́б-пи») — это формат изображений, созданный Google специально для веба. Его задача предельно конкретная: показать ту же картинку, что и привычный JPEG или PNG, но в файле меньшего размера. А меньший файл — это быстрее загрузка страницы, экономнее трафик и выше позиция сайта в поиске. Расширение у таких файлов — .webp.

Главная фишка WebP в том, что он совмещает сильные стороны сразу трёх старых форматов. Он умеет сжимать фотографии с потерями, как JPEG; хранить графику и прозрачность без потерь, как PNG; и проигрывать анимацию, как GIF. По сути, это «три формата в одном» — и при этом почти всегда легче любого из них.

Кто и зачем создал WebP

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

В основу легла не пустая идея, а готовая технология. Незадолго до этого Google купил компанию On2 Technologies — разработчика видеокодеков. Из их кодека VP8 и выросло сжатие WebP: формат буквально использует те же приёмы, которыми видео сжимает отдельные кадры. Это ключевой момент, объясняющий, почему WebP такой компактный, — об этом ниже.

Два режима сжатия: с потерями и без

Главная сила WebP — он не привязан к одному способу сжатия, а умеет работать в двух режимах. Это как два инструмента в одном корпусе: какой нужен, такой и берёшь.

Сжатие с потерями построено на кодеке VP8. Оно работает так же, как JPEG: часть мельчайших деталей, которую глаз всё равно не заметит, отбрасывается ради меньшего размера. Только делает это WebP умнее — он предсказывает цвет соседних пикселей по уже обработанным, ровно как видеокодек предсказывает кадр по предыдущему. Это идеальный режим для фотографий.

Сжатие без потерь использует отдельный кодек VP8L. Здесь не теряется ни один пиксель: формат находит уже встречавшиеся фрагменты изображения и переиспользует их, вместо того чтобы хранить заново. Такой режим создан для логотипов, иконок, скриншотов, схем и любой графики с чёткими краями, где важна каждая точка.

Прозрачность и анимация в одном формате

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

Прозрачность. WebP поддерживает альфа-канал — то есть полупрозрачные пиксели и плавные тени, — причём в обоих режимах сжатия. Это важное преимущество: у PNG прозрачность есть, но он тяжёлый; у JPEG прозрачности нет вовсе. WebP даёт и то и другое — прозрачный фон в маленьком файле.

Анимация. WebP умеет хранить последовательность кадров, то есть работает как замена анимированному GIF. И здесь разница огромная: где старый GIF ограничен 256 цветами и весит несколько мегабайт, анимированный WebP показывает полноцветную картинку в разы меньшем файле. Именно поэтому многие сайты тихо перевели свои «гифки» на WebP.

Технически всё это держится на контейнере RIFF — простой структуре, внутри которой лежат данные кодека VP8 или VP8L плюс служебная информация: альфа-канал, кадры анимации, цветовой профиль. Максимальный размер одного изображения — внушительные 16383×16383 пикселя, так что в разрешении формат точно не ограничивает.

Насколько WebP меньше JPEG и PNG

Перейдём к самому интересному — к цифрам, ради которых формат и затевался. Это не маркетинговые обещания, а данные самого Google:

Что это значит на практике? Фотография, которая в JPEG весит 200 КБ, в WebP займёт около 130–150 КБ при том же качестве. Логотип на 100 КБ в PNG станет примерно 74 КБ в WebP без потерь. Когда таких картинок на странице десятки, экономия складывается в сотни килобайт и заметно ускоряет загрузку — особенно на мобильном интернете.

* Анимацию умеет только отдельный вариант APNG, а не обычный PNG.

Поддержка браузеров и совместимость

Долгое время главным минусом WebP была слабая поддержка: его понимал почти только Chrome. Сегодня эта проблема в прошлом. Формат открывают примерно 95–96% браузеров в мире.

• Chrome, Firefox, Edge, Opera — поддерживают WebP уже много лет, без всяких настроек.
• Safari — научился открывать WebP с версии 14 (осень 2020 года), то есть на актуальных iPhone, iPad и Mac формат работает.
• Internet Explorer — единственный заметный отказник, но этот браузер давно снят с поддержки и почти никем не используется.

Из-за этого WebP можно смело ставить на сайт. Есть лишь один нюанс, о котором стоит помнить.

Как открыть и конвертировать WebP

Хорошая новость: чтобы просто посмотреть файл .webp, ничего особенного не нужно. Перетащите его в окно любого современного браузера — Chrome, Firefox, Edge или Safari — и картинка откроется. Этого достаточно в большинстве случаев.

Сложности начинаются, когда WebP нужно отредактировать или загрузить в сервис, который его не понимает. Тогда формат стоит конвертировать в более привычный:

Нужен другой результат? Для фотографий удобнее WebP в JPG. А если вы делаете сайт и хотите перевести картинки на WebP ради скорости, пригодится обратное преобразование — PNG в WebP или JPG в WebP. Полный список доступен на странице всех форматов.