Prüfpunkt co2.svg.rasterBilder
Warum ist eine SVG-Grafik mit eingebettetem Foto ein Befund?
SVG ist ein Format für Vektorgrafik: Linien und Flächen, als Text beschrieben, scharf in jeder Größe und meist sehr klein. Manche Grafikprogramme exportieren ein Foto oder eine Rastergrafik in eine SVG-Grafik, als lange Zeichenkette im Format Base64. Steht diese Grafik direkt im HTML der Seite, findet die Prüfung eingebettete Rasterbilder über 50 KB und meldet die Anzahl und die größte Datenmenge.
Warum Grafikprogramme Fotos in die SVG-Datei packen
SVG ist seit dem 4. September 2001 eine Empfehlung des W3C. Läuft eine SVG-Datei als Bild, also per img, als CSS-Hintergrund oder über das SVG-Element image, laden Browser aus Sicherheitsgründen keine weiteren Dateien nach, auf die sie verweist. Ein Foto darin erscheint dann nur, wenn es als data-URL in der Datei selbst steht. Für eine Grafik, die überall gleich aussehen soll, ist das Einbetten deshalb der sichere Weg beim Export. Das data-Schema für Adressen stammt von 1998; seine Beschreibung spricht von kleinen Datenmengen, die so direkt in eine Adresse passen. Ein Foto mit mehreren hundert Kilobyte ist das Gegenteil davon.
Was die Prüfung liest
Sie sucht in den SVG-Grafiken, die im HTML der Seite stehen, nach image-Elementen, deren Adresse ein eingebettetes PNG, JPEG, WebP oder GIF ist (data:image/…). Aus der Länge der Zeichenkette schätzt sie die Größe: Base64 braucht für drei Bytes vier Zeichen.
Was das eingebettete Bild kostet
Base64 macht die Bilddaten um ein Drittel größer. Das eingebettete Bild steht im Dokument selbst, das der Browser vor allem anderen lesen muss. Als eigene WebP- oder AVIF-Datei ist dasselbe Bild kleiner, der Browser speichert es getrennt zwischen und lädt per srcset die passende Größe.
Beispiele
Kopfgrafik
<svg viewBox="0 0 1200 600">
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…"
width="1200" height="600"/>
</svg>
<!-- 380.000 Zeichen Base64 im Dokument --><img src="/bilder/kopf-1200.webp"
srcset="/bilder/kopf-600.webp 600w, /bilder/kopf-1200.webp 1200w"
sizes="100vw" width="1200" height="600" alt="">So gehen Sie es an
- Öffnen Sie die betroffene Grafik und sehen Sie nach, ob sie ein Foto oder eine Rastergrafik enthält.
- Exportieren Sie das Rasterbild getrennt als WebP oder AVIF und binden Sie es mit img ein.
- Behalten Sie SVG für echte Vektorgrafik: Logos, Symbole, Diagramme.
- Soll die Grafik als SVG bleiben, stellen Sie im Grafikprogramm beim SVG-Export ein, dass Bilder verlinkt statt eingebettet werden.
Tipps aus der Praxis
- Bleibt die Grafik eine Datei, die per img oder als CSS-Hintergrund eingebunden wird, erscheint ein verlinktes Foto darin nicht. Legen Sie das Foto dann als eigenes img-Element unter die Grafik und die Linien und Schrift als SVG darüber.
- Öffnen Sie den Quelltext der Seite und suchen Sie nach base64. Jede Fundstelle ist eine eingebettete Datei, und die Länge der Zeichenkette zeigt ihre Größe.
- SVGO, ein freies Werkzeug für die Kommandozeile, entfernt aus exportierten SVG-Dateien, was die Darstellung nicht verändert, etwa Metadaten und Kommentare des Grafikprogramms. Ein eingebettetes Foto gehört zur Darstellung und bleibt; es kommt erst mit dem getrennten Export heraus.
Weiter im Prüfbereich CO₂ & EmpCo
- Spart eine schlanke Website Geld, und was sagt der CO₂-Wert wirklich?Was eine schwere Website kostet: beim Hoster Cent, beim Kunden Wartezeit. Was der CO₂-Wert je Aufruf bedeutet, wo das Modell endet, wie KI-Anfragen dazu stehen.
- Was darf meine Website seit dem 27. September 2026 über die Umwelt sagen?Seit 27.09.2026 gelten in Deutschland und Österreich die EmpCo-Regeln im UWG: was unzulässig ist, was erlaubt bleibt, warum Übergangsregeln nur Waren betreffen.
- Warum sollen kleine Symbole als SVG statt als PNG kommen?Symbole bis 48 Pixel Anzeigebreite als PNG, JPEG, GIF oder BMP meldet die Prüfung als Hinweis. Als SVG sind sie bei jeder Pixeldichte scharf und meist kleiner.
- Wie kommt Ihr Hoster zum Ökostrom-Nachweis bei der Green Web Foundation?Führt die Green Web Foundation Ihren Hoster als „nicht grün“, verliert der CO₂-Punktwert 8 Punkte. So kommt der Nachweis zustande, und so gelingt der Wechsel.
Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
