Using WebP Images


Convert your JPG / PNG images into WebP and display them on your web pages (without any browser compatibility issues).





Converting Images from JPG / PNG format to WebP Format

One or more existing JPG / PNG images can be converted into WebP format using Google's WebP converter tool:

You can change the quality parameter (-q) value to higher (upto 100, for better quality) or lower (upto 0, for lower quality). The default is 75 if the -q parameter is not specified. You can also batch convert a large number of files by writing a small batch script or a shell script.



Displaying WebP Images (without Browser Compatibility Issues)

You can use <picture> tag to display WebP images with a fallback to display JPG / PNG image on browsers that do not support WebP images:


<picture>
  <source srcset='MyImg.webp' type="image/webp">
  <source srcset='MyImg.jpg' type="image/jpg">
  <img src="MyImg.jpg" alt="Your Alt Text Here" title="Your Title Text Here" />
</picture>

The 'type' attribute value in the code-snippet above allows the browser to pick the right image format. Also, the <img src="..." /> ensures that the JPG image is loaded for browsers that do not support <picture> tag. Over-all, the browsers that support WebP image format will load and display WebP image while the rest would load and display the image in fallback JPG format.



In case if you want to load the WebP / JPG images based on screen-size, have a look here.




Looking to improve your website's speed? Let Tezify team take care of your website's performance intricacies.