Sie können responsive Bilder vorab laden, wodurch sie deutlich schneller geladen werden können. So kann der Browser das richtige Bild aus einem srcset
ermitteln, 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="…">
Übersicht über das Vorabladen
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 Logik zur Ressourcenauswahl wie bei srcset
und sizes
gestartet.
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 dynamisch als Teil einer Diashow und wissen, welches Bild zuerst angezeigt wird. In diesem Fall sollten Sie dieses Bild so schnell wie möglich anzeigen und nicht warten, bis das Skript für die Diashow es geladen hat.
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 Throttling 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 sich dieses Problem anhand einer Beispielwebsite mit einem responsiven Hintergrundbild ansehen.
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, wird bei Browsern, die imagesrcset
im <link>
-Element nicht unterstützen, aber image-set
in CSS, die richtige Quelle heruntergeladen. 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.
Das führte zu den folgenden Ergebnissen für kein Vorabladen und Vorabladen von Bildern:
- 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.
Es gibt noch einige technische Probleme beim Vorabladen von <picture>
, aber in der Zwischenzeit gibt es Lösungen:
<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 durch Preloading unterstützt.
Bei Websites, auf denen die Typabgleich-Funktion verwendet wird, empfehlen wir, das Vorladen zu vermeiden und stattdessen den Vorlade-Scanner 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 den Largest Contentful Paint (LCP)
Da Bilder Kandidaten für den LCP-Wert (Largest Contentful Paint) sein können, lässt sich der LCP-Wert Ihrer Website durch das Vorabladen von Bildern verbessern.
Unabhängig davon, ob das Bild, das Sie vorladen, responsiv ist, funktioniert das Vorladen am besten, wenn die Bildressource in der ursprünglichen Markup-Nutzlast nicht gefunden werden kann. Außerdem lässt sich die LCP auf Websites, die das Markup clientseitig rendern, stärker verbessern als auf Websites, die das vollständige Markup vom Server senden.