Почему вас это должно волновать?
Изображения 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 для новых браузеров и резервное изображение для старых браузеров:
До: html <img src="flower.jpg" alt="">
После: html <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 , чтобы кэши понимали, что изображение может обслуживаться с различными типами контента:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</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.