Как вставить .webp изображения через background?
Создайте функцию проверкиfunction ThisIsWebP() {
    var def = $.Deferred(), crimg = new Image();
    crimg.onload = function() { def.resolve(); };
    crimg.onerror = function() {def.reject(); };
    crimg.src = "https://simpl.info/webp/cherry.webp";
    return def.promise();
}
И проверяем:ThisIsWebP().then(function() {
    //Есть поддержка webp
}, function() {
   //Нет поддержки webp
});
В своих проектах я использую такие css

Это для google chrome
background-image: url("some-image.webp");

Это для Safari
background-image: image-set(url(some-image.jpg) 1x);

Не проверял работает ли в firefox