Bilder in modernen Formaten für Lighthouse

Die Lighthouse-Warnung bedeutet, dass Sie Ihre JPEG- und PNG-Dateien in WebP oder AVIF konvertieren und sie dann über ein picture-Element mit dem Original als Fallback bereitstellen sollten. Diese Prüfung lässt sich vergleichsweise einfach bestehen, da die Behebung eher technischer als struktureller Natur ist.

Lighthouse gibt die Warnung aus, wenn es Bilder findet, die in einem modernen Format deutlich kleiner wären. Die Schätzung basiert auf der heruntergeladenen Datei, sodass die gemeldete Ersparnis in der Regel realistisch und manchmal sogar vorsichtig kalkuliert ist.

Was Lighthouse misst

Lighthouse codiert jedes Bild intern als WebP neu und meldet den Unterschied, wenn die Ersparnis einen bestimmten Schwellenwert überschreitet. Die Zahl im Bericht ist eine echte Schätzung und keine pauschale Empfehlung.

Bilder unterhalb des Schwellenwerts werden ignoriert. Daher zeigt eine Seite mit 30 Bildern in der Prüfung vielleicht nur 4 an. Die aufgelisteten Dateien sind diejenigen, deren Behebung sich am meisten lohnt. Das Beheben dieser Dateien entfernt die Warnung meist vollständig, selbst wenn andere Bilder auf der Seite in älteren Formaten verbleiben.

Das Markup, das die Prüfung erfüllt

Verwenden Sie ein picture-Element mit AVIF an erster Stelle, WebP an zweiter Stelle und dem originalen JPEG im img-Tag. Der Browser wählt die erste Quelle, die er versteht, sodass neuere Browser die kleine Datei erhalten und ältere trotzdem ein Bild anzeigen.

Das img-Tag muss erhalten bleiben, da es den Alternativtext (alt), die Abmessungen und das Fallback enthält. Das Weglassen der Attribute width und height führt beim Laden von Bildern zu Layout-Verschiebungen (Layout Shift), was eine andere Core Web Vitals-Metrik verschlechtert, während diese hier behoben wird. Setzen Sie beide Attribute auf die tatsächliche Pixelgröße des Fallback-Bildes.

So bestehen Sie die Prüfung

Um die Warnung ordnungsgemäß zu beheben, befolgen Sie diese 6 Schritte.

1. Öffnen Sie den Lighthouse-Bericht und listen Sie die dort genannten Bilder auf: das sind diejenigen mit messbaren Einsparungen.
2. Überprüfen Sie die Anzeigegröße jedes Bildes, da viele sowohl zu groß als auch im falschen Format vorliegen.
3. Ändern Sie die Größe jedes Bildes auf seine tatsächliche Anzeigebreite, verdoppelt für Bildschirme mit hoher Pixeldichte.
4. Konvertieren Sie in WebP mit einer Qualität von 80 und in AVIF mit einer Qualität von 65 für die größten Bilder auf der Seite.
5. Stellen Sie die Ergebnisse über ein picture-Element mit dem Original als img-Fallback bereit.
6. Führen Sie Lighthouse erneut aus, um zu bestätigen, dass die Warnung verschwunden ist und keine Layout-Verschiebungen aufgetreten sind.

Schritt 3 ist wichtiger als Schritt 4. Die Abmessungen bestimmen den Großteil der Dateigröße, und ein zu großes WebP-Bild ist immer noch ein zu großes Bild. Die Massenkonvertierung dauert nur wenige Minuten, während das Schreiben des Markups meist mehr Zeit in Anspruch nimmt.

Welches Format für welches Bild

Erledigt Ihre Plattform das bereits automatisch?

Viele Content-Management-Systeme und Webhoster konvertieren Bilder automatisch. Prüfen Sie dies also, bevor Sie selbst Hand anlegen. Die Arbeit doppelt zu machen, kommt häufig vor und ist reine Verschwendung.

Testen Sie es in 2 Minuten. Öffnen Sie die veröffentlichte Seite, machen Sie einen Rechtsklick auf ein Bild, öffnen Sie es in einem neuen Tab und lesen Sie die Dateiendung in der Adresszeile. Eine .webp-Endung bei einer Datei, die Sie als JPEG hochgeladen haben, bedeutet, dass die Plattform bereits konvertiert. Shopify, die meisten Managed-WordPress-Hoster und verschiedene Homepage-Baukästen tun dies standardmäßig.

Warum die Warnung manchmal wiederkehrt

Neue Uploads bringen das Problem zurück, wenn der Konvertierungsschritt manuell statt automatisch erfolgt. Eine im Januar bereinigte Website zeigt die Warnung bis Juni wieder an, wenn Redakteure Bilder direkt von einer Kamera hochladen.

Beheben Sie den Prozess und nicht nur die Dateien. Aktivieren Sie entweder die automatische Konvertierung auf Plattformebene oder vereinbaren Sie eine einfache Regel, dass Bilder vor dem Hochladen in der Größe angepasst und konvertiert werden. Diese Regel schriftlich festzuhalten ist auf jeder Website wichtig, auf der mehr als eine Person veröffentlicht, da die Prüfung das schlechteste Bild misst und nicht den Durchschnitt.

Sollten Sie AVIF, WebP, oder beides verwenden?

Verwenden Sie auf den meisten Websites nur WebP und fügen Sie AVIF nur für die größten Bilder auf der Seite hinzu. Beides zu unterstützen verdoppelt die Anzahl der zu erstellenden, zu speichernden und zu synchronisierenden Dateien für eine Ersparnis, die bei normalen Bildern gering ist.

Die Rechnung ändert sich bei bildintensiven Websites, auf denen AVIF weitere 20 bis 30 Prozent bei Dateien einspart, die bereits mehrere hundert Kilobyte groß sind. Bei einer Seite mit einem 600 KB großen Hero-Bild ist das eine spürbare Reduzierung. Bei einer Seite mit 40 KB großen Thumbnails erfordert der zusätzliche Aufwand mehr Arbeit, als er einbringt, und WebP allein reicht aus, um die Prüfung zu bestehen.

Das Ergebnis richtig überprüfen

Führen Sie Lighthouse in einem privaten Fenster mit deaktivierten Erweiterungen aus, da Browser-Erweiterungen die Messung verfälschen. Ergebnisse variieren zudem zwischen den Durchläufen. Vergleichen Sie daher 3 Durchläufe, anstatt einer einzelnen Zahl zu vertrauen.

Überprüfen Sie, ob der Browser tatsächlich das neue Format empfängt, anstatt es nur anzunehmen. Öffnen Sie die Entwicklertools, wechseln Sie zum Reiter Netzwerk, filtern Sie nach Bildern und laden Sie die Seite neu. Die Spalte Typ zeigt an, was tatsächlich bereitgestellt wurde. Wenn eine Seite nach einer Konvertierung immer noch JPEG ausgibt, ist meist das Markup des picture-Elements fehlerhaft oder eine Caching-Ebene hält noch die vorherige Version.

Verwandte Prüfungen, die daneben angezeigt werden

• Bilder in passender Größe bereitstellen. Das Bild ist größer als der Bereich, in dem es angezeigt wird. Ändern Sie die Größe, anstatt es nur zu komprimieren.
• Bilder effizient codieren. Die Komprimierung ist zu schwach. Verringern Sie die Qualitätseinstellung.
• Bilder außerhalb des Bildschirms aufschieben. Fügen Sie Lazy Loading für Bilder unterhalb des sichtbaren Bereichs hinzu.
• Element für „Largest Contentful Paint“. Meistens Ihr Hero-Bild, das zuerst Aufmerksamkeit verdient.
• Bildelemente haben keine explizite Breite und Höhe. Fügen Sie beide Attribute hinzu, um Layout-Verschiebungen zu vermeiden.

Diese 5 Prüfungen treten meist zusammen auf. Das Ändern der Größe und das Konvertieren der im Bericht genannten Bilder behebt die meisten davon in einem einzigen Durchgang.

Wie viel das eine Seite tatsächlich verbessert

Die Konvertierung in moderne Formate reduziert das Bildgewicht in der Regel um 25 bis 35 Prozent, und eine vorherige Größenanpassung spart oft noch weitaus mehr. Auf einer bildintensiven Seite liegt der kombinierte Effekt oft bei 70 to 80 Prozent.

Die Verbesserung zeigt sich beim Largest Contentful Paint, der misst, wie schnell der Hauptinhalt geladen wird. Diese Messung wird meist von einem einzigen Bild bestimmt, sodass die Reduzierung der Hero-Datei eine Wirkung hat, die in keinem Verhältnis zu ihrem Anteil an der Seite steht. Die Reduzierung von 20 kleinen Bildern ist weniger wichtig als die Reduzierung eines großen Bildes.

Was Sie nicht tun sollten

Entfernen Sie nicht das JPEG-Fallback und konvertieren Sie keine Bilder, die Besucher herunterladen sollen. Beide Fehler opfern eine wichtige Funktion für eine geringfügige Verbesserung des Scores.

Pressemappen, druckbare Leitfäden, herunterladbare Vorlagen und Lieferantendateien sollten im JPEG- oder PNG-Format bleiben, da WebP außerhalb von Browsern oft Probleme bereitet. Wenn Sie diese in modernen Formaten bereitstellen, führt dies zu Supportanfragen von Personen, die sie nicht öffnen können, was mehr kostet als die eingesparte Bandbreite.

Die im Bericht genannten Bilder konvertieren

Konvertieren Sie von den Originaldateien und nicht von den bereits veröffentlichten Versionen, da ein komprimiertes JPEG Qualitätsverluste in die neue Datei mitschleppt. Der Codierer kann vorhandene Artefakte nicht von echten Details unterscheiden und verschwendet Datenrate, um diese zu erhalten.

Ziehen Sie bis zu 500 Dateien auf einmal oder ein ZIP-Archiv direkt hinein, und der gesamte Satz wird in einem einzigen Durchgang konvertiert. Alles läuft in Ihrem Browser auf Ihrem eigenen Prozessor ab, sodass Kunden-Websites, Staging-Assets und unveröffentlichte Seiten niemals einen Server erreichen. Eine vollständige Website-Konvertierung ist in wenigen Minuten abgeschlossen, ohne dass eine einzige Datei das Netzwerk durchquert.

Speichern Sie die konvertierten Dateien mit übereinstimmenden Namen neben den Originalen, damit das Markup des picture-Elements nach einem vorhersehbaren Muster generiert werden kann, anstatt für jedes Bild manuell bearbeitet zu werden. Ein Ordner mit hero.jpg, hero.webp und hero.avif lässt sich leicht in Templates einbinden und macht die nächste Formatmigration zu einer einfachen Stapelkonvertierung statt zu einer Neugestaltung jeder einzelnen Seite.