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

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

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

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

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

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

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

1 thought on “Использование WebP в быту”

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

Leave a Reply

Your email address will not be published. Required fields are marked *