Im Bereich „Empfehlungen“ Ihres Lighthouse-Berichts werden alle Bilder auf Ihrer Seite aufgeführt, die nicht die richtige Größe haben, zusammen mit den 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 Bildes mit der Größe des tatsächlichen Bildes. 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 Bild den Audit nicht.
Strategien für die richtige Dimensionierung von Bildern
Im Idealfall sollten auf Ihrer Seite keine Bilder ausgeliefert werden, die größer als die Version sind, die auf dem Bildschirm des Nutzers dargestellt wird. Alles, was darüber hinausgeht, führt nur zu verschwendeten Bytes und verlangsamt die Seitenladezeit.
Die wichtigste Strategie zum Bereitstellen von Bildern in passender Größe wird als „responsive Bilder“ bezeichnet. Bei responsiven Bildern generieren Sie mehrere Versionen jedes Bildes und geben dann in Ihrem HTML- oder CSS-Code an, welche Version verwendet werden soll. Dazu nutzen Sie Medienabfragen, Darstellungsbereichsdimensionen usw. Außerdem ist RespImageLint ein nützliches Bookmarklet, mit dem Sie die optimalen srcset- und sizes-Werte für Ihre Bilder ermitteln können. Weitere Informationen zu diesen Attributen finden Sie unter Responsive Bilder bereitstellen.
Bild-CDNs sind eine weitere wichtige Strategie zum Bereitstellen von Bildern in passender Größe. Bild-CDNs können als Webdienst-APIs zum Transformieren von Bildern betrachtet werden.
Eine weitere Strategie besteht darin, vektorbasierte Bildformate wie SVG zu verwenden. Mit einer endlichen Menge an Code kann ein SVG-Bild auf jede beliebige Größe skaliert werden. Weitere Informationen finden Sie unter Komplexe Symbole durch SVG ersetzen.
Tools wie gulp-responsive oder responsive-images-generator können helfen, die Konvertierung eines Bildes in mehrere Formate zu automatisieren. Es gibt auch Bild-CDNs, mit denen Sie mehrere Versionen generieren können, entweder beim Hochladen eines Bildes oder beim Anfordern des Bildes von Ihrer Seite.
Stack-spezifische Anleitung
AMP
Verwenden Sie die Unterstützung der Komponente amp-img für srcset, um anzugeben, welche Bild-Assets auf Grundlage der Bildschirmgröße verwendet werden sollen. Weitere Informationen
Angular
Sie können das BreakpointObserver-Dienstprogramm im Component Dev Kit (CDK) verwenden, um Haltepunkte in Bildern zu verwalten.
Drupal
Achte darauf, dass du die von Drupal bereitgestellten responsiven Bildstile (Responsive Image Styles) verwendest. Verwenden Sie die responsiven Bildstile für Bildfelder, die über Anzeigemodi gerendert werden, sowie für Bilder, die über den WYSIWYG-Editor hochgeladen wurden.
Gatsby
Verwenden Sie das gatsby-image-Plug-in, um mehrere kleinere Bilder für Smartphones und Tablets zu generieren. Außerdem können SVG-Bildplatzhalter für effizientes Lazy Loading erstellt werden.
Joomla
Sie können ein Plug-in für responsive Bilder verwenden.
WordPress
Sie haben die Möglichkeit, Bilder direkt über die Medienbibliothek hochzuladen, damit die erforderlichen Bildgrößen verfügbar sind. Die Bilder können Sie dann aus der Medienbibliothek einfügen oder auch das Bild-Widget nutzen, damit die optimalen Bildgrößen verwendet werden (einschließlich derjenigen für die responsiven Haltepunkte). Bilder in Full Size sollten nur verwendet werden, wenn die Abmessungen für die entsprechende Nutzung geeignet sind. Weitere Informationen zum Einfügen von Bildern in Beiträge und Seiten