Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Serve images in next-gen formats

Overview

Most websites serve images in JPEG or PNG formats, which have been around since the 1990s. The availability of a new generation of image formats offers an opportunity to further reduce your image file sizes.

The 'Serve images in next-gen format' audit recommends that you serve images in newer formats that leverage advances in image processing and compression. These formats are, namely:

While the device and browser compatibility for each format varies, the reduction in image file-size offered, along with the overall faster download of your webpage make this a worthwhile audit to evaluate.

How does your site score on this audit?

How does serving images in next-gen formats affect page performance?

Next-gen image formats offer superior compression and quality characteristics compared to older formats like JPEG or PNG.

WebP, for example, serves as an excellent replacement for JPEG, PNG, and even GIF images in some cases. It also supports lossless compression, lossy compression, and animated images.

Differences between JPEG and WebP
WebP offers superior image optimization, enabling lower file sizes and faster page loads.

In the vast majority of cases, serving a WebP image can reduce image file sizes in the order of 25-50%.

Switching to next-gen image formats not only reduces image file sizes, but also overall page size, resulting in faster loading pages, particularly on mobile devices. This is, especially, important for your visitors' page experience.

Next-gen images and browser compatibility

It is important to understand that most next-gen image formats, like WebP, are not yet widely supported across all devices and browsers, even as adoption continues to rise.

For example, at the time of writing, WebP support has been announced for Safari on iOS but has not been implemented yet. Moreover, some browser/device combinations offer full support while others offer either partial or no support.

Partial support could refer to - for example, not offering either lossless compression or animated WebP images, or both, depending on the unsupported platform.

For a full list of supported browsers and devices for the WebP format, click here.

Note that browser support is also generally added for the latest browser versions, which your visitors may not be using.

If your target audience falls within one of the unsupported browser/device categories, you should serve optimized fall-back images in the original JPEG/PNG format so that your users don't see a broken or badly designed page.

How does GTmetrix trigger this audit?

GTmetrix analyzes your page and identifies all the images that are served in older formats like BMP, JPEG or PNG.

It then converts each image to the WebP format to calculate how much each image's file size can be reduced. Clicking the audit on the GTmetrix report lists all the images and their potential savings in KB.

Expanded view of Serve images in next-gen formats audit
Clicking the audit reveals the list of images served in older formats, and potential reduction in file size by moving to newer formats like WebP.

Only the images that can be reduced by at least 8 KB will be displayed.

How to fix this audit?

Choose a next-gen format based on the range of browser/device support available. WebP is Google's recommended next-gen format and is also the most widely used format with the best browser/device support.

To serve WebP images, use one of the following methods:

1) Manually convert your images to WebP format

There are multiple ways to do this manually, including:

a) Using an online WebP converter

You can manually convert your images to the WebP format using an online WebP converter.

Note that this method is only recommended if you have a few images to convert.

b) Using a Bulk WebP converter

For bulk conversion of images to the WebP format, consider using a Chrome extension like Bulk Images to WebP converter or using Android Studio for creating WebP images for mobile websites.

2) Use a Photoshop plugin

If you are familiar with Photoshop, you can use a Photoshop plugin to convert and/or save your images in the WebP format.

3) Use JavaScript

If you are comfortable with JavaScript, you can use a JavaScript runtime environment like Node.js to convert your JPEG and PNG images to WebP.

This is useful for, both, uploading new WebP images in bulk when developing your new website, as well as, converting existing images in bulk for your current website.

4) For WordPress (or other CMS users)

If you are using a CMS (e.g., WordPress), you can use plugins to optimize and serve WebP images on your website.

Summary

 **