tl;dr: Could we update the next-gen formats audit to provide AVIF savings estimates?
Background
WebP has been around for a number of years now with support recently hitting 92% of browsers worldwide. In the years since it was introduced, another promising format has landed in browsers - AVIF (supported in Chromium) (support is 62% globally), and coming to Firefox 88-90. AVIF offers up to a 50% improvement in compression over JPEG and some estimates suggest a 20% improvement over WebP.
Some developers are seeing savings from switching to AVIF of up to 25% (based on payload bytes) with up to a 90ms saving to LCP at P75.
Current Lighthouse audit
Our current serve images in next-gen formats audit source estimates potential savings based on conversion figures for JPEG compression ratios (8:1) and WebP (10:1).
Proposal
What if we evolved this approach to either:
- Replace the current WebP savings estimates with AVIF savings estimates? OR
- Display two potential savings columns: one for WebP and one for AVIF? (i.e encourage at least serving what most browsers support, but if you're already using
<picture>, consider adding AVIF as a source too)
| URL |
Size |
Potential savings: WebP |
AVIF |
| cool-cats.jpg |
75KB |
30KB |
50KB |
What are the potential savings estimates for AVIF?
The AVIF team at Google have confidence in the 50% savings number (compared to JPEG) being accurate and the one we should use for tooling purposes (as of today) if we need a multiplier for estimates. Further evidence to back this number up includes:
|
static estimateWebPSizeFromDimensions(imageElement) { |
|
const totalPixels = imageElement.naturalWidth * imageElement.naturalHeight; |
|
// See uses-optimized-images for the rationale behind our 2 byte-per-pixel baseline and |
|
// JPEG compression ratio of 8:1. |
|
// WebP usually gives ~20% additional savings on top of that, so we will use 10:1. |
|
// This is quite pessimistic as their study shows a photographic compression ratio of ~29:1. |
|
// https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results |
|
const expectedBytesPerPixel = 2 * 1 / 10; |
|
return Math.round(totalPixels * expectedBytesPerPixel); |
|
} |
I think encouraging use of AVIF could help developers improve their Largest Contentful Paint when its an image. This may also give us a chance to revise the current audit text to include AVIF generally.
Would love to hear what folks think. cc @paulirish @connorjclark @patrickhulce
tl;dr: Could we update the next-gen formats audit to provide AVIF savings estimates?
Background
WebP has been around for a number of years now with support recently hitting 92% of browsers worldwide. In the years since it was introduced, another promising format has landed in browsers - AVIF (supported in Chromium) (support is 62% globally), and coming to Firefox 88-90. AVIF offers up to a 50% improvement in compression over JPEG and some estimates suggest a 20% improvement over WebP.
Some developers are seeing savings from switching to AVIF of up to 25% (based on payload bytes) with up to a 90ms saving to LCP at P75.
Current Lighthouse audit
Our current
serve images in next-gen formatsaudit source estimates potential savings based on conversion figures for JPEG compression ratios (8:1) and WebP (10:1).Proposal
What if we evolved this approach to either:
<picture>, consider adding AVIF as a source too)What are the potential savings estimates for AVIF?
The AVIF team at Google have confidence in the 50% savings number (compared to JPEG) being accurate and the one we should use for tooling purposes (as of today) if we need a multiplier for estimates. Further evidence to back this number up includes:
lighthouse/lighthouse-core/audits/byte-efficiency/uses-webp-images.js
Lines 56 to 65 in 1ca0e7f
I think encouraging use of AVIF could help developers improve their Largest Contentful Paint when its an image. This may also give us a chance to revise the current audit text to include AVIF generally.
Would love to hear what folks think. cc @paulirish @connorjclark @patrickhulce