Как и зачем использовать формат изображения WebP?

Вольный перевод статьи Ire Aderinokun «Why and how to use WebP images today»

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

Разница между WebP и JPG

Зачем нужен WebP?

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

ФункцииWebPPNGJPGGIF
Сжатие с потерями+++
Сжатие без потерь++++
Прозрачность+++
Анимация++

По степени сжатия формат WebP занимает первую позицию из представленных форматов. При сравнительном изучении этих форматов, компрессия с потерями у WebP была в среднем на 30% меньше, чем у JPG, а компрессия без потерь у WebP была в среднем на 25% меньше, чем у PNG.

Как конвертировать изображения в формат WebP?

Для преобразования JPG\PNG в WebP я использую эти инструменты.

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

  • Squoosh — онлайн-компрессор и конвертер (нужен VPN).
  • Online-Converter — онлайн-конвертер.

Графические редакторы

В Sketch ты можешь экспортировать любой элмент в формат WebP «из коробки» без плагинов.

конвертирование в webp в sketch

Насколько хорошо этот формат поддерживается сегодня?

На момент написания записи, WebP поддерживается в 72% браузеров, используемых во всем мире. Насколько бы хорошей эта цифра не казалась, используя формат WebP стоит позаботится о браузерах не поддерживающих формат WebP.

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

Выполнятся загрузка будет по очереди, сверху вниз. Начиная с тега <source>, как альтернативный источник тегу <img>. По этому, если не загрузится первый элемент, браузер попробует загрузить следующий.

Тег <source> принимает ряд атрибутов, с помощью которых можно определять, когда должно использоваться изображение.

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

Последний в контейнере тег <img> нужен для браузеров не понимающих тег <source>.

Оставить комментарий

avatar
  Подписаться  
Уведомление о
В сети
printerest icon
Behance icon
CodePen icon
GitHub icon
© Roman Volgasov, 2018