Responsive Bilder vorab laden

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Veröffentlicht am 30. September 2019, zuletzt aktualisiert am 10. Juli 2026

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

Übersicht zu responsiven Bildern

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 Ihre Bildschirmgröße ist, z. B. 325 Pixel. So erhalten Sie ein Bild mit hoher Auflösung, ohne Daten zu verschwenden, und das Bild wird schneller geladen.

Responsive Bilder ermöglichen es Browsern, verschiedene Bildressourcen für verschiedene Geräte abzurufen. Wenn Sie kein Image-CDN verwenden, speichern Sie mehrere Abmessungen für jedes Bild und geben Sie sie im srcset Attribut 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. Dies ist besonders nützlich für Ressourcen, die nicht leicht zu finden sind, z. B. Schriftarten in Stylesheets, Hintergrundbilder oder Ressourcen, die aus einem Skript geladen werden.

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

imagesrcset und imagesizes

Das <link> Element verwendet die imagesrcset und imagesizes Attribute, um responsive Bilder vorab zu laden. 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 wurde:

 <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 zur Ressourcenauswahl initiiert, die von srcset und sizes verwendet wird.

Anwendungsfälle

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

Dynamisch eingefügte responsive Bilder vorab laden

Angenommen, Sie laden Hero-Images dynamisch als Teil einer Diashow und wissen, welches Bild zuerst angezeigt wird. In diesem Fall möchten Sie dieses Bild wahrscheinlich so schnell wie möglich anzeigen und nicht warten, bis es vom Skript der Diashow geladen wird.

Sie können 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 auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Netzwerk.
  4. Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus.
  5. Deaktivieren Sie das Kästchen Cache deaktivieren.
  6. Aktualisieren Sie die Seite.
Der Bereich „Netzwerk“ in den Chrome-Entwicklertools zeigt ein Wasserfalldiagramm, in dem eine JPEG-Ressource erst nach dem Herunterladen von JavaScript heruntergeladen wird.
Ohne Vorabladen werden die Bilder erst geladen, nachdem der Browser das Skript ausgeführt hat. Für das erste Bild ist diese Verzögerung unnötig.

Wenn Sie hier preload verwenden, wird das Bild vorzeitig geladen, 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, wird es gleichzeitig mit dem Skript geladen.

Wenn Sie den Unterschied sehen möchten, den das Vorabladen macht, untersuchen Sie dieselbe dynamisch geladene Bildergalerie, aber mit dem ersten Bild, das vorab geladen wurde . Folgen Sie dazu der Anleitung im ersten Beispiel.

Hintergrundbilder mit image-set vorab laden

Wenn Sie unterschiedliche Hintergrundbilder für unterschiedliche Bildschirmdichten haben, können Sie sie in Ihrem CSS mit der Syntax image-set angeben. Der Browser kann dann anhand des Bildschirms DPRauswählen, welches Bild 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>Bereich der Seite heruntergeladen und verarbeitet hat.

Sie können dieses Problem auf einer Beispielwebsite mit einem responsiven Hintergrundbild untersuchen.

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 beginnt der Bilddownload erst, wenn das CSS vollständig heruntergeladen wurde. Dadurch wird die Anzeige des Bildes unnötig verzögert.

Mit dem Vorabladen responsiver Bilder können Sie diese Bilder schneller laden.

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

Wenn Sie das href Attribut weglassen, können Sie dafür sorgen, dass Browser, die imagesrcset im <link> Element nicht unterstützen, aber image-set in CSS unterstützen, die richtige Quelle herunterladen. In diesem Fall profitieren sie jedoch nicht vom Vorabladen.

In der Demo zum Vorabladen responsiver Hintergründe können Sie sehen, wie sich das vorherige Beispiel mit einem vorab geladenen responsiven Hintergrundbild in der Demo zum Vorabladen responsiver Hintergründe 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

Durch das Vorabladen responsiver Bilder können sie theoretisch schneller geladen werden. Was passiert aber in der Praxis?

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

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

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

Vorabladen und <picture>

Die Web Performance Working Group diskutiert die Hinzufügung eines Vorabladen-Äquivalents für srcset und sizes, aber nicht für das <picture> Element, das den "Art Direction" Anwendungsfall abdeckt.

Es gibt noch einige technische Probleme, die gelöst werden müssen für das Vorabladen von <picture>, 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 zur Auswahl der Bildquelle des <picture> Elements durchläuft die media Attribute der <source> Elemente in der Reihenfolge, sucht das erste passende und verwendet die angehängte Ressource.

Da das Vorabladen responsiver Bilder keine „Reihenfolge“ oder „erste Übereinstimmung“ kennt, müssen Sie die Breakpoints in etwas wie das Folgende ü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">

Vorabladen und type

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

Dieser Anwendungsfall wird nur teilweise mit dem Vorabladen unterstützt: Browser sollten nur Vorabladungen für unterstützte Typen herunterladen. So können Sie verhindern, dass Browser nicht unterstützte MIME-Typen vorab laden, indem Sie Folgendes in die Vorabladung einfügen:

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

Im Gegensatz zu <picture> wird jedoch nicht beim ersten unterstützten Typ angehalten. Wenn also mehrere Vorabladungen für mehrere Typen enthalten sind, werden alle Bilder vorab geladen:

Das sollten Sie nicht tun: 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 Vorabladen des neuesten Formats (in diesem Fall AVIF) dient als progressive Verbesserung, bei der Browser, die diesen Typ unterstützen, profitieren und andere Browser nicht vom Vorabladen profitieren.

Bei Websites, auf denen das Bild schnell im HTML-Code gefunden werden kann, empfehlen wir, das Vorabladen zu vermeiden und stattdessen den Preload-Scanner die Bilder aus den <picture> und <source> Elementen abrufen zu lassen. Das ist ohnehin eine Best Practice, insbesondere wenn Sie Fetch Priority verwenden, um das richtige Bild zu priorisieren, da so das genakte Bild basierend auf der Browserunterstützung vorab geladen werden kann. Außerdem wird das Risiko vermieden, dass eine Vorabladung durch Änderungen an Bildern oder Seiten im Haupt-Markup veraltet ist.

Auswirkungen auf Largest Contentful Paint (LCP)

Da Bilder Kandidaten für Largest Contentful Paint (LCP) sein können, kann das Vorabladen den LCP-Wert Ihrer Website verbessern.

Unabhängig davon, ob das Bild, das Sie vorab laden, responsiv ist oder nicht, funktionieren Vorabladungen am besten, wenn die Bildressource nicht in der ursprünglichen Markup-Nutzlast zu finden ist. Außerdem wird der LCP-Wert auf Websites, die Markup auf der Clientseite rendern, stärker verbessert als auf Websites, die vollständiges Markup vom Server senden.