Формат изображения WebP

WebP - это формат изображений с открытым исходным кодом, разработанный в Google, который обещает создавать изображения меньшего размера по сравнению с форматами JPG и PNG, при этом создавая более привлекательные изображения.

Вступление

WebP - это формат изображений с открытым исходным кодом, разработанный в Google, который обещает создавать изображения меньшего размера по сравнению с форматами JPG и PNG, создавая при этом более привлекательные изображения.

WebP поддерживаетпрозрачность, например, изображения PNG и GIF.

WebP поддерживаетанимации, как изображения в формате GIF

Кроме того, с помощью WebP вы можете установить соотношение качества ваших изображений, поэтому вы решаете, хотите ли вы получить лучшее качество или меньший размер (как это происходит с изображениями JPG).

ТакWebP может делать все изображения в форматах GIF, JPG и PNG., в едином формате и сгенерируйтеизображения меньшего размера. Похоже на сделку.

Если вы хотите сравнить, как выглядят изображения в различных форматах,вот отличная галерея от Google.

WebP неновый, он существует уже несколько лет.

Насколько меньше?

Предпосылка создания изображений меньшего размера очень интересна, особенно если учесть, что большая часть размера веб-страницы определяется количеством и размером ресурсов изображения, которые пользователь должен загрузить.

Google опубликовалСравнительное исследованиепо результатам 1 миллиона изображений с таким результатом:

WebP в целом обеспечивает более высокое сжатие, чем JPEG или JPEG 2000. Преимущества минимизации размера файла особенно высоки для изображений меньшего размера, которые являются наиболее распространенными в Интернете.

Вам следует поэкспериментировать с изображениями, которые вы собираетесь показывать, и на основе этого сформировать свое мнение.

В моих тестах сжатие без потерь по сравнению с PNG создает изображения WebP на 50% меньше. PNG достигает такого размера файла только при использовании сжатия с потерями.

Создание изображений WebP

Все современные графические инструменты и инструменты редактирования изображений позволяют экспортировать в.webpфайлы.

Также существуют инструменты командной строки для прямого преобразования изображений в WebP. Googleпредоставляет набор инструментовза это.

cwebpэто основная утилита командной строки для преобразования любого изображения в.webp, используйте это с

cwebp image.png -o image.webp

Проверьте все варианты, используяcwebp -longhelp.

Поддержка браузеров

WebP в настоящее время поддерживается

Хром
Опера
опера мини
UC Browser
Интернет Samsung

Однако только Chrome для ПК и Opera 19+ реализуют все функции WebP, а именно:

сжатие с потерями
сжатие без потерь
прозрачность
анимация

Другие браузеры реализуют только подмножество. Safari и IE вообще не поддерживают WebP, и нет никаких признаков того, что WebP будет реализован в ближайшее время в этих браузерах.

Но Firefox поддерживает WebP с версии 65 (январь 2019 г.) и Edge с версии 18.

Так что, если мы сможем предоставить этим пользователям оптимизированное изображение, чтобы ускорить их обслуживание и потреблять меньше трафика, это прекрасно. Но проверьте, действительно ли он уменьшает размер ваших изображений.

Сверьтесь с результатами инструментов оптимизации изображений JPG / PNG и посмотрите, полезно ли добавление дополнительного уровня сложности, вносимого WebP.

Как вы можете использовать WebP сегодня?

Есть несколько способов сделать это.

Вы можете использовать механизм уровня сервера, который обслуживает изображения WebP вместо JPG и PNG, когдаHTTP_ACCEPTзаголовок запроса содержитimage/webp.

Первый наиболее удобен, поскольку полностью прозрачен для вас и ваших веб-страниц.

Другой вариант - использовать Modernizr и проверитьModernizr.webpпараметр.

Если вам не нужна поддержка Internet Explorer, очень удобно использовать<picture>тег, который сейчасподдержанныйвсеми основными браузерами, кроме Opera Mini и IE (все версии).

В<picture>обычно используется для адаптивных изображений, но мы можем использовать его и для WebP, так какэто руководство от HTML5 Rocksобъясняет.

Вы можете указать список изображений, и они будут использоваться по порядку, поэтому в следующем примере браузеры, поддерживающие WebP, будут использовать первое изображение и вернуться к JPG, если нет:

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>