Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle Bilder auf Ihrer Seite aufgeführt, die nicht die richtige Größe haben, sowie die potenziellen Einsparungen in Kibibyte (KiB). Passen Sie die Größe dieser Bilder an, um Daten zu sparen und die Seitenladezeit zu verbessern:
So berechnet Lighthouse übergroße Bilder
Für jedes Bild auf der Seite vergleicht Lighthouse die Größe des gerenderten Bilds mit der Größe des tatsächlichen Bilds. Bei der gerenderten Größe wird auch das Pixel-Verhältnis des Geräts berücksichtigt. Wenn die gerenderte Größe mindestens 4 KiB kleiner als die tatsächliche Größe ist, besteht das Image nicht in der Prüfung.
Strategien für die richtige Bildgröße
Idealerweise sollten auf Ihrer Seite nie Bilder bereitgestellt werden, die größer sind als die Version, die auf dem Bildschirm des Nutzers gerendert wird. Alles, was größer ist, führt zu einer Verschwendung von Bytes und verlangsamt die Ladezeit der Seite.
Die Hauptstrategie für die Bereitstellung von Bildern in der passenden Größe wird als „responsive Bilder“ bezeichnet. Bei responsiven Bildern generieren Sie mehrere Versionen jedes Bilds und geben dann mithilfe von Medienabfragen, Darstellungsbereichsdimensionen usw. an, welche Version in Ihrem HTML- oder CSS-Code verwendet werden soll. Außerdem ist RespImageLint ein hilfreiches Bookmarklet, mit dem du die optimalen srcset- und sizes-Werte für deine Bilder ermitteln kannst. Weitere Informationen zu diesen Attributen finden Sie unter Responsive Bilder bereitstellen.
Bild-CDNs sind eine weitere Hauptstrategie für die Bereitstellung von Bildern in der passenden Größe. Stellen Sie sich Bild-CDNs wie Web Service APIs zum Transformieren von Bildern vor.
Eine weitere Strategie ist die Verwendung vektorbasierter Bildformate wie SVG. Mit einer begrenzten Codemenge kann ein SVG-Bild auf eine beliebige Größe skaliert werden. Weitere Informationen finden Sie unter Komplexe Symbole durch SVG ersetzen.
Mit Tools wie gulp-responsive oder responsive-images-generator können Sie das Konvertieren eines Bildes in mehrere Formate automatisieren. Es gibt auch Bild-CDNs, mit denen Sie mehrere Versionen generieren können, wenn Sie ein Bild hochladen oder von Ihrer Seite anfordern.
Stackspezifische Anleitung
AMP
Verwenden Sie die Unterstützung der Komponente amp-img für srcset, um anzugeben, welche Bild-Assets je nach Bildschirmgröße verwendet werden sollen. Weitere Informationen finden Sie unter Responsive Bilder mit „srcset“, „sizes“ und „heights“.
Angular
Sie können das Dienstprogramm BreakpointObserver im Component Dev Kit (CDK) verwenden, um Bildhaltepunkte zu verwalten.
Drupal
Verwenden Sie die integrierte Funktion Responsive Bildstile (verfügbar ab Drupal 8 und höher), wenn Sie Bildfelder über Ansichtsmodi, Ansichten oder mit dem WYSIWYG-Editor hochgeladene Bilder rendern.
Gatsby
Mit dem Plug-in gatsby-image können Sie mehrere kleinere Bilder für Smartphones und Tablets generieren. Für ein effizientes Lazy Loading können auch SVG-Bildplatzhalter erstellt werden.
Joomla
Sie können ein Plug-in für responsive Bilder verwenden.
WordPress
Laden Sie Bilder direkt über die Medienbibliothek hoch, um dafür zu sorgen, dass die erforderlichen Bildgrößen verfügbar sind. Fügen Sie sie dann aus der Mediathek ein oder verwenden Sie das Bild-Widget, um sicherzustellen, dass die optimalen Bildgrößen verwendet werden (einschließlich der für die responsiven Haltepunkte). Verwenden Sie keine Full Size-Bilder, es sei denn, die Abmessungen sind für die Nutzung geeignet. Weitere Informationen finden Sie unter Bilder in Beiträge und Seiten einfügen.