This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung

CO₂ & EmpCo

Why should big pictures come as WebP or AVIF instead of JPEG or PNG?

JPEG and PNG date from the 1990s. WebP and AVIF compress the same image considerably smaller, and all common browsers display them. The check reports JPEG and PNG files from 100 KB that are transferred during the page view: the number (at most ten), their total in KB and one address as an example.

What the check counts

The check takes transferred files ending in .jpg, .jpeg or .png from 100 KB, at most ten, and also reads the Content-Type header of the response: if the server names WebP or AVIF there, the file does not count. Images from third-party servers count as soon as the server releases their size with the Timing-Allow-Origin header. The threshold is 100 KB because converting smaller files brings little. The downloadable audit file contains the image table of the home page; it shows every img element with format and bytes. Background images from the CSS appear only in the finding.

How much the formats save

According to Google, WebP files are 25 to 34 % smaller than JPEG files of the same quality for photos, and 26 % smaller than PNG files for lossless graphics. AVIF files are usually even smaller than WebP for photos. The finding gives these figures as an order of magnitude.

The way in the CMS

WordPress accepts WebP since version 5.8 and AVIF since version 6.5, if the server’s image library supports AVIF. The “Modern Image Formats” extension of the WordPress performance team converts new uploads to AVIF if the server can process it, otherwise to WebP. Existing images get the new format when you have the image sizes regenerated, for example with the “Regenerate Thumbnails” extension. Other systems and site builders have similar settings. For a website built from your own HTML, the picture element delivers the modern format and keeps JPEG as a fallback.

Examples

picture with fallback

Not met

<img src="/bilder/werkstatt.jpg" width="1200" height="800" alt="Werkstatt">
<!-- 420 KB -->

Passes

<picture>
  <source srcset="/bilder/werkstatt.avif" type="image/avif">
  <source srcset="/bilder/werkstatt.webp" type="image/webp">
  <img src="/bilder/werkstatt.jpg" width="1200" height="800" alt="Werkstatt">
</picture>

Read the example address in the finding. The other img elements of the home page are in the image table of the downloadable audit file.
Switch the image processing of your CMS to WebP or AVIF.
Convert the existing images once; in WordPress, have the image sizes regenerated for this.
Where needed, keep JPEG as a fallback in the picture element.

Deutsche Fassung dieser Seite

FAQ

Do WebP images look worse?

At a comparable quality setting, photos look the same to the naked eye. After the conversion, look at a few photos with fine gradients, such as sky or skin, and raise the quality a little if needed.

And logos and graphics?

Logos, icons and diagrams are usually smallest as SVG and stay sharp at any size. For raster images with transparency, WebP and AVIF are as suitable as PNG. According to Google, lossy WebP with transparency is typically a third of the size of PNG.

Why does the finding name only one example?

To keep the sentence short. The finding includes up to nine further files in the number and the total. The img elements of the home page are listed with format and bytes in the image table of the downloadable audit file.

My CDN already delivers WebP. Why is the finding there?

The check reads the Content-Type header of the response. If your CDN delivers WebP or AVIF under an address ending in .jpg and names it in this header, the file does not count. In older audit files only the ending of the address counted; a re-measurement shows the new state. If the finding still stands after that, the server names JPEG or PNG, or it sends no Content-Type.