Использование WebP в быту

WebP формат графических файлов разработанный Google и впервые представленный в 2010 году. Преимущества перед png\jpg может достигать 30% в весе файла, при том же качестве изображения. К сожалению, и поддерживается пока только в Chrome, и браузерах основанных на том же движке рендера, например Opera, или штатный браузер в Android. Несмотря на поддержку только в Chrome, всего выходит ~67% от общего числа пользователей, неплохо. Преимущества webp для сайтов просты, меньше вес изображений — быстрее загрузка сайта.

Но, здесь я опишу простой способ подготовки изображений webp, с обратной поддержкой в штатные jpg\png. Всё это при помощи gulp и imagemin. Плагин imagemin просто швейцарский нож для работы с изображениями, уверен он уже встроен в ваш процесс сборки. Дополнительно потребуется imagemin-webp

Примерные настройки таковы (обратите внимание png и jgg файлы обрабатываются отдельно):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var imagemin = require("imagemin"),    // The imagemin module.
    webp = require("imagemin-webp"),   // imagemin's WebP plugin.
    outputFolder = "./img",            // Output folder
    PNGImages = "./img/*.png",         // PNG images
    JPEGImages = "./img/*.jpg";        // JPEG images
 
imagemin([PNGImages], outputFolder, {
    plugins: [webp({
        lossless: true // Losslessly encode images
    })]
});
 
imagemin([JPEGImages], outputFolder, {
    plugins: [webp({
        quality: 65 // Quality setting from 0 to 100
    })]
});

Дальнейшее использование было бы очень простым, при полной поддержке браузерами. Но пока всё не так, можно использовать тег picture, который обратно совместим помоему даже в IE6, да-да. )

JavaScript
1
2
3
4
5
<picture>
    <source srcset="img/awesomeWebPImage.webp" type="image/webp">
    <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
    <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

Как вы уже поняли каждый браузер возьмёт своё.

В CSS немного иначе, тот случай когда вы указывали сначала свойство поддерживаемое в большинство браузеров, а потом какое-то экспериментальное, тут не сработает. Выкручиваться придётся при помощи того же modernizer.js, который проставит нам в body необходимый класс webp\no-webp. А использовать можно так:

CSS
1
2
3
4
5
6
7
.no-webp .elementWithBackgroundImage{
    background-image: url("image.jpg");
}
 
.webp .elementWithBackgroundImage{
    background-image: url("image.webp");
}

Использование WebP в быту: 3 комментария

  1. Как сейчас с этим обстоят дела? Вроде лиса уже поддерживает этот формат.
    Стоит ли его использовать в интернет-магазинах или же мобильные браузеры поддерживать не будут?

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *