Why next-gen image formats (JPEG2000, WebP) are better compare to JPEG, PNG formats?

Next-gen image formats are highly compressible both in lossy or lossless compression. Due to this high compression, the file size becomes smaller. The smaller images are better to load on the web and handy for web performance.

• .png file is normally around 15-25% larger than a .jpg.
• .jpg file is normally around 25-30% larger than a .webp.

In many browsers the next-gen image format is not supported. We can use HTML5 picture element to fix this case. It has a fallback option. See the code segment below:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>