Use WebP Images on a Website

Question

I want to try using WebP images as background images on my web pages. But I'm not sure how to make the condition in CSS if the browser does not support the WebP format, so in this case use the classic jpg image. I find this code example, the bud is not working

.mybackgroundimage { background-image: url("image.jpg"); background-image: image("image.webp" format('webp'), "image.jpg"); } 

Answer 1

You should use modernizr to determine if the browser supports webp or not, and then apply the appropriate style to it

 .no-webp .mybackgroundimage { background: url('image.jpg') no-repeat; } .webp .mybackgroundimage { background: url('image.webp') no-repeat; }