Sie haben die Möglichkeit, responsive Bilder vorab zu laden. Ihre Bilder werden dann deutlich schneller geladen, da der Browser das richtige Bild aus einer srcset identifizieren kann, bevor das img-Tag gerendert wird.
Responsive Bilder – Übersicht
Unterstützte Browser
- 73
- 79
- 78
- 17,2
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. Diese Seite hat viele mobile Daten verschwendet, da Ihr Bildschirm mit dieser 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 wird ein hochauflösendes Bild ohne Datenverlust sichergestellt und das Bild schneller geladen.
Mit responsiven Bildern können Browser unterschiedliche Bildressourcen für unterschiedliche Geräte abrufen. Wenn Sie kein Bild-CDN verwenden, speichern Sie mehrere Abmessungen für jedes Bild und geben Sie diese im Attribut srcset an. Über den Wert w wird dem Browser die Breite jeder Version mitgeteilt, 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="…">
Vorabladen – Übersicht
Durch Vorabladen können Sie den Browser über wichtige Ressourcen informieren, die so schnell wie möglich geladen werden sollen, bevor sie in HTML erkannt werden. Dies ist besonders nützlich für Ressourcen, die nicht leicht auffindbar sind, z. B. Schriftarten in Stylesheets, Hintergrundbilder oder aus einem Skript geladene Ressourcen.
<link rel="preload" as="image" href="important.png">
imagesrcset und imagesizes
Das Element <link> 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 mit Folgendem angegeben wird:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Dazu können Sie Folgendes in die <head> des HTML-Codes einfügen:
<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 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
Stellen Sie sich vor, Sie laden Hero-Images als Teil einer Diashow dynamisch und wissen, welches Bild zuerst angezeigt wird. In diesem Fall sollten Sie dieses Bild so schnell wie möglich zeigen und nicht warten, bis es vom Diashow-Skript geladen wird.
Sie können sich das Problem auf einer Website mit einer dynamisch geladenen Bildergalerie ansehen:
- Öffnen Sie diese Demo-Diashow in einem neuen Tab.
- Drücke
Control+Shift+J(oderCommand+Option+Jauf 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.
- Deaktivieren Sie das Kästchen Cache deaktivieren.
- Lade die Seite neu.
Wenn Sie preload hier verwenden, kann das Bild vorzeitig geladen werden, sodass es angezeigt werden kann, wenn es im Browser angezeigt werden muss.
Um zu sehen, wie sich das Vorabladen auswirkt, prüfen Sie dieselbe dynamisch geladene Bildergalerie, jedoch mit dem ersten vorab geladenen Bild. Folgen Sie dazu den Schritten im ersten Beispiel.
Hintergrundbilder mit dem Bildsatz 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 basierend auf dem DPR des Bildschirms auswählen, welcher 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 alle CSS im <head> der Seite heruntergeladen und verarbeitet wurden.
Sie können sich das Problem auf einer Beispielwebsite mit einem responsiven Hintergrundbild ansehen.
Mit responsivem Vorabladen werden diese Bilder schneller geladen.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Durch Weglassen des href-Attributs sorgen Sie dafür, dass Browser, die imagesrcset im <link>-Element nicht unterstützen, aber image-set in CSS unterstützen, die richtige Quelle herunterladen. Allerdings profitieren sie in diesem Fall nicht von der Vorabladung.
Wie sich das vorherige Beispiel mit einem vorinstallierten responsiven Hintergrundbild verhält, können Sie in der Demo zum responsiven Vorabladen prüfen.
Praktische Effekte beim Vorabladen responsiver Bilder
Das Vorabladen Ihrer responsiven Bilder kann sie theoretisch beschleunigen, aber was macht das in der Praxis?
Ich habe zwei Kopien eines Demo-PWA-Shops erstellt: eine, mit der Bilder nicht vorab geladen werden, und eine, die einige davon vorab lädt. Da auf der Website Bilder mit JavaScript per Lazy Loading geladen werden, empfiehlt es sich wahrscheinlich, die im ersten Darstellungsbereich angezeigten Bilder vorab zu laden.
Es gab die folgenden Ergebnisse für no preload und image preload:
- Start Render (Rendern starten) blieb unverändert.
- Der Geschwindigkeitsindex hat sich geringfügig verbessert (273 ms, da Bilder keinen großen Teil des Pixelbereichs einnehmen).
- Last Painted Hero hat sich um 1, 2 Sekunden erheblich verbessert.
Vorabladen und <picture>
In der Arbeitsgruppe „Webleistung“ wird erläutert, wie ein Vorlade-Äquivalent für srcset und sizes hinzugefügt wird, jedoch nicht für das Element <picture>, das den Anwendungsfall Art Direction verarbeitet.
Es gibt noch eine Reihe von technischen Problemen beim Vorabladen von <picture>. In der Zwischenzeit gibt es jedoch Umgehungen:
<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 der Reihe nach die media-Attribute der <source>-Elemente durch, sucht nach dem ersten übereinstimmenden Element und verwendet die angehängte Ressource.
Da das responsive Vorabladen kein Konzept von „Reihenfolge“ oder „erste Übereinstimmung“ hat, müssen Sie die Haltepunkte so umwandeln:
<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)">
Vorabladen und type
Das <picture>-Element unterstützt auch den Abgleich im ersten type, sodass Sie verschiedene Bildformate bereitstellen können, damit der Browser das erste unterstützte Bildformat auswählen kann. Dieser Anwendungsfall wird durch Vorabladen nicht unterstützt.
Bei Websites, für die Typabgleich verwendet wird, empfehlen wir, das Vorabladen zu vermeiden und stattdessen den Preload-Scanner die Bilder aus den Elementen <picture> und <source> abzurufen. Dies ist sowieso eine Best Practice, insbesondere wenn Sie Prioritätshinweise zur Priorisierung des entsprechenden Images verwenden.
Auswirkungen auf Largest Contentful Paint (LCP)
Da Bilder LCP-Kandidaten (Largest Contentful Paint) sein können, kann deren Vorabladen den LCP Ihrer Website verbessern.
Unabhängig davon, ob das 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 auf Websites, die Markup clientseitig rendern, stärker verbessert als auf Websites, die vollständiges Markup vom Server senden.