Используем WebP [UPDATED]

WebP — это современный формат графики. Он был разработан Google в 2010 году как альтернатива форматам JPG и PNG, отличающийся тем, что имеет наименьший вес при том же качестве изображения. Смотри демо.

Сжатие

WebP поддерживает сжатие с потерями и без, полупрозрачность и анимацию. Изображения в формате WebP, сжатые с потерями, в среднем на 30% меньше, чем в формате JPG, а сжатые без потерь — в среднем на 25% меньше, чем в формате PNG.

Зайдём на сайт Squoosh и загрузим картинку в формате JPG. Справа выберите сжатие с WebP, значение Effort выставите равным 4, а значение Quality равным 75. Слева выберите сжатие с MozJPEG, Quality выставите равным 75. Ниже видно, что формат WebP сжимает картинку лучше, чем MozJPEG.

Конвертация в WebP

Сконвертировать JPG и PNG можно с помощью сайта, приведённого выше, или с помощью инструмента командной строки cwebp, где можно указать качество, входной и выходной файлы:

cwebp -q 75 image.jpg -o image.webp

Также существует плагин для Gulp (уже добавил в сборку для тех, кто хочет поэкспериментировать).

Использование на сайте

У WebP плохая кроссбраузерность (см. ниже), а PageSpeed при проверке ругается на то, что современный формат там не используется. 

Проблема решается с помощью тега <picture>:

<picture>
  <source srcset="pic.webp" type="image/webp">
  <img src="pic.jpg" alt="picture">
</picture>

Те браузеры, что поддерживают формат WebP, будут запрашивать с сервера именно его, а те, что не имеют такой поддержки, будут запрашивать только JPG или PNG. Вы сами можете это проверить тут с помощью веб-инспектора.

Firefox:

Safari:

Чтобы использовать WebP в CSS, нужно воспользоваться Modernizr. Выберите из списка Webp, Webp Alpha и Webp Lossless, затем нажмите Build. Подключите JS-файл к себе в HTML и добавьте класс .no-webp к тому блоку, к которому прописан путь к файлу JPG или PNG в CSS через background:

.webp-css-img {
  width: 100%;
  background: url("../img/pic.webp") no-repeat;
  background-size: auto;
  background-size: 100% 100%;
  padding-top: 55.5%;
}

.no-webp .webp-css-img {
  width: 100%;
  background: url("../img/pic.jpeg") no-repeat;
  background-size: auto;
  background-size: 100% 100%;
  padding-top: 55.5%;
}

Зачем?

Для оптимизации. Но по факту, настройки сжатия не повторяют в точности таковые в JPG и не стоит ожидать, что 50%-качество JPEG будет соответствовать 50%-качеству WebP. В некоторых случаях WebP справляется лучше, а где-то хуже. 

Решать вам, начинать ли использовать данный формат на своих сайтах или нет, но если необходима оптимизация с PageSpeed, то ответ, безусловно, будет «да».