Знакомство с форматом WebP
WebP — новый формат изображений, разработанный Google. Он поддерживает сжатие с потерями, сжатие без потерь и прозрачность, а полученные файлы меньше, чем JPEG, PNG и другие. Это позволяет экономить пропускную способность, сокращать время загрузки страниц и расход пользовательского трафика.
Приложения Android и iOS могут легко поддерживать WebP, достаточно подключить библиотеку декодирования от Google. Однако в вебе поддержка WebP пока не очень распространена, согласно Данные Can I Use，в настоящее время WebP поддерживают только браузеры Chrome, Opera и WebView в Android. Но у изображений WebP столько преимуществ — можем ли мы использовать их на веб-страницах? Да. В этой статье мы и обсудим этот вопрос.
Преобразование имеющихся изображений в формат WebP
Чтобы использовать формат WebP, нужно подготовить WebP-версии всех изображений на вашем сайте. Если вы пользуетесь услугами CDN-провайдера, обычно у него есть возможность преобразования в WebP. Например, у 又拍云：
После добавления такой настройки можно использовать версии ресурсов в формате WebP, добавляя соответствующий суффикс к URL изображения.
Для пакетного преобразования форматов изображений также можно использовать плагины webpack и gulp. Здесь подробно на этом останавливаться не будем.
Использование формата WebP в браузере
Поскольку не все браузеры поддерживают формат WebP, у нас есть два подхода: использовать WebP только в браузерах с его поддержкой либо обеспечить поддержку WebP в браузерах, где её нет.
Способ первый： <picture>Теги
<picture>— новый тег в HTML5, похожий на<video>Также можно указать ресурсы в нескольких форматах, чтобы браузер выбрал для загрузки тот, который он поддерживает.
<picture class="picture"> <source type="image/webp" srcset="image.webp"> <img class="image" src="image.jpg"> </picture>
Если браузер поддерживает формат WebP, будет загружен image.webp，иначе будет загружено image.jpg。
Даже если браузер не поддерживает <picture>тег, изображение по-прежнему будет отображаться нормально, однако CSS может не суметь корректно выбрать picture элементы. Например, в IE8 следующий CSS не будет работать:
.picture img { width: 100px; height: 100px;
}Однако стили для изображения можно задать так：
.image { width: 100px; height: 100px;
}Даже если браузер использует изображения в формате WebP, в итоге всё равно будет применяться img стиль элемента。
Однако достаточно использовать html5shiv，чтобы старые браузеры поддерживали этот тег и CSS-селекторы могли работать корректно.
Этот способ самый простой, но он не действует на изображения, заданные в CSS（например, фоновые）.
Способ второй: заменить URL изображения с помощью JS.
На многих наших страницах используется «ленивая загрузка» изображений — обычно URL изображения помещают в img в пользовательском атрибуте элемента, а затем с помощью JS в нужный момент присвоить URL src свойство. По аналогичному принципу, в зависимости от того, поддерживает ли браузер формат WebP, можно задать для img элементам придаются различные src значение.
Сначала нам нужно с помощью JS определить, поддерживает ли браузер формат WebP. Для этого передадим браузеру изображение в формате WebP и проверим, сможет ли он правильно его отобразить. Этот способ асинхронный, поэтому последующие действия нужно записать в функции обратного вызова. Результат можно сохранить в localStorage внутрь, чтобы впоследствии не приходилось проверять повторно.
function checkWebp(callback) { var img = new Image();
img.onload = function () { var result = (img.width > 0) && (img.height > 0);
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}Затем используйте приведённый ниже код, чтобы заменить соответствующий src в зависимости от поддержки WebP.
function showImage(useWebp){ var imgs = Array.from(document.querySelectorAll('img'));
imgs.forEach(function(i){ var src = i.attributes['data-src'].value; if (useWebp){
src = src.replace(/\.jpg$/, '.webp');
}
i.src = src;
});
}
checkWebp(showImage);Преимущество этого способа в том, что его можно совместить с уже существующей функцией отложенной загрузки. Кроме того, с помощью JS мы можем обрабатывать и изображения в CSS（например, фоновые）.
Способ третий：декодирование изображений WebP с помощью JS
Раз исходный код декодера WebP открыт, можно ли реализовать его на JS? Конечно можно, Кто-то уже написал декодер WebP на JS。Подключение этой JS-библиотеки позволяет декодировать все изображения WebP средствами JS и преобразовать их в base64，затем заменить исходный URL, и тогда браузеры, изначально не поддерживающие WebP, смогут нормально отображать WebP. Эта библиотека очень проста в использовании: достаточно прочитать пояснения на её веб-странице.
Недостаток этого метода заключается в том, что для декодирования изображения WebP средствами JS требуется повторно асинхронно запросить URL из src (однако, поскольку само изображение уже было загружено ранее, используется кеш); кроме того, декодирование средствами JS довольно медленное и влияет на производительность, поэтому до появления изображения может пройти некоторое время.
Выше приведены несколько способов использования изображений WebP в браузере; подходящий можно выбрать с учётом конкретных условий. В нашей практике после перехода на WebP размер изображений обычно уменьшался более чем на 1/3, что ускоряло загрузку и экономило трафик пользователей. Мы настоятельно рекомендуем начать использовать этот формат уже сейчас.
