Сначала нужно сделать проверку в файле js, поддерживает ли браузер формат webp:
function testWebP(callback) {
var webP = new Image();
webP.onload = webP.onerror = function () {
callback(webP.height == 2);
};
webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
}
testWebP(function (support) {
if (support == true) {
document.querySelector('body').classList.add('webp');
}else{
document.querySelector('body').classList.add('no-webp');
}
});
а затем задать свойства в файле стилей, например:
.webp div { background: url(../img/image.webp) 0 0 no-repeat; }
Есть ещё один вариант:
https://www.npmjs.com/package/webpack-css-replace-...
но я использую первый.
