Создание изображений WebP при помощи командной строки
В интерактивном уроке уже установлен инструмент webp для командной строки, поэтому никаких подготовительных действий не требуется. Этот инструмент преобразует изображения из форматов JPG, PNG и TIFF в формат WebP.
Преобразование изображений в WebP #
Click Remix to Edit to make the project editable. 1. Click Terminal (note: if the Terminal button does not show you may need to use the Fullscreen option).
Введите следующую команду:
cwebp -q 50 images/flower1.jpg -o images/flower1.webpЭта команда преобразует images/flower1.jpg с уровнем качества 50 (0 — худшее, 100 — лучшее) и сохраняет его под именем images/flower1.webp.
После выполнения команды вы увидите в консоли примерно следующее:
Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |Это означает, что изображение успешно преобразовано в WebP.
Однако если выполнять команду cwebp для каждого изображения по отдельности, то преобразование большого числа изображений займет много времени. В таких случаях можно использовать скрипт.
- Запустите в консоли следующий скрипт (не забудьте обратные кавычки):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`Скрипт преобразует все файлы в каталоге images/, используя уровень качества 50, и сохраняет их в том же каталоге под тем же именем, но с другим расширением.
✔︎ Итог #
В результате у вас в каталоге images/ должно быть 6 файлов:
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webpТеперь мы можем обновить код данного Glitch, чтобы загружать WebP-изображения в браузерах, которые их поддерживают.
Добавление WebP-изображений при помощи тега <picture> #
Тег <picture> позволяет загружать WebP-изображения в новых браузерах, при этом сохраняя поддержку старых браузеров.
- В файле
index.htmlзамените<img src="images/flower1.jpg"/>следующим HTML-кодом:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>- Затем замените теги
<img>на<picture>для файловflower2.jpgиflower3.png.
✔︎ Итог #
В результате теги <picture> в файле index.html должны выглядеть следующим образом:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower2.webp">
<source type="image/jpeg" srcset="images/flower2.jpg">
<img src="images/flower2.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower3.webp">
<source type="image/png" srcset="images/flower3.png">
<img src="images/flower3.png">
</picture>Теперь вы можете воспользоваться Lighthouse, чтобы убедиться, что WebP-изображения добавлены на сайт надлежащим образом.
Проверка использования WebP при помощи Lighthouse #
При помощи проверки производительности Serve images in next-gen formats («Выдача изображений в форматах следующего поколения») в Lighthouse вы можете узнать, все ли изображения на вашем сайте используют современные форматы, такие как WebP.
To preview the site, press View App. Then press Fullscreen
. 1. Откройте DevTools, нажав Control+Shift+J(илиCommand+Option+J, если у вас Mac).Click the Lighthouse tab.
Make sure the Performance checkbox is selected in the Categories list.
Click the Generate report button.
Убедитесь, что сайт успешно проходит проверку Serve images in next-gen formats.
Готово! Теперь ваш сайт использует изображения в формате WebP.