https://usefulangle.com/post/114/webp-image-in-html-with-fallback (https://usefulangle.com/post/114/webp-image-in-html-with-fallback)
File sizes for WebP images are typically smaller than their JPEG and PNG counterparts. If your application involves showing a lot of images then probably it makes sense to add WebP support.
Considering the WebP format is created by Google, and Google's Chrome browser has about a 60-65% market share, a lot of your users can be benefited if your application starts serving WebP images.
Detecting WebP Support with <picture> Tag
There are ways to detect WebP images using Javascript and server-side techniques (htaccess for example), but the most robust solution is to use <picture> tag for your images in the webpage. The <picture> tag has been created for these special cases, so it is best to use this to provide the best browser support.
The type tag attribute in a <source> tag specifies a file type for the source image.
Code: [Select] (#post_)<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg">
</picture>
In the above markup :
Browsers supporting WebP (Chrome, Opera & Edge) will display "image.webp" <source> element
Browsers not supporting Webp (Firefox & Safari) will fallback to "image.jpg" <source> element
Browsers not supporting the <picture> tag (Internet Explorer) will fallback to the <img> tag