Эта статья была впервые написана 3 марта 2017 года, когда я работал в Superrb.

Возможно, вы не слышали о формате изображений WebP, и, вероятно, для этого есть причина; он не смог по-настоящему взлететь в (большинстве) основных браузеров. Так почему мы вообще об этом говорим? Что ж, формат был разработан Google, и это означает, что все браузеры Chrome поддерживают этот формат.

Так зачем же нам нужен другой формат изображения? WebP может похвастаться действительно впечатляющим сжатием изображений (около 26%) для изображений без потерь. Важно отметить, что он может содержать альфа-канал для прозрачности. Это позволяет нам иметь легитимную альтернативу изображениям в формате PNG с возможностью существенной экономии размера файла. Конечно, поддержка на данный момент невелика, но большой плюс в том, что Chrome поддерживает формат и выглядит как Safari и поддержка Firefox может не за горами. Modernizr позволяет нам обнаружить поддержку браузером WebP, так что нет никаких оправданий, чтобы не попробовать.

Я решил написать небольшой миксин SASS для использования WebP для структурных и фоновых изображений для недавней сборки. Давайте взглянем.

@mixin webp-background($img, 
    $color: transparent,
    $repeat: repeat,
    $attachment: scroll,
    $position: center,
    $size: auto,
    $type: ‘.png’) {
 background: $color url(‘/frontend/img/#{$img}.webp’) $repeat $attachment $position / $size;
 .no-webp & {
 background-image: url(‘/frontend/img/#{$img}#{$type}’);
 }
}

Все, что делает миксин, — это ищет изображение по имени файла и создает его как фоновое изображение с типом файла WebP. Если WebP не поддерживается (обнаружено Modernizr), мы можем вернуться к исходному типу файла. Другие настройки позволяют нам построить весь фон со всеми его настройками (размер, исходный тип файла, повтор и т. д.).

Давайте посмотрим, как использовать миксин.

@include webp-background($img: 'background-img');

Это основное использование. Единственным обязательным параметром является имя изображения. Обратите внимание, что у файла нет расширения, так как оно применяется нашим миксином. Основываясь на настройках нашего миксина, он будет искать /frontend/img/background-img.webp для тех браузеров, которые могут, и /frontend/img/background-img.png для тех, которые не могут.

Существует множество других настроек, которые вы можете настроить для каждого использования или глобально со значениями по умолчанию в миксине. Например, если вы хотите вместо этого использовать JPG, вы можете передать это расширение файла миксину;

@include webp-background($img: 'background-img', $type: '.jpg');

Этот миксин предполагает, что вы преобразовали файлы WebP, что вы можете сделать вручную, онлайн или встроить их в процесс компиляции ресурсов Gulp/Grunt. Давайте посмотрим, как может выглядеть ваша задача gulp.

gulp.task(‘images’, function() {
 var sink = clone.sink();
 return gulp.src(config.img)
     // Only optimize changed images
    .pipe(plugins.changed(config.dist.img))
    // Imagemin
    .pipe(plugins.imagemin({
        optimizationLevel: 3,
        progressive: true,
        svgoPlugins: [{
            removeViewBox: false
        }]
     }))
    .pipe(sink) // clone image
    .pipe(webp()) // convert cloned image to WebP
    .pipe(sink.tap()) // restore original image
    // Set destination
    .pipe(gulp.dest(config.dist.img))
    // Show total size of images
    .pipe(plugins.size({ title: ‘images’ }));
});

Это требует использования gulp-webp и gulp-clone. Я могу запустить эту функцию как часть моих часов/сборки, и она сделает за меня все преобразование изображений.

В конечном счете, это означает, что я могу беспрепятственно встраивать прогрессивные улучшения в свой рабочий процесс; это всесторонняя победа. Надеемся, приведенные выше фрагменты помогут вам сделать то же самое.