WebP сегодня: зачем и как?

Vladyslav Yermolin
Dec 24, 2018 · 3 min read

Перевод «Why and how to use WebP images today» Ире Адеринокун.

WebP — формат графики, разработанный Google в 2010. Он был создан, как альтернатива PNG и JPG, и отличается от них гораздо меньшим размером при том же качестве изображения.

Интерфейс оптимизатора Squoosh.

Почему WebP?

Сравнение возможностей форматов WebP, PNG, JPG, GIF.

И даже со всеми этими возможностями, WebP обеспечивает меньший размер чем его конкуренты. В сравнительном исследовании формата было установлено, что изображения в формате WebP, сжатые с потерями, в среднем на 30% меньше, чем в формате JPG, а сжатые без потерь — в среднем на 25% меньше чем в формате PNG.

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

Онлайн-инструменты

  • Online-Convert.com — конвертация онлайн

Инструменты командной строки

# cwebp -q [quality] [input_file] -o [output_file]cwebp -q 75 image.png -o image.webp

Инструменты для Node.js

/* convert-to-webp.js */const imagemin = require("imagemin");
const webp = require("imagemin-webp");

imagemin(["*.png", "*.jpg"], "images", {
use: [
webp({ quality: 75})
]
});

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

node convert-to-webp.js

Sketch

Интерфейс экспорта графики в Sketch.

Что с поддержкой?

Поддержка WebP на Can I use.

Хотя всего этого вполне достаточно чтобы убедиться в преимуществах WebP, всё же не стоит просто полагаться на формат без фолбэка. В браузерах, которые не поддерживают WebP, картинки будут поломаны.

Мы можем сделать фолбэк для WebP используя элемент <picture>. Этот HTML5-элемент позволяет нам добавлять несколько форматов для одной картинки.

<picture>
<source type="image/webp" srcset="image.webp">
<source type="image/jpeg" srcset="image.jpg">
<img src="image.jpg" alt="Моя картинка">
</picture>

Для добавления альтернативных форматов, мы используем элемент <source> вместе с <picture>. У элемента <source> есть несколько атрибутов, которые мы можем использовать, чтобы определить изображение и когда оно будет использовано.

  • type для MIME-типа формата
  • srcset для пути к файлу изображения. Несколько файлов могут быть использованы для изображений разных размеров и плотности пикселей.
  • sizes для перечня размеров каждого файла.
  • mediaдля медиавыражения, которое определяет, какое изображение будет использовано.

Подробнее об этих атрибутах и адаптивных картинках читайте в статье Ире «Responsive Images — The srcset and sizes Attributes» — прим. редактора.

В дополнение к различным <source>, также нужно добавить обычный элемент<img>, как фолбэк для браузеров, которые не поддерживают множественные форматы и <picture>.

Перевод «Why and how to use WebP images today» Ире Адеринокун. Перевод Владислава Ермолина, редактура Вадима Макеева.

Web Standards

Сообщество разработчиков

Web Standards

Сообщество разработчиков

Vladyslav Yermolin

Written by

ex-seaman, front-end dev

Web Standards

Сообщество разработчиков

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store