I searched a lot on the internet & can't find the right example or plete 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.

I searched a lot on the internet & can't find the right example or plete 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.

• javascript
• jquery
• html
• css
• webp

• 1 css-tricks has a good guide: css-tricks./using-webp-images – Honsa Stunna Commented Dec 2, 2017 at 11:09
• @HonsaStunna i tried all the methods but no one are full prof – Harden Rahul Commented Dec 2, 2017 at 11:20

3 Answers 3

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./blog/using-webp-with-modernizr/

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

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 inpatible 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.