Изображения широко используются
Изображения на сайтах используют все больше трафика, и , следовательно, их оптимизация имеет самое большое значение для ускорения сайта.
Статистика W3Techs показывает, что 90% всех сайтов используют изображения.
Для news.google.com изображения составляют 44% ресурсов, загруженных на главной странице, и занимают 30% времени загрузки.
WebP
Google предложил формат изображения WebP, который обеспечивает меньший размер изображения.
Согласно исследованию, проведенному самими Google по другому алгоритму сжатия без потерь по сравнению с webp, последний показал до 42% сохраненных байтов по сравнению с классической библиотекой сжатия png.
Протестируем изображение JPEG (1920×1080):

Как вы можете видеть, изображение JPEG весит 530 КБ против 195 КБ для изображения WebP, что на 36% меньше по сравнению с тем, что Google утверждает против PNG.
Покрытие
WebP корректно поддерживается во всех самых популярных браузерах ( на данный момент охват 75% ).
Использование WebP в прдакшене
Вот пример оптимизации для веб-страниц с использованием HTML-тега <picture> :
<!-- before -->
<img src="/img/mountain.jpg" alt="Moutains view" />
<!-- after -->
<picture>
<source type="image/webp" srcset="/img/mountain.webp" />
<img src="/img/mountain.jpg" alt="Mountains view" />
</picture>
Если WebP не поддерживается пользовательским агентом, браузер переключится на <img />
. Picture — это HTML-тег с 87% поддержкой, поэтому, если браузер не поддерживает <picture>
тег, он все равно откатится к <img />
тегу.
Тег <picture>
позволить вам выбрать размер изображения в зависимости от текущей ширины окна браузера.
Инструменты для преобразования изображений в формат WebP
Существует множество сервисов для конвертации изображений в WebP. Например Gulp.js.
const gulp = require("gulp");
const webp = require("gulp-webp");
gulp.task("webp", function() {
return gulp.src("src/img/**/*.{jpg,jpeg,png,svg}")
.pipe(webp())
.pipe(gulp.dest("dist/img"));
});