Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle Bilder in älteren Bildformaten aufgelistet und die potenziellen Einsparungen angezeigt, die durch die Bereitstellung von AVIF-Versionen dieser Bilder erzielt werden können:
Warum sollte ich Bilder im AVIF- oder WebP-Format bereitstellen?
AVIF und WebP sind Bildformate, die im Vergleich zu älteren JPEG- und PNG-Formaten bessere Komprimierungs- und Qualitätseigenschaften aufweisen. Wenn Sie Ihre Bilder in diesen Formaten statt im JPEG- oder PNG-Format codieren, werden sie schneller geladen und verbrauchen weniger mobile Daten.
AVIF wird in Chrome, Firefox und Opera unterstützt und bietet im Vergleich zu anderen Formaten mit denselben Qualitätseinstellungen kleinere Dateigrößen. Weitere Informationen zu AVIF finden Sie unter Codelab für AVIF-Images bereitstellen.
WebP wird in den aktuellen Versionen von Chrome, Firefox, Safari, Edge und Opera unterstützt und bietet eine bessere verlustbehaftete und verlustfreie Komprimierung für Bilder im Web. Weitere Informationen zu WebP finden Sie unter Ein neues Bildformat für das Web.
So berechnet Lighthouse mögliche Einsparungen
Lighthouse erfasst alle BMP-, JPEG- und PNG-Bilder auf der Seite, konvertiert jedes Bild in WebP, schätzt die AVIF-Dateigröße und meldet die potenziellen Einsparungen basierend auf den Conversion-Zahlen.
Browserkompatibilität
WebP wird von den aktuellen Versionen von Chrome, Firefox, Safari, Edge und Opera unterstützt. AVIF wird nur eingeschränkt unterstützt. Damit ältere Browser unterstützt werden, muss ein Fallback-Bild im PNG- oder JPEG-Format bereitgestellt werden. Unter Wie ermittle ich die Browserunterstützung für WebP? finden Sie eine Übersicht über Fallback-Techniken und die folgende Liste zur Browserunterstützung von Bildformaten.
Informationen zur aktuellen Browserunterstützung für die einzelnen modernen Formate finden Sie in den folgenden Einträgen:
Stackspezifische Anleitung
AMP
Sie können alle amp-img-Komponenten in WebP-Formaten darstellen lassen und ein geeignetes Fallback für andere Browser angeben.
Drupal
Sie können auf Ihrer Website ein Modul zur Nutzung von WebP-Bildformaten installieren und konfigurieren. Solche Module generieren automatisch eine WebP-Version Ihrer hochgeladenen Bilder, um die Ladezeiten zu optimieren.
Joomla
Sie können ein plugin oder einen Dienst verwenden, der Ihre hochgeladenen Bilder automatisch in die optimalen Formate konvertiert.
Magento
Auf dem Magento Marketplace findest du eine Vielzahl von Drittanbietererweiterungen, mit denen du neuere Bildformate nutzen kannst.
iPhone
Auf iPhones unter iOS 16 funktionieren WEBP-, AVIF-Bilder und WEBM-Videos nicht.
WordPress
Sie können ein plugin oder einen Dienst verwenden, der Ihre hochgeladenen Bilder automatisch in das optimale Format konvertiert.