Ускоряем загрузку страницы с помощью использования нового формата изображений WebP

Изображения широко используются

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

Статистика 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"));
});