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

Scarecrow

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.

Caviness

Does this method get rid of the page speed "Serve Images in Next-Gen Formats" message? I'm using the picture tag approach, with the src attribute of image tag as jpg fallback, and I still have the message in PSI.... – Mccormick

Answer 2

WebP is the one that currently has broader support, pretty much all major browser except Safari support it.

As colossalyouth mentioned on one of the answers you can use the picture tag to load webp images and in the case is not supported it will fallback to any other format you choose.

And if you are using background-image you can use something like modernizr to detect feature support by the browser and end up with CSS like the following:

my-selector {
    background: url('../images/home-bg.webp') no-repeat scroll center center
}

.no-webp my-selector {
    background: url('../images/home-bg.jpg') no-repeat scroll center center
}

I have actually done both things on my website and successfully implemented webp formats, I have created a detailed post on how I did it and the performance gains I had you can check it out here: Improve your website speed performance using next-gen formats

Iden

Is there a reason why you're nesting the css for the .no-webp using browser detection? I mean, could you not just put multiple 'background' styles in the original selector, the same way you do with e.g. box-shadow, -moz-box-shadow, -webkit-box-shadow? Surely the browser would just use what it recognises/supports in its fallback order? – Hickie

@grhmstwrt, No it wouldn't, because one thing is different vendor prefixes. Background does not require these, as it is interpreted in all browsers correctly, you can easily test this. Simply add to values for bg with the second one being erroneous, it won't fall back on the first correct one. e.g.: .myelement{ background: red; background: url(wrong-url-for-image.jpg); } – Cheesecloth

Answer 3

Until major browsers support those next-gen formats, it's probably best to continue using JPG/PNG, as they have wide-spread support. Most websites do indeed use JPG & PNG and it will take some time till browsers are in-line with next-gen tech.

Semblable

Answer 4

You could always use an image CDN like ImageEngine. Full disclosure I work for the company behind ImageEngine.

It acts as a pull based CDN and will automatically transform your images to WebP or JPEG-2000 if the end users device supports that format. It will also automatically apply compression and resizing to further optimize your image content, but it will definitely help with your page speed.

You can sign up for a free trial and see how that improves your Google Page Speed score.

Lp

Answer 5

You can use a tool like https://www.imagecompress.org/ to convert your current image formats, and follow the example to update your old tags https://www.imagecompress.org/examples.

Chuck

Answer 6

I recommend you to use "Enhanced Media Library" plugin if you're a wordpress user. It will simply allow you to directly upload Webp images without configuring anything manually.

Cirrostratus

Answer 7

WebP format will load faster and consume less cellular data. Anyone can work with the format and suggest improvements in WebP open source.

In <picture> attribute <source> can be used to load alternative image file formats that might not be supported in all browsers. For example, you can serve an image in WebP format to browsers that support it, while falling back to a JPEG on other browsers:

<picture>
  <source type="image/webp" srcset="images/verz.webp">
  <img src="images/banner.jpg" alt="Banner Image" width="100" height="100">
</picture>

Note: The element is currently available Chrome 38. Try it out with screen emulation in the Chrome DevTools. As per Google, WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web. WebP does not support all browsers. For other browsers, You'll need to serve a fallback PNG or JPEG image.

If your website is in WordPress. Use plugins that will automatically convert your uploaded images to the optimal formats.

Befall