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
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
(oderCommand+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.
Wenn Sie hier preload
verwenden, wird das Bild schon vorab geladen, damit es angezeigt werden kann, sobald der Browser es benötigt.
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.
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.
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.
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.