Для чего и как использовать сегодня изображения WebP

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

Для чего и как использовать сегодня изображения WebP

Для чего использовать WebP?

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

Для чего и как использовать сегодня изображения WebP

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

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

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

Squoosh — онлайн сжатие и преобразование изображений

Online-Convert.com — онлайн преобразование изображений

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

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

JavaScript
# cwebp -q [quality] [input_file] -o [output_file]

cwebp -q 75 image.png -o image.webp

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

Инструменты Node

imagemin, и его плагин imagemin-webp, является самой популярной библиотекой Node для преобразования изображений в формат WebP. Ниже приведен пример скрипта, который преобразует все PNG и JPG файлы в каталоге в WebP.

JavaScript
/* convert-to-webp.js */

const imagemin = require(«imagemin»);
const webp = require(«imagemin-webp»);

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

12345678910 /* convert-to-webp.js */ const imagemin = require(«imagemin»);const webp = require(«imagemin-webp»); imagemin([«*.png», «*.jpg»], «images», {  use: [    webp({ quality: 75})  ]});

Затем мы можем использовать этот скрипт через командную строку или через инструмент сборки

JavaScript
node convert-to-webp.js

1 node convert-to-webp.js

Sketch

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

Для чего и как использовать сегодня изображения WebP

Насколько свободно мы можем использовать сегодня WebP в Интернете

На момент написания статьи, WebP поддерживается в 72% браузеров, используемых по всему миру.

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

Мы можем предоставить откат к изображениям в других форматах, используя элемент picture. Этот элемент HTML5 позволяет предоставлять несколько источников для одного изображения.

<picture>
<source type=»image/webp» srcset=»image.webp»>
<source type=»image/jpeg» srcset=»image.jpg»>
<img src=»image.jpg» alt=»My Image»>
</picture>

12345 <picture>    <source type=»image/webp» srcset=»image.webp»>    <source type=»image/jpeg» srcset=»image.jpg»>    <img src=»image.jpg» alt=»My Image»></picture>

Чтобы предоставить альтернативный источник изображения, мы используем элемент source внутри элемента picture. Элемент source имеет ряд атрибутов , которые мы можем использовать, чтобы определить изображение и когда его следует использовать:

type: MIME-тип источника

srcset: Путь к файлу изображения. Несколько файлов могут быть использованы для обеспечения разных размеров / плотностей изображений

sizes: Список размеров каждого исходного файла (см. статью выше)

media: Медиа-запрос, который определит, когда должно использоваться изображение (см. статью выше)

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

Источник: https://bitsofco.de/

Редакция: Команда webformyself.

Просмотров:

Добавить комментарий