Serve images in next-gen formats

Serve images in next-gen formats

Updated
Appears in: Performance audits

The Opportunities section of your Lighthouse report lists all images in older image formats, showing potential savings gained by serving WebP versions of those images:

A screenshot of the Lighthouse Serve images in next-gen formats audit

Why serve images in WebP format #

JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.

WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web. See A New Image Format For The Web for more on WebP.

How Lighthouse calculates potential savings #

Lighthouse collects each BMP, JPEG, and PNG image on the page, and then converts each to WebP, reporting the potential savings based on the conversion figures.

Lighthouse omits the image from its report if the potential savings are less than 8KiB.

Browser compatibility #

Browser support is not universal for WebP, but similar savings should be available in most major browsers in an alternative next-gen format. You'll need to serve a fallback PNG or JPEG image for other browser support. See How can I detect browser support for WebP? for an overview of fallback techniques and the list below for browser support of image formats.

To see the current browser support for each next-gen format, check out the entries below:

Stack-specific guidance #

AMP #

Consider displaying all amp-img components in WebP formats while specifying an appropriate fallback for other browsers.

Drupal #

Consider installing and configuring a module to leverage WebP image formats in your site. Such modules automatically generate a WebP version of your uploaded images to optimize loading times.

Joomla #

Consider using a plugin or service that will automatically convert your uploaded images to the optimal formats.

Magento #

Consider searching the Magento Marketplace for a variety of third-party extensions to leverage newer image formats.

WordPress #

Consider using a plugin or service that will automatically convert your uploaded images to the optimal formats.

Resources #

Last updated: Improve article

Codelabs

See it in action
Learn more and put this guide into action.