Does the rule also apply to small embedded images?

The rule starts above 50 KB. A small pattern or texture can make sense embedded, because it arrives with the document and saves a request.

Does the check also read SVG files embedded with img?

This rule reads SVG graphics in the page’s HTML. An SVG file with an embedded photo that loads via img or as a CSS background counts in the page weight and the image share.

How do I recognise it in the source code?

By a very long string that starts with data:image/png;base64, data:image/jpeg;base64 or data:image/webp;base64, for example.

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

CO₂ & EmpCo

Why is an SVG graphic with embedded photo a finding?

SVG is a format for vector graphics: lines and areas described as text, sharp at any size and usually very small. Some graphics programs export a photo or a raster graphic into an SVG graphic, as a long string in Base64 format. If this graphic sits directly in the page’s HTML, the check finds embedded raster images above 50 KB and reports the number and the largest data volume.

What the check reads

It searches the SVG graphics in the page’s HTML for image elements whose address is an embedded PNG, JPEG, WebP or GIF (data:image/…). It estimates the size from the length of the string: Base64 needs four characters for three bytes.

What the embedded image costs

Base64 makes the image data a third larger. The embedded image sits in the document itself, which the browser has to read before anything else. As a separate WebP or AVIF file the same image is smaller, the browser caches it separately and loads the right size via srcset.

Examples

Header graphic

Not met

<svg viewBox="0 0 1200 600">
  <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…"
         width="1200" height="600"/>
</svg>
<!-- 380.000 Zeichen Base64 im Dokument -->

Passes

<img src="/bilder/kopf-1200.webp"
     srcset="/bilder/kopf-600.webp 600w, /bilder/kopf-1200.webp 1200w"
     sizes="100vw" width="1200" height="600" alt="">

Open the affected graphic and check whether it contains a photo or a raster graphic.
Export the raster image separately as WebP or AVIF and embed it with img.
Keep SVG for true vector graphics: logos, icons, diagrams.
If the graphic is to stay SVG, set the graphics program’s SVG export to link images instead of embedding them.

Deutsche Fassung dieser Seite