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
The type tag attribute in a <source> tag specifies a file type for the source image.
<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, Edge, Firefox, Safari, Opera) will display "image.webp" <source> element
- Older versions of browsers not supporting WebP will fallback to "image.jpg" <source> element
- Browsers not supporting the <picture> tag (Internet Explorer) will fallback to the <img> tag
WebP Browser Support
As of June 23, 2020, all major browsers — Chrome, Edge, Firefox & Safari (14+) — support the WebP format.