Diese Seite wurde von der Cloud Translation API übersetzt.

Responsive Bilder vorab laden

Barry Pollard

Yoav Weiss

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

Responsive Bilder – Übersicht

Unterstützte Browser

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="…">

Vorabladen – Übersicht

Unterstützte Browser

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 Ressourcenauswahllogik initiiert, die auch srcset und sizes verwenden.

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-Bilder als Teil einer Diashow dynamisch und wissen, welches Bild zuerst angezeigt wird. In diesem Fall möchten Sie das Bild wahrscheinlich so schnell wie möglich zeigen und nicht warten, bis es vom Skript für die Bildschirmpräsentation geladen wurde.

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

Öffnen Sie diese Demo der Präsentation in einem neuen Tab.
Drücken Sie Control+Shift+J (oder Command+Option+J auf einem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus.
Entfernen Sie das Häkchen aus dem Kästchen Cache deaktivieren.
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 dieses Problem auf einer Beispielwebsite mit einem responsiven Hintergrundbild prüfen.

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, können 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 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.

Dies führte zu den folgenden Ergebnissen für kein Vorabladen und für Bildvorabladung:

Rendering starten bleibt unverändert.
Der Geschwindigkeitsindex hat sich leicht verbessert (273 ms, da Bilder schneller ankommen und nicht so viel Pixelfläche belegen).
Last Painted Hero konnte deutlich verbessert werden – um 1,2 Sekunden.

WebPageTest-Filmstreifenvergleich mit vorab geladenen Bildern wird etwa 1,5 Sekunden schneller angezeigt. — 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.

Beim Vorabladen von <picture> gibt es immer noch eine Reihe technischer Probleme. In der Zwischenzeit kannst du das Problem so umgehen:

<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 Vorladescanner 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 LCP-Kandidaten (Largest Contentful Paint) sein können, sollten Sie sie vorab laden, um den LCP Ihrer Website zu verbessern.

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