Responsive Bilder vorab laden

Barry Pollard

Yoav Weiss

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

Achtung: Eine oder mehrere Demos auf dieser Seite funktionieren nicht mehr, da Glitch das Hosting beendet hat.

Ihr könnt responsive Bilder vorab laden, damit sie deutlich schneller geladen werden. So kann der Browser das richtige Bild aus einem srcset-Tag identifizieren, bevor er das img-Tag rendert.

Responsive Bilder – Übersicht

Browser Support

• 73
• 79
• 78
• 17.2

Source

Angenommen, Sie surfen auf einem Bildschirm mit einer Breite von 300 Pixeln im Web und die Seite fordert ein Bild mit einer Breite von 1.500 Pixeln an. Diese Seite hat viele mobile Daten verbraucht, weil Ihr Bildschirm mit der zusätzlichen Auflösung nichts anfangen kann. Idealerweise ruft der Browser eine Version des Bildes ab, 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 verschiedene Bildressourcen für unterschiedliche Geräte abrufen. Wenn ihr kein Bild-CDN verwendet, speichert mehrere Größen für jedes Bild und gebt sie im Attribut srcset an. Der Wert w gibt dem Browser die Breite jeder Version an, sodass 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 über das Vorabladen

Browser Support

• 50
• 79
• 85
• 11.1

Source

Mit dem Vorabladen können Sie den Browser über wichtige Ressourcen informieren, die so schnell wie möglich geladen werden sollen, bevor sie im HTML-Code 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 aus einem Skript geladen werden.

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

Wichtig: Vorab geladene Bilder haben vermutlich eine hohe Priorität und sollten daher das Attribut fetchpriority="high" enthalten, da der Vorab-Ladevorgang sonst die Standardpriorität für das Attribut as erhält. Bei Bildern ist dies standardmäßig low, damit der Browser Inhalte, die das Rendering blockieren, gegenüber Bildern priorisieren kann. Weitere Informationen finden Sie unter Ressourcenladen mit der Fetch Priority API optimieren.

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">, wobei die Syntax srcset und sizes im Element <img> verwendet wird.

Wenn Sie beispielsweise ein responsives Bild vorab laden möchten, das so angegeben ist:

 <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 das <head>-Element 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 Ressourcenauswahllogik initiiert, die auch von srcset und sizes verwendet wird.

Warnung: Responsive Bilder werden für das Vorabladen von HTTP-Headern möglicherweise nicht unterstützt, da der Darstellungsbereich erst beim Erstellen des Dokuments definiert wird. Das bedeutet auch, dass sie nicht für das frühe Vorabladen in 103 Early Hints verwendet werden können.

Einige Browser, z. B. Chrome, verarbeiten die Preloads mit diesen Attributen, sobald das Dokument definiert ist und nachdem der erste HTML-Block verarbeitet wurde. Dies wurde für den HTML-Standard vorgeschlagen. Dies kann jedoch immer noch riskant sein, wenn der Darstellungsbereich später im Dokument neu definiert wird (z. B. durch ein spätes <meta name="viewport">-Element), da möglicherweise bereits die falschen responsiven Bilder geladen werden.

Um Probleme zu vermeiden, sollten Sie für responsive Bilder <link rel="preload" href="...">-Elemente anstelle von Link: <...>; rel="preload"-HTTP-Antwortheadern verwenden.

Anwendungsfälle

Im Folgenden finden Sie einige Anwendungsfälle für das Vorabladen 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-Skript 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.

Ohne Vorabladen werden die Bilder erst geladen, nachdem der Browser das Script ausgeführt hat. Beim ersten Bild ist diese Verzögerung nicht erforderlich.

Wenn du hier preload verwendest, wird das Bild vorab geladen, sodass es bereit ist, wenn der Browser es anzeigen muss.

Wenn Sie das erste Bild vorab laden, wird es gleichzeitig mit dem Script geladen.

Wenn Sie sehen möchten, welchen Unterschied das Vorabladen macht, prüfen Sie dieselbe dynamisch geladene Bildergalerie, aber mit dem ersten vorab geladenen Bild. Folgen Sie dazu den Schritten aus dem ersten Beispiel.

Hinweis: Eine weitere Möglichkeit, Verzögerungen beim Laden von Bildern zu vermeiden, besteht darin, ein Markup-basiertes Karussell zu verwenden und die erforderlichen Ressourcen vom Preloader des Browsers abrufen zu lassen. Dieser Ansatz ist jedoch nicht immer praktikabel, z. B. wenn Sie eine vorhandene Komponente wiederverwenden, die nicht auf Markup basiert.

Hintergrundbilder mit „image-set“ vorab laden

Wenn Sie unterschiedliche Hintergrundbilder für verschiedene Pixeldichten haben, können Sie diese in Ihrem CSS mit der Syntax image-set angeben. Der Browser kann dann anhand des DPR des Bildschirms auswählen, welches Bild angezeigt werden soll.

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

Hinweis: Bei dieser Syntax wird ignoriert, dass für diese Funktion sowohl in Chromium- als auch in WebKit-basierten Browsern Anbieterpräfixe erforderlich sind. Wenn Sie diese Funktion verwenden möchten, sollten Sie Autoprefixer (als Onlinetool verfügbar) verwenden, um das Problem automatisch zu beheben.

Das Problem bei CSS-Hintergrundbildern ist, dass der Browser sie erst erkennt, nachdem er alle CSS-Dateien im <head>-Element der Seite heruntergeladen und verarbeitet hat.

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

In diesem Beispiel wird der Bilddownload erst gestartet, 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 Attribut href weglassen, können Sie dafür sorgen, dass Browser, die imagesrcset für das Element <link> 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 Hintergrundbilder können Sie sich ansehen, wie sich das vorherige Beispiel mit einem vorab geladenen responsiven Hintergrundbild verhält.

Hier werden das Bild und das CSS gleichzeitig heruntergeladen, sodass das Bild schneller geladen wird.

Praktische Auswirkungen des Vorabladens responsiver Bilder

Das Vorabladen responsiver Bilder kann sie theoretisch beschleunigen, aber wie sieht das in der Praxis aus?

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 die Website Bilder mithilfe von JavaScript per Lazy Loading lädt, ist es wahrscheinlich von Vorteil, die Bilder vorab zu laden, die im ersten Darstellungsbereich angezeigt werden.

Das führte zu den folgenden Ergebnissen 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 keinen großen Teil des Pixelbereichs einnehmen.
• Last Painted Hero hat sich um 1, 2 Sekunden verbessert.

Bilder werden deutlich schneller geladen, wenn sie vorab geladen werden, was die Nutzerfreundlichkeit erheblich verbessert.

Vorabladen und <picture>

Die Web Performance Working Group diskutiert derzeit darüber, ein Preload-Äquivalent für srcset und sizes hinzuzufügen, jedoch nicht für das <picture>-Element, das den Anwendungsfall „Art Direction“ abdeckt.

Es gibt noch eine Reihe von technischen Problemen, die für das Vorabladen von <picture> behoben werden müssen. 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 geht die media-Attribute der <source>-Elemente der Reihe nach durch, sucht das erste übereinstimmende Attribut und verwendet die angehängte Ressource.

Da es beim responsiven Vorabladen keine „Reihenfolge“ oder „erste Übereinstimmung“ gibt, müssen Sie die Haltepunkte 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">

Vorabladen und type

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

Dieser Anwendungsfall wird nur teilweise mit Preload unterstützt: Browser sollten nur Preloads für unterstützte Typen herunterladen. Sie können damit verhindern, dass Browser nicht unterstützte MIME-Typen vorab laden, indem Sie Folgendes in den Preload 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:

Nicht empfohlen – 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 so vorgehen – 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, von der Browser profitieren, die diesen Typ unterstützen, während andere Browser nicht vom Vorabladen profitieren.

Bei Websites, auf denen das Bild im HTML-Code schnell gefunden werden kann, empfehlen wir, auf das Vorabladen zu verzichten 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 die Abrufpriorität verwenden, um das entsprechende Bild zu priorisieren, da so das genaue Bild basierend auf der Browserunterstützung vorab geladen werden kann. Außerdem wird so das Risiko beseitigt, dass ein Preload im Haupt-Markup veraltet, wenn sich Bilder oder Seiten ändern.

Auswirkungen auf den Largest Contentful Paint (LCP)

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

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