Responsive Bilder vorab laden

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Sie können responsive Bilder vorab laden, wodurch sie deutlich schneller geladen werden können. So kann der Browser das richtige Bild aus einem srcset ermitteln, bevor das img-Tag gerendert wird.

Responsive Bilder – Übersicht

Unterstützte Browser

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Angenommen, Sie surfen auf einem Bildschirm mit einer Breite von 300 Pixeln und die Seite fordert ein Bild mit einer Breite von 1.500 Pixeln an. Auf dieser Seite wurden viele Ihrer mobilen Daten verschwendet, da Ihr Display diese zusätzliche Auflösung nicht nutzen kann. Idealerweise sollte der Browser eine Version des Bildes abrufen, die nur etwas breiter als die Bildschirmgröße ist, z. B. 325 Pixel. So erhalten Sie ein hochauflösendes Bild, ohne Daten zu verschwenden, und das Bild wird schneller geladen.

Mit responsiven Bildern können Browser unterschiedliche Bildressourcen für unterschiedliche Geräte abrufen. Wenn Sie kein Bild-CDN verwenden, speichern Sie für jedes Bild mehrere Dimensionen und geben Sie sie im Attribut srcset an. Der Wert w gibt dem Browser die Breite jeder Version an, damit er die richtige Version für jedes Gerät auswählen kann:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Übersicht über das Vorabladen

Unterstützte Browser

  • Chrome: 50.
  • Edge: ≤ 79
  • Firefox: 85.
  • Safari: 11.1.

Quelle

Beim Vorabladen können Sie dem Browser wichtige Ressourcen mitteilen, die so schnell wie möglich geladen werden sollen, bevor sie in HTML gefunden werden. Das ist besonders nützlich für Ressourcen, die nicht leicht zu finden sind, z. B. Schriftarten in Stylesheets, Hintergrundbilder oder Ressourcen, die über ein Script geladen werden.

<link rel="preload" as="image" href="important.png">

imagesrcset und imagesizes

Das <link>-Element verwendet die Attribute imagesrcset und imagesizes, um responsive Bilder vorab zu laden. Verwenden Sie sie zusammen mit <link rel="preload">. Die Syntax von srcset und sizes wird im <img>-Element verwendet.

Wenn Sie beispielsweise ein responsives Bild mit folgendem Code vorladen möchten:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Fügen Sie dazu Folgendes in den <head>-Code Ihrer HTML-Datei ein:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

Dadurch wird eine Anfrage mit derselben Logik zur Ressourcenauswahl wie bei srcset und sizes gestartet.

Anwendungsfälle

Im Folgenden sind einige Anwendungsfälle für das Vorabladen responsiver Bilder aufgeführt.

Dynamisch eingefügte responsive Bilder vorab laden

Angenommen, Sie laden Hero-Bilder als Teil einer Diashow dynamisch und wissen, welches Bild zuerst angezeigt wird. In diesem Fall sollten Sie dieses Bild so schnell wie möglich anzeigen und nicht warten, bis das Skript für die Diashow es geladen hat.

Sie können dieses Problem auf einer Website mit einer dynamisch geladenen Bildgalerie prüfen:

  1. Öffnen Sie diese Demo der Präsentation in einem neuen Tab.
  2. Drücken Sie Control+Shift+J (oder Command+Option+J auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Netzwerk.
  4. Wählen Sie in der Drop-down-Liste Throttling die Option Schnelles 3G aus.
  5. Entfernen Sie das Häkchen aus dem Kästchen Cache deaktivieren.
  6. Lade die Seite neu.
Der Chrome DevTools-Netzwerkbereich mit einer Abfolge, bei der eine JPEG-Ressource erst nach einigen JavaScript-Code heruntergeladen wird.
Ohne Vorabladen werden die Bilder erst geladen, nachdem der Browser das Script ausgeführt hat. Für das erste Bild ist diese Verzögerung nicht erforderlich.

Wenn Sie hier preload verwenden, wird das Bild schon vorab geladen, damit es angezeigt werden kann, sobald der Browser es benötigt.

Der Bereich „Netzwerk“ in den Chrome-Entwicklertools mit einer abfolge, in der eine JPEG-Ressource parallel zu einigen JavaScript-Dateien heruntergeladen wird.
Wenn Sie das erste Bild vorab laden, wird es gleichzeitig mit dem Script geladen.

Um den Unterschied zu sehen, den das Vorladen macht, sehen Sie sich dieselbe dynamisch geladene Bildergalerie an, aber mit dem ersten Bild vorab geladen. Folgen Sie dazu der Anleitung im ersten Beispiel.

Hintergrundbilder mithilfe von „Bildsatz“ vorab laden

Wenn Sie unterschiedliche Hintergrundbilder für unterschiedliche Bildschirmdichten haben, können Sie sie in Ihrem CSS mit der image-set-Syntax angeben. Der Browser kann dann basierend auf dem DPR des Bildschirms auswählen, welche Version angezeigt werden soll.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

Das Problem mit CSS-Hintergrundbildern besteht darin, dass der Browser sie erst erkennt, nachdem er das gesamte CSS in der <head> der Seite heruntergeladen und verarbeitet hat.

Sie können sich dieses Problem anhand einer Beispielwebsite mit einem responsiven Hintergrundbild ansehen.

Der Chrome DevTools-Netzwerkbereich mit einer abfolge, bei der eine JPEG-Ressource erst nach einigen CSS-Elementen heruntergeladen wird
In diesem Beispiel beginnt der Bilddownload erst, wenn das CSS vollständig heruntergeladen wurde. Das führt zu unnötigen Verzögerungen bei der Bildanzeige.

Durch das Vorabladen responsiver Bilder können Sie diese schneller laden.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

Wenn Sie das Attribut href weglassen, wird bei Browsern, die imagesrcset im <link>-Element nicht unterstützen, aber image-set in CSS, die richtige Quelle heruntergeladen. In diesem Fall profitieren sie jedoch nicht vom Preloading.

In der Demo zum Vorladen responsiver Hintergrundbilder können Sie sich ansehen, wie sich das vorherige Beispiel mit einem vorab geladenen responsiven Hintergrundbild verhält.

Der Chrome DevTools-Bereich „Netzwerk“ mit einem Wasserfall, in dem eine JPEG-Ressource parallel zu einigen CSS-Dateien heruntergeladen wird.
Hier werden das Bild und das CSS gleichzeitig heruntergeladen, sodass das Bild schneller geladen wird.

Praktische Auswirkungen des Vorladens responsiver Bilder

Das Vorladen Ihrer responsiven Bilder kann sie theoretisch beschleunigen. Was bewirkt es aber in der Praxis?

Um diese Frage zu beantworten, habe ich zwei Kopien eines Demo-PWA-Shops erstellt: eine, in der keine Bilder vorab geladen werden, und eine, in der einige davon vorab geladen werden. Da die Website Bilder per Lazy Load mit JavaScript lädt, ist es wahrscheinlich sinnvoll, die Bilder, die im ersten Darstellungsbereich erscheinen, vorab zu laden.

Das führte zu den folgenden Ergebnissen für kein Vorabladen und Vorabladen von Bildern:

Filmstreifenvergleich von WebPageTest, der zeigt, dass vorab geladene Bilder etwa 1,5 Sekunden schneller angezeigt werden.
Wenn Bilder vorab geladen werden, werden sie deutlich schneller angezeigt, was die Nutzerfreundlichkeit erheblich verbessert.

Vorab laden und <picture>

Die Web Performance Working Group erwägt, ein Vorabladen-Äquivalent für srcset und sizes hinzuzufügen, aber nicht für das <picture>-Element, das den Anwendungsfall „Art Direction“ verarbeitet.

Es gibt noch einige technische Probleme beim Vorabladen von <picture>, aber in der Zwischenzeit gibt es Lösungen:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

Die Logik zur Auswahl der Bildquelle des <picture>-Elements durchsucht nacheinander die media-Attribute der <source>-Elemente, sucht das erste übereinstimmende Attribut und verwendet die angehängte Ressource.

Da es beim responsiven Preloading keine „Reihenfolge“ oder „erste Übereinstimmung“ gibt, müssen Sie die Breakpoints in etwa so übersetzen:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

Vorab laden und type

Das Element <picture> unterstützt auch die Übereinstimmung mit der ersten type. So können Sie verschiedene Bildformate angeben, damit der Browser das erste unterstützte Bildformat auswählen kann. Dieser Anwendungsfall wird nicht mit Preloading unterstützt.

Bei Websites, auf denen die Typabgleich-Funktion verwendet wird, empfehlen wir, das Vorladen zu vermeiden und stattdessen den Vorlade-Scanner die Bilder aus den Elementen <picture> und <source> abrufen zu lassen. Dies ist ohnehin eine Best Practice, insbesondere wenn Sie die Abrufpriorität verwenden, um das richtige Bild zu priorisieren.

Auswirkungen auf Largest Contentful Paint (LCP)

Da Bilder Kandidaten für den LCP-Wert (Largest Contentful Paint) sein können, lässt sich der LCP-Wert Ihrer Website durch das Vorabladen von Bildern verbessern.

Unabhängig davon, ob das Bild, das Sie vorladen, responsiv ist, funktioniert das Vorladen am besten, wenn die Bildressource in der ursprünglichen Markup-Nutzlast nicht gefunden werden kann. Außerdem lässt sich die LCP auf Websites, die das Markup auf der Clientseite rendern, stärker verbessern als auf Websites, die das vollständige Markup vom Server senden.