How to insert .webp images through background?

Question

css

How to insert .webp images through background? You say

"What nonsense? You write background: url(img/image.webp); Profit!"

What if the user is accessing Firefox or another browser that doesn't support .webp? Can I somehow insert a .webp image, and if it does not load, then use png / jpg, only without scripts (if without scripts, then what script)?

Something like this, only in css

<picture class="information__image">
    <source type="image/webp" srcset="img/phones/phone1.webp 1x, img/phones/[email protected] 2x, img/phones/[email protected] 3x">
    <source type="image/png" srcset="img/phones/phone1.png 1x, img/phones/[email protected] 2x, img/phones/[email protected] 3x">
    <img src="img/phones/phone1.png" alt="text">
</picture>

Answer 1

Create a validation function

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();
}

And we check:

ThisIsWebP().then(function() {
    //Есть поддержка webp
}, function() {
   //Нет поддержки webp
});