Prüfpunkt co2.bild.altformatBilder
Warum sollen große Bilder als WebP oder AVIF statt als JPEG oder PNG kommen?
JPEG und PNG stammen aus den 1990er-Jahren. WebP und AVIF komprimieren dasselbe Bild deutlich kleiner, und alle gängigen Browser zeigen sie an. Die Prüfung meldet JPEG- und PNG-Dateien ab 100 KB, die beim Aufruf übertragen werden: die Anzahl (höchstens zehn), ihre Summe in KB und eine Adresse als Beispiel.
JPEG verliert Anteile, AVIF wächst
Im Web Almanac 2024 waren 32,4 % aller Bilder im Web JPEG-Dateien, 28,4 % PNG, 16,8 % GIF, 12 % WebP, 6,4 % SVG und 1,0 % AVIF. JPEG fiel seit 2022 von 40 % auf 32 % der Bilder. AVIF ist noch selten, die Zahl der AVIF-Dateien hat sich in diesen zwei Jahren aber fast vervierfacht. Die Bildersuche von Google liest beide modernen Formate: Ihre Liste nennt BMP, GIF, JPEG, PNG, WebP, SVG und AVIF. Ein Produktfoto als WebP oder AVIF kann dort also genauso erscheinen wie ein JPEG.
Bits je Pixel: was die Formate im Web tatsächlich liefern
Das HTTP Archive misst, wie viele Bits ein Bild im Web je Pixel braucht. Ein unkomprimiertes Farbbild ohne Transparenz hat 24 Bit je Pixel. Im Median kamen 2024 GIF-Dateien auf 6,7 Bit je Pixel, PNG auf 3,8, JPEG auf 2,0, AVIF auf 1,4 und WebP auf 1,3. Ein Bild mit 1.200 × 800 Pixeln wiegt bei 2,0 Bit je Pixel rund 240.000 Bytes, bei 1,3 Bit je Pixel rund 156.000 Bytes. Die Werte sind Mediane über das ganze gemessene Web. Wie viel Ihr eigenes Foto spart, zeigt der Vergleich der Dateigrößen nach der Umwandlung.
Was die Prüfung zählt
Die Prüfung nimmt übertragene Dateien auf .jpg, .jpeg oder .png ab 100 KB, höchstens zehn, und liest dazu die Kopfzeile Content-Type der Antwort: Nennt der Server dort WebP oder AVIF, zählt die Datei nicht. Bilder fremder Server zählen, sobald der Server ihre Größe mit der Kopfzeile Timing-Allow-Origin freigibt. Die Grenze liegt bei 100 KB, weil die Umstellung bei kleineren Dateien wenig bringt. In der Prüfakte zum Herunterladen steht die Bildtabelle der Startseite; sie zeigt jedes img-Element mit Format und Bytes. Hintergrundbilder aus dem CSS erscheinen allein im Befund.
Wie viel die Formate sparen
Laut Google sind WebP-Dateien bei Fotos 25 bis 34 % kleiner als JPEG-Dateien gleicher Qualität, bei verlustfreien Grafiken 26 % kleiner als PNG-Dateien. AVIF-Dateien sind bei Fotos meist noch kleiner als WebP. Der Befund nennt diese Angaben als Größenordnung.
Der Weg im CMS
WordPress nimmt seit Version 5.8 WebP an und seit Version 6.5 AVIF, wenn die Bildbibliothek des Servers AVIF beherrscht. Neue Uploads wandelt die Erweiterung „Modern Image Formats“ des WordPress-Performance-Teams in AVIF um, wenn der Server es verarbeiten kann, sonst in WebP. Vorhandene Bilder bekommen das neue Format, wenn Sie die Bildgrößen neu erzeugen lassen, etwa mit der Erweiterung „Regenerate Thumbnails“. Andere Systeme und Baukästen haben ähnliche Einstellungen. Bei einer Website aus eigenem HTML liefert das picture-Element das moderne Format und behält JPEG als Rückfall.
Beispiele
picture mit Rückfall
<img src="/bilder/werkstatt.jpg" width="1200" height="800" alt="Werkstatt">
<!-- 420 KB --><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>So gehen Sie es an
- Lesen Sie im Befund die Beispieladresse. Die übrigen img-Elemente der Startseite stehen in der Bildtabelle der Prüfakte zum Herunterladen.
- Stellen Sie die Bildverarbeitung Ihres CMS auf WebP oder AVIF um.
- Wandeln Sie die vorhandenen Bilder einmal um; in WordPress lassen Sie dazu die Bildgrößen neu erzeugen.
- Behalten Sie, wo nötig, JPEG als Rückfall im picture-Element.
Tipps aus der Praxis
- Stellen Sie die Qualität selbst ein und vergleichen Sie die Dateigrößen. AVIF-Dateien im Web wurden zwischen 2022 und 2024 im Median um 47 % schwerer je Pixel; der Web Almanac vermutet, dass viele Programme in der Grundeinstellung heute weniger Qualität opfern.
- Für Hintergrundbilder aus dem CSS übernimmt image-set() mit type("image/avif") die Aufgabe des picture-Elements: Der Browser nimmt AVIF, wenn er es kann, sonst JPEG. Die Funktion läuft seit September 2023 in allen gängigen Browsern.
- In neueren Prüfakten steht unter dem Befund eine Tabelle mit jeder betroffenen Datei und ihren KB. Geben Sie sie so an Ihre Agentur weiter; sie ist die Arbeitsliste für die Umwandlung.
Mehr zu diesem Thema
Weiter im Prüfbereich CO₂ & EmpCo
- 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.
- 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.
- Woran erkennt die Prüfung, dass ein Bild breiter geliefert wird, als es angezeigt wird?Ist ein Bild breiter als seine Anzeige plus 10 %, meldet die Prüfung es mit Natur- und Anzeigebreite. Jedes kostet einen Punkt im CO₂-Punktwert, höchstens fünf.
- Warum wirkt ein Bild unscharf, und wie stellt die Prüfung das fest?Ist ein Inhaltsbild schmaler als 90 % der Breite, die seine Anzeige braucht, meldet die Prüfung einen Hinweis mit Natur- und nötiger Breite.
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.
