WebP is a relatively new image format which provides lossless and lossy compression for web images. It was developed and released by Google in 2010. Accroding to Google WebP format saves around 25-30% of image size which is a big saving for image-heavy sites. Even for normal sites, it saves a lot of network bandwidth and results in overall performance improvement of a web site (in turn a better ranking by search engines). Even though this format has been there since 2010, it is still not supported by all browsers.The good thing is that it is natively supported in Google Chrome and the Opera browsers which cover for bigger chunk of browser market share. For mobile sites this format has become a necessity to optimize load time of websites on mobile.
Google provides tools to convert images from one format(png, jpg etc) to webp and viceversa
https://developers.google.com/speed/webp/
If we are using webp format of images on our websites we would also need to have a fallback option for browsers which do not support this format yet.
First option to use onerror event to change webp image with alternate image as following
<img src="assets/images/logo.webp" onerror="this.onerror=null; this.src='assets/images/logo.png'">
If your website is using HTML5, then easier method is to use <picture> tag which is added in HTML5
<picture> <source srcset="assets/images/logo.webp" type="image/webp"> <img src="assets/images/logo.png" alt=""> </picture>