Diese Seite wurde von der Cloud Translation API übersetzt.

Responsive Bilder vorab laden

Barry Pollard

Yoav Weiss

Sie können responsive Bilder vorab laden, damit sie geladen werden. erheblich schneller, da der Browser so leichter das richtige Bild aus einem srcset, bevor er das img-Tag rendert.

Responsive Bilder – Übersicht

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Angenommen, Sie surfen im Web auf einem Bildschirm mit einer Breite von 300 Pixeln und die Seite fordert ein Bild mit einer Breite von 1500 Pixel an. Diese Seite hat viel von Ihrem Mobilgerät verschwendet da Ihr Bildschirm mit dieser zusätzlichen Auflösung nichts anfangen kann. Idealerweise ruft der Browser eine Version des Bildes ab, die nur eine kleine die breiter als der Bildschirm ist, z. B. 325 Pixel. Dadurch wird eine hochauflösendes Bild ohne Datenverlust und lässt das Bild schneller laden.

Responsive Bilder lassen Browser unterschiedliche Bildressourcen für unterschiedliche Geräte abrufen. Wenn Sie keine ein Bild-CDN verwenden und für jede ein Bild in mehreren Dimensionen speichern Bild und geben Sie sie im Attribut srcset an. Der Wert w teilt dem die Breite jeder Version anpassen, sodass die passende Version für Auf jedem Gerät:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Vorabladen – Übersicht

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Durch Vorabladen informieren Sie den Browser über wichtige Ressourcen, die Sie so schnell wie möglich laden möchten, bevor sie die im HTML-Code gefunden wurden. Dies ist besonders nützlich für Ressourcen, z. B. Schriftarten in Stylesheets, Hintergrundbilder oder Ressourcen, die von einem Skript geladen wurden.

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

`imagesrcset` und `imagesizes`

Das Element <link> verwendet die Attribute imagesrcset und imagesizes, um responsive Bilder vorab laden. Sie können sie zusammen mit <link rel="preload"> mit der Syntax srcset und sizes, die im <img>-Element.

Wenn Sie beispielsweise ein responsives Bild vorab laden möchten, das folgendermaßen 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">

Fügen Sie dazu Folgendes in die HTML-Datei <head> 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, 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

Stellen Sie sich vor, Sie laden Hero-Images dynamisch als Teil einer Bildschirmpräsentation und welches Bild zuerst angezeigt wird. In diesem Fall dieses Bild so schnell wie möglich anzeigen und nicht warten, bis das Skript für die Bildschirmpräsentation laden Sie es.

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

Demo zur Diashow öffnen 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.
Deaktivieren Sie das Kästchen Cache deaktivieren.
Lade die Seite neu.

Der Bereich „Network“ (Netzwerk) in Chrome DevTools, in dem ein Wasserfall mit einer JPEG-Ressource zu sehen ist, die erst nach etwas JavaScript heruntergeladen wird. — Ohne Vorabladen werden die Bilder erst geladen, nachdem der Browser das Skript ausgeführt hat. Für das erste Bild ist diese Verzögerung nicht erforderlich.

Wenn Sie preload hier verwenden, wird das Bild vorzeitig geladen, kann angezeigt werden, wenn der Browser sie anzeigen muss.

Der Bereich „Netzwerk“ in Chrome DevTools mit einem Wasserfall, bei dem parallel zu JavaScript eine JPEG-Ressource heruntergeladen wird. — Wenn das erste Bild vorab geladen wird, beginnt der Ladevorgang zeitgleich mit dem Script.

Den Unterschied beim Vorabladen sehen Sie, wenn Sie dieselben dynamisch geladenen Bildergalerie, aber das erste Bild ist bereits geladen indem Sie den Schritten aus dem ersten Beispiel folgen.

Hintergrundbilder mit "image-set" vorab laden

Wenn Sie unterschiedliche Hintergrundbilder für unterschiedliche Bildschirmdichten haben, können Sie und gib sie im CSS mit der Syntax image-set an. Der Browser kann dann je nachdem, was angezeigt werden soll, DPR:

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

Das Problem bei CSS-Hintergrundbildern besteht darin, dass der Browser sie erst nachdem das gesamte CSS im <head> der Seite heruntergeladen und verarbeitet wurde.

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

Der Bereich „Network“ (Netzwerk) in Chrome DevTools, in dem ein Wasserfall mit einer JPEG-Ressource zu sehen ist, der erst nach einigen CSS-Dateien heruntergeladen wird. — In diesem Beispiel wird der Bilddownload erst gestartet, wenn das CSS vollständig heruntergeladen wurde, was zu einer unnötigen Verzögerung bei der Anzeige des Bildes führt.

Mit der Funktion „Vorabladen von responsiven Bildern“ lassen sich diese Bilder schneller laden.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

Ohne das Attribut href können Sie dafür sorgen, dass Browser, die die imagesrcset für das <link>-Element unterstützen, aber image-set in CSS lädt die richtige Quelle herunter. Sie profitieren jedoch nicht vom Vorabladen in in diesem Fall.

Sie können überprüfen, wie sich das vorherige Beispiel mit einer vorab geladenen responsiven Hintergrundbild in der Demo zum Vorabladen des responsiven Hintergrunds angezeigt.

Im Bereich „Netzwerk“ in Chrome DevTools wird ein Wasserfall mit einer JPEG-Ressource angezeigt, die parallel zu einigen CSS heruntergeladen wird. — Hier werden das Bild und der CSS-Code gleichzeitig heruntergeladen, damit das Bild schneller geladen wird.

Praktische Auswirkungen des Vorabladens responsiver Bilder

Durch das Vorabladen responsiver Bilder können sie theoretisch schneller werden. in der Praxis umsetzen?

Zur Antwort: Ich habe zwei Kopien eines Demo-PWA-Shops erstellt: eine, in der keine Bilder vorab geladen werden, und einen, der einige davon vorab lädt. Da die Website Lazy Bilder mithilfe von JavaScript lädt, profitieren sie höchstwahrscheinlich von die im ersten Darstellungsbereich erscheinen.

Daraus ergeben sich folgende Ergebnisse für kein Vorabladen und für das Vorabladen von Bildern:

Rendering starten ist gleich geblieben.
Geschwindigkeitsindex etwas verbessert (273 ms, da die Bilder schneller ankommen, nehmen sie keinen großen Teil ein) des Pixelbereichs).
Last Painted Hero um 1, 2 Sekunden deutlich verbessert.

WebPageTest-Filmstreifenvergleich mit vorab geladenen Bildern wird etwa 1,5 Sekunden schneller angezeigt. — Bilder werden deutlich schneller geladen, wenn sie vorab geladen werden. Dies verbessert die Nutzerfreundlichkeit erheblich.

Vorabladen und `<picture>`

Die Arbeitsgruppe für Web-Performance diskutiert das Hinzufügen eines Preload-Äquivalents für srcset und sizes, aber nicht <picture> -Element, das die Art Direction verwaltet für den Anwendungsfall.

Beim Vorabladen von <picture> gibt es noch eine Reihe von technischen Problemen. In der Zwischenzeit gibt es folgende Behelfslö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 Auswahllogik der Bildquelle des <picture>-Elements geht über media der <source>-Elemente sortiert, findet das erste Element, stimmt überein und verwendet die angehängte Ressource.

Beim responsiven Vorabladen gibt es keinen Begriff der Reihenfolge. oder die erste Übereinstimmung, die Haltepunkte in etwa Folgendes zu ü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)">

Vorabladen und `type`

Das Element <picture> unterstützt auch einen Abgleich mit dem ersten type, damit Sie Folgendes tun können: verschiedene Bildformate bereitstellen, damit der Browser das erste Bildformat auswählen kann unterstützt wird. Dieser Anwendungsfall wird beim Vorabladen nicht unterstützt.

Bei Websites mit Typabgleich sollten Sie das Vorabladen vermeiden und nimmt der Vorab-Scanner die Bilder <picture>- und <source>-Elemente. Das ist sowieso eine Best Practice, besonders wenn Abrufpriorität zur Priorisierung von das entsprechende Bild.

Auswirkungen auf Largest Contentful Paint (LCP)

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

Unabhängig davon, ob das vorab geladene Bild responsiv ist, am besten, wenn die Bildressource in der anfänglichen Markup-Nutzlast nicht sichtbar ist. Außerdem wird der LCP-Wert auf Websites verbessert, die Markup auf dem Client rendern als auf Websites, die das komplette Markup vom Server senden.