Die moderne Web-Performance wird größtenteils durch die Optimierung von Ressourcen bestimmt, wobei der Schwerpunkt auf Bildern liegt. Bilder machen einen erheblichen Teil der von Websites verwendeten Daten aus. Daher kann die Bereitstellung von Bildern in den effizientesten Formaten einen tiefgreifenden Einfluss auf die Leistung der Website, das Benutzererlebnis und das SEO-Ranking haben. Das Auditing-Tool Lighthouse von Google liefert wichtige Erkenntnisse, um diese Optimierung zu erreichen. Eine davon ist die Möglichkeit, „Bilder in modernen Formaten bereitzustellen“. Diese Funktion, die sich im Abschnitt „Möglichkeiten“ des Lighthouse-Berichts befindet, identifiziert alle Bilder auf einer Website, die in älteren Formaten vorliegen, und weist auf potenzielle Leistungssteigerungen hin, die durch die Bereitstellung dieser Bilder in modernen Formaten wie AVIF und WebP erzielt werden könnten.
Das Problem mit herkömmlichen Bildformaten
Viele Websites verwenden für ihre Bilder immer noch traditionelle Formate wie JPEG, PNG und GIF. Obwohl diese Formate ihre Stärken haben und dem Web seit Jahren gute Dienste leisten, sind sie in Bezug auf Komprimierung und Qualität nicht so effizient wie einige der modernen Formate. Diese älteren Formate führen häufig zu größeren Dateigrößen, was die Leistung der Website verlangsamen kann, insbesondere für Benutzer mit langsameren Internetverbindungen oder auf Mobilgeräten.
Das Versprechen moderner Bildformate
In den letzten Jahren haben sich zwei Formate als überlegene Optionen für Webbilder herausgestellt: AVIF und WebP.
AVIF oder AV1 Image File Format basiert auf dem AV1-Videokodierungsformat, das von der Alliance for Open Media entwickelt wurde. Es bietet erhebliche Komprimierungsgewinne im Vergleich zu älteren Formaten, was bedeutet, dass es qualitativ hochwertige Bilder bei viel kleineren Dateigrößen liefern kann. Dies macht AVIF zu einer hervorragenden Wahl für Websites mit hohem Bildinhalt.
Auch das von Google entwickelte WebP bietet beeindruckende Komprimierungsfunktionen, insbesondere für Bilder mit Transparenz (Alphakanäle), wo es PNG deutlich übertrifft. Dieses Format unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung, sodass Entwickler Bildqualität und Dateigröße entsprechend ihren Anforderungen anpassen können.
Mit Lighthouse Chancen erkennen
Das Lighthouse-Tool trägt maßgeblich dazu bei, Möglichkeiten zur Verbesserung der Website-Leistung zu erkennen. Durch die Analyse der Ressourcen einer Site wird eine Liste aller Bilder bereitgestellt, die derzeit in älteren Formaten bereitgestellt werden. Dieser detaillierte Bericht zeigt die potenziellen Einsparungen in Kilobyte (KB) oder Megabyte (MB), die durch die Konvertierung dieser Bilder in moderne Formate erzielt werden könnten.
Für jedes Bild berechnet Lighthouse die Differenz zwischen der aktuellen Dateigröße und der geschätzten Dateigröße, wenn es in einem modernen Format bereitgestellt würde. Anschließend werden diese potenziellen Einsparungen dargestellt und Entwicklern klare Hinweise zu den möglichen Leistungssteigerungen gegeben, die erzielt werden könnten.
Umsetzung der Änderung
Nachdem Sie die zu konvertierenden Bilder identifiziert haben, besteht der nächste Schritt darin, AVIF- oder WebP-Versionen dieser Bilder zu erstellen. Hierfür stehen mehrere Tools und Bibliotheken zur Verfügung, darunter Squoosh , eine von Google entwickelte Web-App zur Online-Bildkomprimierung, und ImageMagick , eine robuste Software-Suite, die die Bildkonvertierung und -bearbeitung übernimmt.
Sobald die Bilder konvertiert sind, müssen sie den Benutzern auf eine Weise bereitgestellt werden, die mit ihren Browsern kompatibel ist. Dies erfordert häufig die Verwendung des HTML-Elements „picture“ oder ähnlicher Methoden, die es ermöglichen, je nach den Fähigkeiten des Browsers unterschiedliche Versionen eines Bildes bereitzustellen.
Abschluss
Die Bereitstellung von Bildern in modernen Formaten ist ein entscheidender Bestandteil der Web-Performance-Optimierung. Durch die Nutzung der Lighthouse-Funktion „Bilder in modernen Formaten bereitstellen“ können Webentwickler die potenziellen Einsparungen, die diese Formate bieten, leicht erkennen. Die Nutzung von AVIF und WebP verbessert nicht nur die Leistung der Website; Es verbessert das Benutzererlebnis und könnte sich positiv auf SEO-Rankings auswirken. Moderne Bildformate bleiben erhalten und ihr volles Potenzial auszuschöpfen, ist eine Chance, die man sich nicht entgehen lassen sollte.
