Diese Seite wurde von der Cloud Translation API übersetzt.

Responsive Bilder vorab laden

Barry Pollard

Yoav Weiss

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

Responsive Bilder – Übersicht

Browser Support

Source

Angenommen, Sie surfen im Web 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 Bildschirm mit der zusätzlichen Auflösung nichts anfangen kann. Im Idealfall ruft der Browser eine Version des Bildes ab, die nur etwas breiter als Ihre Bildschirmgröße ist, z. B. 325 Pixel. So wird ein hochauflösendes Bild ohne Datenverschwendung bereitgestellt und das Bild wird schneller geladen.

Mit responsiven Bildern können Browser für verschiedene Geräte unterschiedliche Bildressourcen abrufen. Wenn Sie kein Bild-CDN verwenden, speichern Sie mehrere Dimensionen für jedes Bild und geben Sie sie im Attribut srcset an. Der Wert w gibt dem Browser die Breite jeder Version an, damit er die passende 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 zum Vorabladen

Browser Support

Source

Durch das Vorabladen kann der Browser über wichtige Ressourcen informiert werden, die schnellstmöglich – und sogar, bevor sie in HTML gefunden werden – geladen werden sollen. 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 Skript 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 vorzuladen. Verwenden Sie sie zusammen mit <link rel="preload">, wobei die srcset- und sizes-Syntax im <img>-Element verwendet wird.

Wenn Sie beispielsweise ein responsives Bild vorab laden möchten, das mit Folgendem angegeben wird:

 <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>-Bereich Ihres HTML-Codes 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 für die Ressourcenauswahl wie bei srcset und sizes initiiert.

Anwendungsfälle

Im Folgenden finden Sie einige Anwendungsfälle für das Vorladen responsiver Bilder.

Dynamisch eingefügte responsive Bilder vorab laden

Stellen Sie sich vor, Sie laden Hero-Bilder dynamisch als Teil einer Diashow und wissen, welches Bild zuerst angezeigt wird. In diesem Fall möchten Sie das Bild wahrscheinlich so schnell wie möglich anzeigen und nicht warten, bis es vom Diashow-Script geladen wird.

So können Sie dieses Problem auf einer Website mit einer dynamisch geladenen Bildergalerie untersuchen:

Öffnen Sie diese Diashow-Demo in einem neuen Tab.
Drücken Sie Control+Shift+J oder Command+Option+J (Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Wählen Sie in der Drop-down-Liste Throttling (Drosselung) die Option Fast 3G (Schnelles 3G) aus.
Entfernen Sie das Häkchen aus dem Kästchen Cache deaktivieren.
Aktualisieren Sie die Seite.

Der Bereich „Netzwerk“ in den Chrome-Entwicklertools zeigt ein Wasserfalldiagramm, in dem der Download einer JPEG-Ressource erst nach dem Download von JavaScript beginnt. — Ohne Preloading werden die Bilder erst geladen, nachdem der Browser das Skript ausgeführt hat. Beim ersten Bild ist diese Verzögerung nicht erforderlich.

Durch die Verwendung von preload kann das Bild vorzeitig geladen werden, sodass es angezeigt werden kann, wenn der Browser es benötigt.

Der Bereich „Netzwerk“ in den Chrome-Entwicklertools mit einem Wasserfalldiagramm, in dem eine JPEG-Ressource parallel zu JavaScript heruntergeladen wird. — Wenn Sie das erste Bild vorab laden, kann es gleichzeitig mit dem Skript geladen werden.

Um den Unterschied zu sehen, den das Vorladen ausmacht, untersuchen Sie dieselbe dynamisch geladene Bildergalerie, aber mit dem ersten Bild, das vorab geladen wurde, indem Sie die Schritte aus dem ersten Beispiel ausführen.

Hintergrundbilder mit „image-set“ vorab laden

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

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

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

Sie können sich das Problem auf einer Beispielwebsite mit einem responsiven Hintergrundbild ansehen.

Der Bereich „Netzwerk“ in Chrome DevTools zeigt ein Wasserfalldiagramm, in dem eine JPEG-Ressource erst nach dem Herunterladen von CSS heruntergeladen wird. — In diesem Beispiel wird der Bild-Download erst gestartet, wenn das CSS vollständig heruntergeladen wurde. Dadurch kommt es zu unnötigen Verzögerungen bei der Bildanzeige.

Durch das Vorabladen responsiver Bilder können diese schneller geladen werden.

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

Wenn Sie das Attribut href weglassen, wird dafür gesorgt, dass Browser, die imagesrcset für das <link>-Element nicht unterstützen, aber image-set in CSS unterstützen, die richtige Quelle herunterladen. In diesem Fall profitieren sie jedoch nicht vom Preload.

In dieser Demo können Sie sich ansehen, wie sich das vorherige Beispiel mit einem vorab geladenen responsiven Hintergrundbild verhält.

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

Praktische Auswirkungen des Vorabladens responsiver Bilder

Das Vorladen responsiver Bilder kann sie theoretisch beschleunigen, aber was passiert in der Praxis?

Um diese Frage zu beantworten, habe ich zwei Kopien eines Demo-PWA-Shops erstellt: eine, bei der Bilder nicht vorab geladen werden, und eine, bei der einige Bilder vorab geladen werden. Da auf der Website Bilder per Lazy Load mit JavaScript geladen werden, ist es wahrscheinlich sinnvoll, die Bilder vorzuladen, die im ersten Darstellungsbereich angezeigt werden.

Das hat die folgenden Ergebnisse für kein Vorabladen und für Vorabladen von Bildern ergeben:

Start Render ist gleich geblieben.
Der Speed Index hat sich leicht verbessert (273 ms), da Bilder schneller geladen werden und nicht einen großen Teil der Pixel ausmachen.
Last Painted Hero hat sich um 1, 2 Sekunden verbessert.

WebPageTest-Filmstreifenvergleich, der zeigt, dass vorab geladene Bilder etwa 1,5 Sekunden schneller angezeigt werden. — Bilder werden bei Vorabladen deutlich schneller geladen, was die Nutzerfreundlichkeit erheblich verbessert.

Vorab laden und `<picture>`

Die Web Performance Working Group diskutiert die Einführung eines Preload-Äquivalents für srcset und sizes, aber nicht für das <picture>-Element, das den Anwendungsfall „Art Direction“ abdeckt.

Es gibt noch einige technische Probleme, die behoben werden müssen, bevor das Vorladen von <picture> möglich ist. In der Zwischenzeit gibt es jedoch Problemumgehungen:

<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 für die Auswahl der Bildquelle des <picture>-Elements durchläuft die media-Attribute der <source>-Elemente in der Reihenfolge, findet das erste, das übereinstimmt, und verwendet die angehängte Ressource.

Da beim responsiven Preload kein „order“ oder „first match“ berücksichtigt wird, 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 <picture>-Element unterstützt auch den Abgleich mit dem ersten type, sodass Sie verschiedene Bildformate angeben können, aus denen der Browser das erste unterstützte Bildformat auswählt. Dieser Anwendungsfall wird bei der Vorabladung nicht unterstützt.

Bei Websites, die Typabgleich verwenden, empfehlen wir, Preload zu vermeiden und stattdessen den Preload-Scanner die Bilder aus den Elementen <picture> und <source> abrufen zu lassen. Das ist ohnehin eine Best Practice, insbesondere wenn Sie Fetch Priority verwenden, um das richtige Bild zu priorisieren.

Auswirkungen auf Largest Contentful Paint (LCP)

Da Bilder LCP-Kandidaten (Largest Contentful Paint) sein können, lässt sich die LCP-Zeit Ihrer Website durch Vorabladen verbessern.

Unabhängig davon, ob das vorab geladene Bild responsiv ist, funktionieren Preloads am besten, wenn die Bildressource nicht in der ursprünglichen Markup-Nutzlast enthalten ist. Außerdem lässt sich der LCP auf Websites, auf denen Markup clientseitig gerendert wird, stärker verbessern als auf Websites, auf denen vollständiges Markup vom Server gesendet wird.