Ein Wechsel von JPEG zu AVIF spart je nach Motiv grob die Hälfte der Bytes. Das Bild wegzulassen spart einhundert Prozent. Genau in dieser Reihenfolge ist auch die Guideline aufgebaut: Das erste Kriterium heißt nicht „Optimierung“, sondern „Bedarf“. Das ist kein Zufall und in der Praxis der am häufigsten übersprungene Schritt. In fast jedem Audit, das ich mache, finde ich Bilder, die nichts erklären, nichts zeigen und nichts belegen. Sie sind da, weil eine Seite ohne Bild leer wirkt. Diese Begründung kostet bei einem einzigen Motiv mit 400 KB und 100.000 Aufrufen 40 GB Datenübertragung im Jahr.
Die fünf Erfolgskriterien von Guideline 2.9
Bedarf an Medien: Binde Medien nur ein, wenn sie die Nutzererfahrung unterstützen oder das Verständnis verbessern, und halte die Anzahl der Medienelemente so gering wie möglich.
Optimierte Medien: Passe Größe, Optimierung und Komprimierung von Medien an unterschiedliche Bildschirmgrößen, Geräte und Nutzerbedürfnisse an. Nutze breit unterstützte, effiziente Formate, die nach Möglichkeit eine native Darstellung oder Wiedergabe erlauben. Vermeide unnötige eigene oder nicht-native Medienplayer. Nutze hardwarebeschleunigte Wiedergabe, wo sie verfügbar und mit den Sicherheitsanforderungen vereinbar ist.
Verzögertes Laden: Plane verzögertes oder bedarfsgesteuertes Laden von Anfang an ein, indem Du bestimmst, welche Medienelemente sofort benötigt werden und welche erst bei einer Nutzerinteraktion laden sollen. Lade große oder datenintensive Medien erst bei Bedarf und nutze dafür eine nicht funktionale statische Vorschau oder einen Platzhalter, bis der Nutzer sie anfordert.
Nutzergesteuerte Medien: Schalte die automatische Wiedergabe von Audio, Video und anderen Medien standardmäßig ab. Sorge dafür, dass Nutzer Wiedergabe und Auflösung steuern können. Informiere über Länge, Format und zu erwartenden Datenverbrauch. Biete die Möglichkeit, datenintensive Medien abzuschalten, oder stelle Alternativen mit geringerem Datenbedarf bereit.
Medienverwaltung und -nutzung: Erstelle eine Richtlinie für die Verwaltung und Nutzung von Medien. Nimm darin Vorgaben zu Komprimierung, Darstellungsleistung, Dateiformaten, Aufbewahrung, Speicherung, Überprüfung und Löschung auf.
Meine Einordnung
Bilder sind weiterhin der größte Einzelposten im Seitengewicht typischer Websites. Deshalb lohnt es, die Kriterien in der Reihenfolge ihrer Wirkung abzuarbeiten.
Weglassen wirkt am stärksten. Danach kommt die richtige Darstellungsgröße: Ein Motiv mit 2000 Pixel Breite, das auf 400 Pixel angezeigt wird, überträgt etwa das Fünfundzwanzigfache der nötigen Pixelmenge. Erst an dritter Stelle steht das Format. AVIF liegt bei vergleichbarer Qualität meist deutlich unter JPEG, WebP dazwischen, und beide werden von allen aktuellen Browsern unterstützt. Praktisch sieht das so aus:
<picture>
<source type="image/avif" srcset="bild.avif">
<source type="image/webp" srcset="bild.webp">
<img src="bild.jpg" alt="Beschreibung" width="1600" height="900" loading="lazy">
</picture>
Die Angaben zu width und height sind dabei kein Detail: Ohne sie kennt der Browser das Seitenverhältnis nicht und das Layout springt beim Nachladen, was direkt in CLS einfließt.
Bei meinen eigenen Artikelbildern gehe ich noch einen Schritt früher an: reduzierte, geometrische Motive mit wenigen Farben. Solche Grafiken lassen sich als SVG oft in wenigen Kilobyte ausliefern, weil dort keine Pixel gespeichert werden, sondern Formen. Das ist der eigentliche Trick, den die Guideline nicht ausspricht: Nicht das Format entscheidet über die Größe, sondern die Bildsprache. Ein Foto lässt sich komprimieren, eine Fläche muss man gar nicht erst beschreiben.
Beim vierten Kriterium ist mir wichtig, dass es die Kontrolle zum Nutzer verschiebt. Wer Bilder abschalten kann, entscheidet selbst über sein Datenvolumen. Kombiniert mit dem Hinweis auf Länge und Datenverbrauch bei Videos ergibt das eine Haltung, die man selten sieht: Ehrlichkeit über die Kosten, die man seinen Besuchern aufbürdet.
Wo ich weiter gehe
Beim verzögerten Laden wird häufig zu viel des Guten getan, und das rächt sich messbar.
loading="lazy" niemals auf das große Bild im sichtbaren Bereich. Der Browser stellt dessen Abruf dann hinten an, obwohl es genau das Element ist, das die Ladezeit definiert. Das Ergebnis ist eine schlechtere LCP-Bewertung bei unverändertem Datenvolumen. Verzögert wird alles unterhalb der ersten Bildschirmhöhe, das erste große Motiv wird bevorzugt geladen.Der stärkste Hebel bei Videos ist die Fassade. Ein eingebettetes Video eines großen Portals lädt beim Seitenaufruf oft mehrere hundert Kilobyte an Skripten, bevor überhaupt jemand auf Wiedergabe geklickt hat. Ersetzt Du die Einbettung durch ein statisches Vorschaubild, das erst beim Klick den Player nachlädt, zahlen nur die Besucher, die das Video wirklich sehen wollen. Das steht so im dritten Kriterium und ist eine der wirksamsten Einzelmaßnahmen überhaupt.
Und dann ist da das fünfte Kriterium, das kaum jemand ernst nimmt: eine Medien-Richtlinie mit Regeln zu Aufbewahrung, Überprüfung und Löschung. Auf jedem gewachsenen Server liegen Bildbestände aus Kampagnen, die seit Jahren beendet sind, dazu die automatisch erzeugten Zuschnitte in fünf Größen. Datenhygiene endet nicht bei Logfiles. Ein Medienarchiv ohne Löschregel ist ein Datenarchiv ohne Löschregel.
Dein erster Schritt heute
Du brauchst keine Bildstrategie. Du brauchst die zehn größten Dateien.
Wenn Du danach noch Zeit hast: Ersetze jede Video-Einbettung durch ein Vorschaubild mit Klick-zum-Laden. Das ist eine halbe Stunde Arbeit und wirkt bei jedem einzelnen Aufruf.
Jedes Bild sollte eine Frage beantworten. Findest Du die Frage nicht, ist das Bild die Antwort auf keine.
Quelle: W3C-Fassung von Guideline 2.9