Responsive Bilder vorab laden

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

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

Responsive Bilder – Übersicht

Browser Support

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

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 die 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

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

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" fetchpriority="high">

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" fetchpriority="high">

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:

  1. Öffnen Sie diese Diashow-Demo in einem neuen Tab.
  2. Drücken Sie Control+Shift+J oder Command+Option+J (Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Netzwerk.
  4. Wählen Sie in der Drop-down-Liste Throttling (Drosselung) die Option Fast 3G (Schnelles 3G) aus.
  5. Entfernen Sie das Häkchen aus dem Kästchen Cache deaktivieren.
  6. Aktualisieren Sie die Seite.
Der Bereich „Netzwerk“ in den Chrome-Entwicklertools zeigt ein Wasserfalldiagramm mit einer JPEG-Ressource, die erst nach dem Herunterladen von JavaScript heruntergeladen wird.
Ohne Preloading werden die Bilder erst geladen, nachdem der Browser das Skript ausgeführt hat. Beim ersten Bild ist diese Verzögerung nicht erforderlich.

Wenn Sie hier preload verwenden, 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 dem 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 mit einer JPEG-Ressource, die 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 Darstellung des Bildes.

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

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

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. Sie profitieren in diesem Fall jedoch nicht vom Preload.

In der Demo zum responsiven Hintergrund-Preload können Sie sehen, 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.

Daraus ergaben sich die folgenden Ergebnisse für kein Vorabladen und für Vorabladen von Bildern:

  • 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 deutlich 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 „Reihenfolge“ oder „erste Übereinstimmung“ 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)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Vorab laden und type

Das <picture>-Element unterstützt auch den Abgleich mit dem ersten type. So können Sie verschiedene Bildformate angeben, damit der Browser das erste unterstützte Bildformat auswählen kann.

Dieser Anwendungsfall wird mit Preload nur teilweise unterstützt: Browser sollten Preloads nur für unterstützte Typen herunterladen. So können Sie verhindern, dass Browser nicht unterstützte MIME-Typen vorab laden, indem Sie Folgendes in den Preload aufnehmen:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Anders als bei <picture> wird jedoch nicht beim ersten unterstützten Typ angehalten. Wenn also mehrere Preloads für mehrere Typen enthalten sind, werden alle Bilder vorgeladen:

Nicht so: Mehrere Typen vorab laden:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Stattdessen sollten Sie den bevorzugten Typ vorab laden:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Das Vorladen des neuesten Formats (in diesem Fall AVIF) dient als progressive Verbesserung. Browser, die diesen Typ unterstützen, profitieren davon, andere Browser nicht.

Bei Websites, auf denen das Bild im HTML-Code schnell gefunden werden kann, empfehlen wir, Preload zu vermeiden und die Bilder stattdessen vom Preload-Scanner 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. So kann das genaue Bild je nach Browserunterstützung vorab geladen werden. Außerdem wird das Risiko verringert, dass ein Preload durch Änderungen an Bildern oder Seiten veraltet ist.

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.