Im Abschnitt „Empfehlungen“ Ihres Lighthouse-Berichts werden alle Bilder auf Ihrer Seite aufgelistet, 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 zu große Bilder
Lighthouse vergleicht für jedes Bild auf der Seite die Größe des gerenderten Bilds 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 die Prüfung nicht.
Strategien für die richtige Größe von Bildern
Idealerweise sollten auf Ihrer Seite keine Bilder ausgeliefert werden, die größer als die Version sind, die auf dem Bildschirm des Nutzers dargestellt wird. Größere Werte führen nur zu verschwendetem Speicherplatz und verlängern die Seitenladezeit.
Die Hauptstrategie für die Bereitstellung von Bildern in der richtigen Größe wird als „responsive Bilder“ bezeichnet. Bei responsiven Bildern generieren Sie mehrere Versionen jedes Bildes und geben dann mithilfe von Medienabfragen, Darstellungsfensterabmessungen usw. an, welche Version in Ihrem HTML- oder CSS-Code verwendet werden soll. Außerdem ist RespImageLint ein hilfreiches 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 zur Bereitstellung von Bildern in angemessener Größe. Sie können sich Bild-CDNs als Webservice-APIs für die Bildtransformation vorstellen.
Eine weitere Strategie besteht darin, vektorbasierte Bildformate wie SVG zu verwenden. Mit einer begrenzten Menge an Code kann ein SVG-Bild auf jede beliebige Größe skaliert werden. Weitere Informationen finden Sie unter Komplexe Symbole durch SVG ersetzen.
Mit Tools wie gulp-responsive oder responsive-images-generator lassen sich die Umwandlung von Bildern in mehrere Formate automatisieren. Es gibt auch Bild-CDNs, mit denen Sie mehrere Versionen generieren können, entweder beim Hochladen eines Bildes oder beim Anfordern von Ihrer Seite.
Stackspezifische Anleitung
AMP
Mit der Unterstützung des Attributs srcset für die Komponente amp-img können Sie angeben, welche Bild-Assets je nach Bildschirmgröße verwendet werden sollen. Weitere Informationen finden Sie unter Responsive Bilder mit srcset, Größen und Höhen.
Angular
Sie können das BreakpointObserver-Dienstprogramm im Component Dev Kit (CDK) verwenden, um Haltepunkte in Bildern zu verwalten.
Drupal
Achten Sie darauf, die nativen responsiven Bildstile von Drupal zu verwenden. Verwenden Sie responsive Bildstile, wenn Sie Bildfelder in Ansichtsmodi oder über den WYSIWYG-Editor hochgeladene Bilder rendern.
Gatsby
Mit dem Plug-in gatsby-image können Sie mehrere kleinere Bilder für Smartphones und Tablets generieren. Außerdem können SVG-Bildplatzhalter für effizientes Lazy Loading erstellt werden.
Joomla
Du hast die Möglichkeit, ein Plug-in für responsive Bilder zu 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). Verwenden Sie nur dann Full Size-Bilder, wenn die Abmessungen für die entsprechende Nutzung geeignet sind. Weitere Informationen finden Sie unter Bilder in Beiträge und Seiten einfügen.