Bildleistung

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:

  1. Verlustbehaftete Komprimierung
  2. Verlustfreie 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?

AVIF
GIF
JPEG
WebP
PNG

Welche Bildformate unterstützen die verlustbehaftete Komprimierung?

WebP
PNG
JPEG
GIF
AVIF

Was sagt der Breiten-Deskriptor (z. B. 1000w) dem Browser über ein Bild, das in einem srcset-Attribut angegeben ist?

Die natürliche Breite des Bildes, d. h. die Abmessungen des Bildes selbst.
Die äußere Breite des Bilds, d. h. die Abmessungen des Bilds im Layout, nachdem Stile auf die Seite angewendet wurden.

Was teilt das Attribut sizes dem Browser über ein <img>-Element mit, auf das es angewendet wird?

Die intrinsische Breite des Bildes, das aus dem srcset-Attribut des <img>-Elements geladen werden soll.
Logik, die angibt, welcher im <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.