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.

Bidwell

css-tricks has a good guide: css-tricks.com/using-webp-images – Washko

@HonsaStunna i tried all the methods but no one are full prof – Bidwell

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/

Washko

If the css in line (critical css), first the jpg image is download and when dom ready the webp, isn't it? – Interlope

Seems so. I do not use this method but for performance, above the fold or critical css I would not suggest to do it this way. He also describes a way without javascript you have to scroll to "Here's what's going on" stucox.com/blog/using-webp-with-modernizr/… – Washko

But this not help, the jpg is requested anyway. – Washko

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'">

Augustus

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.

Savoirfaire