Serve Images in Next-Gen Formats

Question

My ranking from Google Page Speed insights is being severely penalised because of:

"Serve Images in Next-Gen Formats" more info on Google's help page here.

However, according to this, this and this those formats are supported very few browsers.

What do you do in this scenario? What

Answer 1

You could use the <picture> element to deliver a WebP image to users with browsers that support it, falling back to a JPEG or PNG for those that don't. The advantage of using the <picture> element rather than other fallback methods is that browsers that don't support the element will fallback to whatever source is defined in the <img> tag.

<picture>
  <source srcset="img/yourImage.webp" type="image/webp">
  <source srcset="img/yourImage.jpg" type="image/jpeg"> 
  <img src="img/yourImage.jpg" alt="Your image">
</picture>

Here's a method for converting source images to WebP.

If you're using WordPress there are plugins that will automatically generate WebP images from your media library and include fallback functionality. The only one I've used is WebP Express but it served me reasonably well when a client was alarmed that their 100/100 PageSpeed Insight score took a nosedive to 30 overnight with the Lighthouse roll-out.

This does feel like another way for Google to push another propriety technology but then WebP compression is quite impressive compared to other 'next-gen' formats.