WEBP image fall back

Question

I searched a lot on the internet & can't find the right example or complete tutorial on the web which can full prof. So guys please suggest me some good examples.

I have tried WEBP code on lots or website like use with modernizer, checking browser support, or using the background image.

Answer 1

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

/* 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

You can make use of 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 3

You should use picture html element, as described by 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 last img declaration is a fallback for incompatible browsers. The order of sources define the importance of each format. So, if the first is available in its browser, will load the first one.