Does the image share have to fall on a website with many photos?

If your website shows many images, as a photo studio or hotel does, a high share follows naturally. The finding may then remain even with optimised images. The share itself leaves the CO₂ score unchanged: images act there through the page weight, and every image delivered too wide costs one point, at most five in total.

Do background images from the CSS count?

Yes. Every transfer of type image counts, including background images, icons and images from third-party servers.

Which format should I choose?

WebP suits photos as well as graphics, and all common browsers display it. AVIF is usually even smaller for photos. With the picture element you offer both and keep JPEG as a fallback.

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

CO₂ & EmpCo

What does it mean if images make up more than half of the transmission?

On many websites, images are the largest part of what a page view transfers. The check counts the bytes of all image files and relates them to the total transfer. If the share is above 50 %, the image share finding is raised.

Where the image share comes from

The share shows that images determine the weight of the page. The findings next to it name the causes: images in JPEG or PNG instead of WebP or AVIF, images delivered wider than the display requires, and raster images inside SVG graphics. The downloadable audit file contains the image table of the home page; it lists every img element with role, size, format and bytes. Background images from the CSS count only in the share.

What makes an image light

An image is light when it is delivered at the displayed width and compressed in a modern format. For high-resolution screens, double the width is offered as a second version in the srcset. Images below the first screen load only when they come close to the visible area. With these means, a camera photo of several megabytes usually becomes a file of a few hundred kilobytes with the same visible quality.

Examples

Gallery

Not met

<img src="/galerie/foto-01.jpg" style="width:360px">
<!-- 5472 × 3648 px, 3.900 KB -->

Passes

<img src="/galerie/foto-01-360.webp"
     srcset="/galerie/foto-01-360.webp 360w, /galerie/foto-01-720.webp 720w"
     sizes="360px" width="360" height="240" loading="lazy"
     alt="Werkstatt mit Hobelbank">
<!-- 38 KB -->

Open the image table of the home page in the downloadable audit file and start with the images with the most bytes.
Deliver every image at the displayed width and offer double the width as a second version via srcset.
Convert photos to WebP or AVIF; many CMS have a setting or extension for this.
Set loading="lazy" on images below the first screen. The largest image on the first screen loads immediately.

Deutsche Fassung dieser Seite