Используйте изображения WebP

Кэти Хемпениус
Katie Hempenius
X

Почему вас это должно волновать?

Изображения WebP меньше, чем их аналоги в формате JPEG и PNG — обычно размер файла уменьшается на 25–35%. Это уменьшает размер страницы и повышает производительность.

  • YouTube обнаружил, что переход на миниатюры WebP привел к ускорению загрузки страниц на 10% .
  • Facebook добился экономии размера файла на 25–35 % для файлов JPEG и на 80 % для файлов PNG, когда перешел на использование WebP.

WebP — отличная замена изображениям JPEG, PNG и GIF. Кроме того, WebP предлагает сжатие как без потерь, так и с потерями. При сжатии без потерь данные не теряются. Сжатие с потерями уменьшает размер файла, но за счет возможного снижения качества изображения.

Конвертируйте изображения в WebP

Обычно люди используют один из следующих подходов для преобразования своих изображений в WebP: инструмент командной строки cwebp или плагин Imagemin WebP (пакет npm). Плагин Imagemin WebP, как правило, является лучшим выбором, если в вашем проекте используются сценарии сборки или инструменты сборки (например, Webpack или Gulp), тогда как CLI является хорошим выбором для небольших проектов или если вам нужно конвертировать изображения только один раз.

Когда вы конвертируете изображения в WebP, у вас есть возможность установить широкий спектр настроек сжатия, но для большинства людей единственное, о чем вам когда-либо придется заботиться, — это настройка качества. Вы можете указать уровень качества от 0 (худшее) до 100 (лучшее). Стоит поэкспериментировать с этим и найти, какой уровень является правильным компромиссом между качеством изображения и размером файла для ваших нужд.

Используйте cwebp

Конвертируйте один файл, используя настройки сжатия cwebp по умолчанию:

cwebp images/flower.jpg -o images/flower.webp

Конвертируйте один файл с уровнем качества 50 :

cwebp -q 50 images/flower.jpg -o images/flower.webp

Конвертируйте все файлы в каталоге:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Используйте Imagemin

Плагин Imagemin WebP можно использовать отдельно или с вашим любимым инструментом сборки (Webpack/Gulp/Grunt/и т. д.). Обычно это включает добавление примерно 10 строк кода в сценарий сборки или файл конфигурации вашего инструмента сборки. Вот примеры того, как это сделать для Webpack , Gulp и Grunt .

Если вы не используете ни один из этих инструментов сборки, вы можете использовать Imagemin отдельно в качестве сценария Node. Этот скрипт преобразует файлы в каталоге images и сохраняет их в каталоге compressed_images .

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

Подавать изображения WebP

Если ваш сайт поддерживает только браузеры , совместимые с WebP, вы можете прекратить чтение. В противном случае используйте WebP для новых браузеров и резервное изображение для старых браузеров:

До:

<img src="flower.jpg" alt="">

После:

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

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

<picture>

Тег <picture> представляет собой оболочку для нуля или более тегов <source> и одного тега <img> .

<source>

Тег <source> указывает медиа-ресурс.

Браузер использует первый указанный источник в поддерживаемом им формате. Если браузер не поддерживает ни один из форматов, перечисленных в тегах <source> , он возвращается к загрузке изображения, указанного тегом <img> .

<img>

Тег <img> позволяет этому коду работать в браузерах, которые не поддерживают тег <picture> . Если браузер не поддерживает тег <picture> , он будет игнорировать теги, которые он не поддерживает. Таким образом, он «видит» только тег <img src="flower.jpg" alt=""> и загружает это изображение.

Чтение заголовка HTTP Accept

Если у вас есть серверная часть приложения или веб-сервер, который позволяет перезаписывать запросы, вы можете прочитать значение заголовка HTTP Accept , в котором будет указано, какие альтернативные форматы изображений поддерживаются:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Чтение этого заголовка запроса и перезапись ответа на основе его содержимого позволяет упростить разметку изображения. Разметка <picture> может оказаться довольно длинной при использовании многих источников. Ниже приведено правило Apache mod_rewrite , которое может служить альтернативами WebP:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

Если вы пойдете по этому пути, вам нужно будет установить заголовок ответа HTTP Vary , чтобы кэши понимали, что изображение может обслуживаться по-разному в зависимости от заголовка Accept :

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </IfModule>
</FilesMatch>

Предыдущее правило перезаписи будет искать версию WebP любого запрошенного изображения JPEG или PNG. Если альтернатива WebP найдена, она будет предоставлена ​​с соответствующим заголовком Content-Type . Это позволит вам использовать разметку изображений, подобную следующей, с автоматической поддержкой WebP: 

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

Проверьте использование WebP

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