Что такое WebP и почему его стоит использовать на сайте

Гугл активно продвигает свой формат изображений увидевший свет ещё в 2010 году - WebP. Отдать должное, не зря, сжатие позволяет существенно снизить вес картинки (по отношению к прижившейся тройке Jpg, Png, Gif). Универсальный формат позволяет в одном файле совмещать и прозрачность, и анимацию, благодаря этому можно избежать вечной комбинации файлов с разными расширениям при верстке сайта.

Проблемы перехода на новый формат

Наверняка, если бы технически переход к новому формату был бы проще, то уже повсеместно использовался бы только WebP. Причины по которым использование WebP является проблемой:

Учитывая всё надо понимать что на текущий момент мы не можем полностью переехать на WebP. Выход с положения - необходимо на страничке реализовать проверку поддержки браузера WebP, если таковая имеется - выводить новый формат, если нет - показывать изображение старого формата.

Кроссбраузерный WebP в HTML, тэг «Picture»

Рассмотрим следующий код и разберемся как он работает:

HTML
Копировать в буфер
<picture>
    <source srcset="/template/img/7/i-min.webp" media="(max-width: 768px)" type="image/webp">
    <source srcset="/template/img/7/i.webp" type="image/webp">
    <img src="/template/img/7/i.jpg" alt="Картинка">
</picture>

Элемент <picture> это контейнер, внутри которого располагаются <source> (может быть сколько угодно) и <img>. Работает эта конструкция следующим образом:

  1. Если браузер поддерживает <picture> он поочередно начинает обходить все <source>, в обратном случае просто выводится <img>.
  2. Во время обхода идет проверка поддержки формата изображения указанного в атрибуте type. Помимо type у элемента <source> может быть атрибут media (с помощью него можно добавить условие, при каком минимальном и/или максимальном разрешении окна браузера этот <source> будет действительным). Стоит учесть что оба атрибута не являются обязательными.
  3. Если браузер при обходе определил type и media (при их наличии) как true, то выводится картинка путь которой указан в атрибуте srcset. Выводится первый <source> атрибуты которого удовлетворили всем требованиям.

Смоделируем работу кода в примере выше при открытии в разных браузерах

Кроссбраузерный WebP в CSS

Если с HTML все просто, там есть стандарт который согласован и поддерживается современными браузерами, то в случае с CSS все по другому, но выход есть, и даже очень удачный, придется импровизировать.

Первое что мы делаем — добавляем класс webp нашему основному <body>. Позже, если этот тег останется, благодаря нему и будут прописываться webp картинки через CSS.

HTML
Копировать в буфер
<body class="webp">

Через JS скрипт идет проверка поддерживает ли браузер новый формат изображений, если поддержки нет, то класс webp у <body> удаляется.

JS
Копировать в буфер
function checkWebp() {
    var WebP = new Image();
    WebP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
    WebP.onload = WebP.onerror = function() {
        isWebp = (WebP.height === 2);
        if (!isWebp) {
            document.querySelector('body').classList.remove('webp');
        }
    };
}
checkWebp();

Остается прописать отдельные стили для современных браузеров поддерживающих новый формат изображений.

CSS
Копировать в буфер
.class {
    background-image:url("/template/img/image.png");
}
.webp .class {
    background-image:url("/template/img/image.webp");
}
У вас есть вопросы? Спрашивайте :)