WEBP Image Returns

Question

I searched a lot on the Internet and can’t find the right example or a complete study guide on the Internet that a full prof. So guys, please offer me some good examples.

I tried WEBP code on lots or website, for example, using a modernizer, checking browser support or using a background image.

Answer 1

There is an article on stucox where you can find some examples using webp images with modernizr and inverse images. This should cover your issue.

/* Result pending */ .js .container { background-image: none; } /* No JS / WebP not supported */ .no-js .container, .js.no-webp .container { background-image: url('image.jpg'); } /* WebP supported */ .js.webp .container { background-image: url('image.webp'); } 

http://www.stucox.com/blog/using-webp-with-modernizr/

Answer 2

I searched around the same question and I just got the answer.

Please follow the URL link and I hope this helps you .

https://hacks.mozilla.org/2019/01/firefox-65-webp-flexbox-inspector-new-tooling/ https://www.ghacks.net/2018/11/02/firefox-65-supports- Googles-WebP image format /

Answer 3

You can use the onerror event handler and fix it.

Here is a sample code

 <img src="image.webp" onerror="this.onerror=null; this.src='image.png'"> 

Answer 4

You should use the HTML picture element as described in w3schools :

 <picture> <source type="image/webp" srcset="img_pink_flowers.webp"> <source srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> 

The latest img ad is a fallback for incompatible browsers. The order of the sources determines the importance of each format. So, if the first one is available in its browser, the first one will load.