Bilder sind oft die ressourcenintensivste und am häufigsten verwendete Ressource im Web. Durch die Optimierung von Bildern lässt sich die Leistung Ihrer Website erheblich steigern. In den meisten Fällen bedeutet das Optimieren von Bildern, dass die Netzwerkzeit durch Senden von weniger Byte verkürzt wird. Sie können aber auch die Anzahl der an den Nutzer gesendeten Byte optimieren, indem Sie Bilder bereitstellen, die für das Gerät des Nutzers richtig dimensioniert sind.
Bilder können einer Seite mit den Elementen <img>
oder <picture>
oder mit der CSS-Eigenschaft background-image
hinzugefügt werden.
Image size
Die erste Optimierung, die Sie bei der Verwendung von Bildressourcen vornehmen können, besteht darin, das Bild in der richtigen Größe anzuzeigen. In diesem Fall bezieht sich der Begriff Größe auf die Abmessungen eines Bildes. Wenn keine anderen Variablen berücksichtigt werden, wäre ein Bild, das in einem Container mit 500 × 500 Pixeln angezeigt wird, bei einer Größe von 500 × 500 Pixeln optimal. Wenn Sie beispielsweise ein quadratisches Bild mit 1.000 Pixeln verwenden, ist das Bild doppelt so groß wie nötig.
Bei der Auswahl der richtigen Bildgröße spielen jedoch viele Variablen eine Rolle, was die Aufgabe, in jedem Fall die richtige Bildgröße zu wählen, recht kompliziert macht. 2010 wurde das iPhone 4 mit einer Bildschirmauflösung von 640 × 960 veröffentlicht, die doppelt so hoch war wie die des iPhone 3 (320 × 480). Die physische Größe des Displays des iPhone 4 blieb jedoch ungefähr gleich wie beim iPhone 3.
Wenn alles in der höheren Auflösung angezeigt würde, wären Text und Bilder deutlich kleiner – genau genommen halb so groß wie zuvor. Stattdessen wurde aus einem Pixel zwei Gerätepixel. Dies wird als Pixel-Verhältnis des Geräts (Device Pixel Ratio, DPR) bezeichnet. Das iPhone 4 und viele danach veröffentlichte iPhone-Modelle hatten einen DPR von 2.
Wenn das Gerät wie im vorherigen Beispiel einen DPR von 2 hat und das Bild in einem 500‑Pixel-Container angezeigt wird, ist ein quadratisches Bild mit 1.000 Pixeln (als natürliche Größe bezeichnet) die optimale Größe. Wenn das Gerät einen DPR von 3 hat, wäre ein quadratisches Bild mit 1.500 Pixeln die optimale Größe.
srcset
Das Element <img>
unterstützt das Attribut srcset
, mit dem Sie eine Liste möglicher Bildquellen angeben können, die der Browser verwenden darf. Jede angegebene Bildquelle muss die Bild-URL und einen Breiten- oder Pixeldichte-Deskriptor enthalten.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
Im vorherigen HTML-Snippet wird der Browser mithilfe des Pixeldichte-Deskriptors angewiesen, image-500.png
auf Geräten mit einem DPR von 1, image-1000.jpg
auf Geräten mit einem DPR von 2 und image-1500.jpg
auf Geräten mit einem DPR von 3 zu verwenden.
Das mag alles ganz einfach klingen, aber die Geräte-Pixelrate ist nicht der einzige Faktor, der bei der Auswahl des optimalen Bildes für eine bestimmte Seite berücksichtigt werden muss. Auch das Layout der Seite ist ein wichtiger Faktor.
sizes
Die vorherige Lösung funktioniert nur, wenn Sie das Bild auf allen Viewports in derselben CSS-Pixelgröße anzeigen. In vielen Fällen ändert sich das Layout einer Seite und damit auch die Größe des Containers je nach Gerät des Nutzers.
Mit dem Attribut sizes
können Sie eine Reihe von Quellgrößen angeben, wobei jede Quellgröße aus einer Medienbedingung und einem Wert besteht. Das Attribut sizes
beschreibt die beabsichtigte Anzeigegröße des Bildes in CSS-Pixeln. In Kombination mit den Breiten-Deskriptoren srcset
kann der Browser die Bildquelle auswählen, die am besten für das Gerät des Nutzers geeignet ist.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
Im vorherigen HTML-Snippet gibt das Attribut srcset
eine durch Kommas getrennte Liste von Bildkandidaten an, aus denen der Browser auswählen kann. Jeder Kandidat in der Liste besteht aus der URL des Bildes, gefolgt von einer Syntax, die die intrinsische Breite des Bildes angibt. Die natürliche Größe eines Bildes sind seine Abmessungen. Ein Deskriptor von 1000w
gibt beispielsweise an, dass die intrinsische Breite des Bildes 1.000 Pixel beträgt.
Anhand dieser Informationen wertet der Browser die Media-Bedingung im Attribut sizes
aus. In diesem Fall wird der Browser angewiesen, das Bild mit einer Breite von 500 Pixeln anzuzeigen, wenn die Viewport-Breite des Geräts 768 Pixel überschreitet. Auf kleineren Geräten wird das Bild mit einer Breite von 100vw
oder der vollen Breite des Viewports angezeigt.
Der Browser kann diese Informationen dann mit der Liste der srcset
-Bildquellen kombinieren, um das optimale Bild zu finden. Wenn der Nutzer beispielsweise ein Mobilgerät mit einer Bildschirmbreite von 320 Pixeln und einem DPR von 3 verwendet, wird das Bild mit 320 CSS pixels x 3 DPR = 960 device pixels
angezeigt. In diesem Beispiel ist image-1000.jpg
das Bild mit der nächstgelegenen Größe. Es hat eine intrinsische Breite von 1.000 Pixeln (1000w
).
Dateiformate
Browser unterstützen verschiedene Bilddateiformate. Moderne Bildformate wie WebP und AVIF bieten möglicherweise eine bessere Komprimierung als PNG oder JPEG. Dadurch wird die Dateigröße Ihres Bildes verringert und der Download dauert weniger lange. Wenn Sie Bilder in modernen Formaten bereitstellen, können Sie die Ladezeit einer Ressource verkürzen, was zu einem niedrigeren Largest Contentful Paint (LCP) führen kann.
WebP ist ein weitgehend unterstütztes Format, das in allen modernen Browsern funktioniert. WebP bietet oft eine bessere Komprimierung als JPEG, PNG oder GIF und unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung. WebP unterstützt auch die Transparenz des Alphakanals, selbst wenn die verlustbehaftete Komprimierung verwendet wird. Diese Funktion bietet der JPEG-Codec nicht.
AVIF ist ein neueres Bildformat und wird zwar nicht so häufig unterstützt wie WebP, aber in Browsern ist die Unterstützung recht gut. AVIF unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung. Tests haben in einigen Fällen Einsparungen von mehr als 50% im Vergleich zu JPEG ergeben. AVIF bietet außerdem Wide Color Gamut (WCG) und High Dynamic Range (HDR).
Komprimierung
Bei Bildern gibt es zwei Arten der Komprimierung:
Bei der verlustbehafteten Komprimierung wird die Bildgenauigkeit durch Quantisierung reduziert. Außerdem können zusätzliche Farbinformationen durch Chroma-Subsampling verworfen werden. Die verlustbehaftete Komprimierung ist am effektivsten bei Bildern mit hoher Dichte und viel Rauschen und vielen Farben – in der Regel Fotos oder Bilder mit ähnlichen Inhalten. Das liegt daran, dass die Artefakte, die durch die verlustbehaftete Komprimierung entstehen, in so detaillierten Bildern viel weniger wahrscheinlich bemerkt werden. Bei Bildern mit scharfen Kanten wie Strichzeichnungen, ähnlich starken Details oder Text kann die verlustbehaftete Komprimierung jedoch weniger effektiv sein. Die verlustbehaftete Komprimierung kann auf JPEG-, WebP- und AVIF-Bilder angewendet werden.
Bei der verlustfreien Komprimierung wird die Dateigröße reduziert, indem ein Bild ohne Datenverlust komprimiert wird. Bei der verlustfreien Komprimierung wird ein Pixel anhand der Differenz zu seinen benachbarten Pixeln beschrieben. Die verlustfreie Komprimierung wird für die Bildformate GIF, PNG, WebP und AVIF verwendet.
Sie können Ihre Bilder mit Squoosh, ImageOptim oder einem Dienst zur Bildoptimierung komprimieren. Beim Komprimieren gibt es keine universelle Einstellung, die für alle Fälle geeignet ist. Wir empfehlen, mit verschiedenen Komprimierungsstufen zu experimentieren, bis Sie einen guten Kompromiss zwischen Bildqualität und Dateigröße gefunden haben. Einige erweiterte Bildoptimierungsdienste können dies automatisch für Sie erledigen, sind aber möglicherweise nicht für alle Nutzer finanziell tragbar.
Das <picture>
-Element
Das <picture>
-Element bietet Ihnen mehr Flexibilität beim Angeben mehrerer Bildkandidaten:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
Wenn Sie <source>
-Elemente im <picture>
-Element verwenden, können Sie Unterstützung für AVIF- und WebP-Bilder hinzufügen, aber auf kompatiblere Legacy-Bildformate zurückgreifen, wenn der Browser moderne Formate nicht unterstützt. Bei diesem Ansatz wählt der Browser das erste angegebene <source>
-Element aus, das übereinstimmt. Wenn das Bild in diesem Format gerendert werden kann, wird es verwendet. Andernfalls fährt der Browser mit dem nächsten angegebenen <source>
-Element fort. Im vorherigen HTML-Snippet hat das AVIF-Format Vorrang vor dem WebP-Format. Wenn weder AVIF noch WebP unterstützt werden, wird auf das JPEG-Format zurückgegriffen.
Ein <picture>
-Element erfordert ein darin verschachteltes <img>
-Element. Die Attribute alt
, width
und height
werden für <img>
definiert und unabhängig davon verwendet, welche <source>
ausgewählt ist.
Das <source>
-Element unterstützt auch die Attribute media
, srcset
und sizes
. Ähnlich wie beim <img>
-Beispiel oben wird dem Browser damit mitgeteilt, welches Bild auf verschiedenen Viewports ausgewählt werden soll.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Das Attribut media
verwendet eine Media-Bedingung. Im vorherigen Beispiel wird die Geräte-DPR als Media-Bedingung verwendet. Auf Geräten mit einem Gerätepixelverhältnis von mindestens 1,5 wird das erste <source>
-Element verwendet. Das <source>
-Element weist den Browser an, das ausgewählte Bild auf Geräten mit einem Viewport, der breiter als 768 Pixel ist, mit einer Breite von 500 Pixeln darzustellen. Auf kleineren Geräten nimmt das die gesamte Breite des Darstellungsbereichs ein. Durch die Kombination der Attribute media
und srcset
können Sie genauer festlegen, welches Bild verwendet werden soll.
Dies wird in der folgenden Tabelle veranschaulicht, in der mehrere Viewport-Breiten und Geräte-Pixelverhältnisse ausgewertet werden:
Breite des Darstellungsbereichs (Pixel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Auf Geräten mit einem DPR von 1 wird das image-500.jpg
-Bild heruntergeladen. Das gilt auch für die meisten Desktopnutzer, die das Bild mit einer extrinsischen Größe von 500 Pixeln Breite sehen. Mobile Nutzer mit einem DPR von 3 laden dagegen ein potenziell größeres image-1500.jpg
herunter – dasselbe Bild, das auf Desktopgeräten mit einem DPR von 3 verwendet wird.
<picture>
<source
media="(min-width: 561px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
In diesem Beispiel wird das <picture>
-Element so angepasst, dass es ein zusätzliches <source>
-Element enthält, um verschiedene Bilder für breite Geräte mit einem hohen DPR zu verwenden:
Breite des Darstellungsbereichs (Pixel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
---|---|---|---|---|
320 | 500.jpg | 500.jpg | 1000-sm.jpg | 1000-sm.jpg |
480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Mit dieser zusätzlichen Abfrage sehen Sie, dass image-1000-sm.jpg
und image-1500-sm.jpg
auf kleinen Viewports angezeigt werden. Durch diese zusätzlichen Informationen lassen sich Bilder stärker komprimieren, da Komprimierungsartefakte bei dieser Größe und Dichte nicht sehr sichtbar sind. Gleichzeitig wird die Bildqualität auf Desktopgeräten nicht beeinträchtigt.
Alternativ können Sie die Attribute srcset
und media
anpassen, um zu verhindern, dass große Bilder in kleinen Darstellungsbereichen ausgeliefert werden:
<picture>
<source
media="(min-width: 561px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Im vorherigen HTML-Snippet wurden die Breiten-Deskriptoren zugunsten von Deskriptoren für das Pixel-Verhältnis des Geräts entfernt. Bilder, die auf einem Mobilgerät ausgeliefert werden, sind auf /image-500.jpg
oder /image-1000.jpg
begrenzt, auch auf Geräten mit einem DPR von 3.
Komplexität bewältigen
Wenn Sie mit responsiven Bildern arbeiten, haben Sie möglicherweise viele verschiedene Größenvarianten und Formate für jedes Bild. Im vorherigen Beispiel werden Varianten für jede Größe verwendet, AVIF und WebP sind jedoch ausgeschlossen. Wie viele Varianten sollten Sie haben? Wie bei vielen technischen Problemen lautet die Antwort in der Regel „Es kommt darauf an“.
Es mag verlockend sein, so viele Varianten wie möglich zu haben, um die beste Lösung zu finden. Jede zusätzliche Bildvariante ist jedoch mit Kosten verbunden und nutzt den Browsercache weniger effizient. Bei nur einer Variante erhält jeder Nutzer dasselbe Bild, sodass es sehr effizient im Cache gespeichert werden kann.
Wenn es viele Varianten gibt, ist für jede Variante ein weiterer Cacheeintrag erforderlich. Die Serverkosten können steigen und die Leistung kann sich verschlechtern, wenn der Cacheeintrag der Variante abgelaufen ist und das Bild noch einmal vom Ursprungsserver abgerufen werden muss.
Außerdem wird Ihr HTML-Dokument mit jeder Variante größer. Möglicherweise müssen Sie für jedes Bild mehrere Kilobyte HTML übertragen.
Bilder auf Grundlage des Anfrageheaders Accept
bereitstellen
Der HTTP-Anfrageheader Accept
informiert den Server darüber, welche Inhaltstypen der Browser des Nutzers unterstützt. Anhand dieser Informationen kann Ihr Server das optimale Bildformat bereitstellen, ohne zusätzliche Bytes zu Ihren HTML-Antworten hinzuzufügen.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
Das oben stehende HTML-Snippet ist eine vereinfachte Version des Codes, den Sie dem JavaScript-Backend Ihres Servers hinzufügen können, um das optimale Bildformat auszuwählen und bereitzustellen.
Wenn der Accept
-Header der Anfrage image/avif
enthält, wird das AVIF-Bild ausgeliefert. Andernfalls wird das WebP-Bild bereitgestellt, wenn der Accept
-Header image/webp
enthält. Wenn keine dieser Bedingungen erfüllt ist, wird das JPEG-Bild bereitgestellt.
Sie können Antworten basierend auf dem Inhalt des Anfrageheaders Accept
auf fast jedem Webserver ändern. So können Sie beispielsweise Bildanfragen auf Apache-Servern basierend auf dem Header Accept
mit mod_rewrite
neu schreiben.
Das Verhalten ist ähnlich wie bei einem CDN (Content Delivery Network) für Bilder. Bild-CDNs sind hervorragende Lösungen zum Optimieren von Bildern und zum Senden des optimalen Formats basierend auf dem Gerät und Browser des Nutzers.
Wichtig ist, ein Gleichgewicht zu finden, eine angemessene Anzahl von Bildkandidaten zu generieren und die Auswirkungen auf die Nutzerfreundlichkeit zu messen. Unterschiedliche Bilder können unterschiedliche Ergebnisse liefern. Die Optimierungen, die auf die einzelnen Bilder angewendet werden, hängen von ihrer Größe auf der Seite und den Geräten ab, die Ihre Nutzer verwenden. Für ein Hero-Image in voller Breite sind beispielsweise möglicherweise mehr Varianten erforderlich als für Miniaturbilder auf einer E-Commerce-Produktlistenseite.
Lazy Loading
Mit dem Attribut loading
können Sie den Browser anweisen, Bilder erst dann zu laden, wenn sie im Viewport erscheinen. Mit dem Attributwert lazy
wird der Browser angewiesen, das Bild erst herunterzuladen, wenn es sich im oder in der Nähe des Viewports befindet. Dadurch wird Bandbreite gespart und der Browser kann die Ressourcen priorisieren, die zum Rendern der kritischen Inhalte erforderlich sind, die sich bereits im Viewport befinden.
decoding
Das Attribut decoding
gibt an, wie der Browser das Bild decodieren soll. Ein Wert von async
weist den Browser darauf hin, dass das Bild asynchron decodiert werden kann. Dadurch kann sich die Zeit für das Rendern anderer Inhalte verkürzen. Ein Wert von sync
weist den Browser an, das Bild gleichzeitig mit anderen Inhalten zu präsentieren.
Mit dem Standardwert von auto
kann der Browser entscheiden, was für den Nutzer am besten ist.
Bilddemos
Wissen testen
Welche Bildformate unterstützen die verlustfreie Komprimierung?
Welche Bildformate unterstützen die verlustbehaftete Komprimierung?
Was sagt der Breiten-Deskriptor (z. B. 1000w
) dem Browser über ein Bild, das in einem srcset
-Attribut angegeben ist?
Was teilt das Attribut sizes
dem Browser über ein <img>
-Element mit, auf das es angewendet wird?
srcset
-Attribut des <img>
-Elements geladen werden soll.
<img>
-Element angegebene Kandidat mit dem srcset
-Attribut geladen werden soll, wenn die Abmessungen des aktuellen Viewports des Nutzers berücksichtigt werden.
Nächstes Thema: Videoleistung
Bilder sind zwar der am häufigsten verwendete Medientyp im Web, aber bei der Leistung müssen Sie auch andere Medientypen berücksichtigen. Videos sind eine weitere gängige Art von Media, die im Web verwendet werden. Sie haben ihre eigenen Leistungsaspekte. Im nächsten Modul dieses Kurses werden einige Techniken zur Optimierung von Videos und zum effizienten Laden von Videos behandelt.