Как и зачем использовать формат изображения 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.

Интересное по теме…

Иконки файлов на CSS В профиле colorswall на гите появился репозиторий с иконками для веб-проектов выполненных на CSS. Как подключить? Подключите css-файл css-file-icons.css на страницу с HTML или установите через npm: npm i css-file-icons --save а затем подключите css командой build. Как использовать? Расширения файлов .fi....
Оформление «битых» изображений Битые изображения уродливы. Но с помощью CSS можно дополнить информацию, и сделать их более выразительными. Два факта о стилизации img-элемента Мы можем стилизовать типографику. Например, alt-атрибут (описание изображения).Мы можем изменить внешний вид поломанных изображений с помощью псевдоэлементов :before и :after. Они о...

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

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