WebP формат графических файлов разработанный Google и впервые представленный в 2010 году. Преимущества перед png\jpg может достигать 30% в весе файла, при том же качестве изображения. К сожалению, и поддерживается пока только в Chrome, и браузерах основанных на том же движке рендера, например Opera, или штатный браузер в Android. Несмотря на поддержку только в Chrome, всего выходит ~67% от общего числа пользователей, неплохо. Преимущества webp для сайтов просты, меньше вес изображений – быстрее загрузка сайта.
Но, здесь я опишу простой способ подготовки изображений webp, с обратной поддержкой в штатные jpg\png. Всё это при помощи gulp и imagemin. Плагин imagemin просто швейцарский нож для работы с изображениями, уверен он уже встроен в ваш процесс сборки. Дополнительно потребуется imagemin-webp
Примерные настройки таковы (обратите внимание png и jgg файлы обрабатываются отдельно):
|
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, да-да. )
|
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. А использовать можно так:
|
1 2 3 4 5 6 7 |
.no-webp .elementWithBackgroundImage{ background-image: url("image.jpg"); } .webp .elementWithBackgroundImage{ background-image: url("image.webp"); } |
Как сейчас с этим обстоят дела? Вроде лиса уже поддерживает этот формат.
Стоит ли его использовать в интернет-магазинах или же мобильные браузеры поддерживать не будут?
Плохо. https://caniuse.com/#search=webp
В посте есть fallback на jpg/png.