Bildleistung

Bilder sind oft die schwersten und häufigsten Ressourcen im Web. Die Optimierung von Bildern kann daher die Leistung Ihrer Website erheblich steigern. In den meisten Fällen bedeutet die Optimierung von Bildern, dass die Netzwerkzeit durch das Senden weniger Bytes reduziert wird. Sie können aber auch die Anzahl der an den Nutzer gesendeten Bytes optimieren, indem Sie Bilder mit der richtigen Größe für das Gerät des Nutzers bereitstellen.

Bilder können einer Seite mithilfe der Elemente <img> oder <picture> oder 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, sollte ein Bild, das in einem Container mit einer Größe von 500 × 500 Pixeln angezeigt wird, eine optimale Größe von 500 × 500 Pixeln haben. Wenn Sie beispielsweise ein quadratisches Bild mit 1.000 Pixeln verwenden, ist das Bild doppelt so groß wie erforderlich.

Bei der Auswahl der richtigen Bildgröße spielen jedoch viele Variablen eine Rolle, was die Auswahl in jedem Fall ziemlich schwierig macht. 2010, als das iPhone 4 auf den Markt kam, war die Bildschirmauflösung (640 × 960) doppelt so hoch wie beim 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 – genauer gesagt halb so groß wie zuvor. Stattdessen wurden aus einem Pixel zwei Gerätepixel. Das wird als Pixel-Verhältnis des Geräts (Device Pixel Ratio, DPR) bezeichnet. Das iPhone 4 und viele nach ihm veröffentlichte iPhone-Modelle hatten eine DPR von 2.

Wenn das Gerät im vorherigen Beispiel eine DPR von 2 hat und das Bild in einem Container mit 500 × 500 Pixeln angezeigt wird, ist ein quadratisches Bild mit 1.000 Pixeln (die eigentliche Größe) jetzt die optimale Größe. Wenn das Gerät eine DPR von 3 hat, ist 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 kann. Jede angegebene Bildquelle muss die Bild-URL und einen Beschreibungsparameter für die Pixelbreite oder -dichte 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 über den Beschreibungsparameter für die Pixeldichte angewiesen, auf Geräten mit einer DPR von 1 image-500.png, auf Geräten mit einer DPR von 2 image-1000.jpg und auf Geräten mit einer DPR von 3 image-1500.jpg zu verwenden.

Das mag zwar einfach klingen, aber die DPR eines Bildschirms ist nicht der einzige Faktor, der bei der Auswahl des optimalen Bilds für eine bestimmte Seite berücksichtigt werden muss. Ein weiterer wichtiger Faktor ist das Layout der Seite.

sizes

Die vorherige Lösung funktioniert nur, wenn Sie das Bild in allen Ansichten mit 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. Jede Quellgröße besteht aus einer Medienbedingung und einem Wert. Das Attribut sizes beschreibt die beabsichtigte Darstellungsgröße des Bildes in CSS-Pixeln. In Kombination mit den srcset-Breitenbeschreibungen kann der Browser auswählen, welche Bildquelle für das Gerät des Nutzers am besten 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 Liste von Bildkandidaten an, aus denen der Browser auswählen kann. Die Kandidaten sind durch Kommas getrennt. Jeder Kandidat in der Liste besteht aus der URL des Bildes, gefolgt von einer Syntax, die die intrinsische Breite des Bildes angibt. Die ursprüngliche Größe eines Bildes sind seine Abmessungen. Ein Deskriptor von 1000w bedeutet beispielsweise, dass die intrinsische Breite des Bildes 1.000 Pixel beträgt.

Anhand dieser Informationen wertet der Browser die Medienbedingung im Attribut sizes aus. In diesem Fall wird angewiesen, dass das Bild mit einer Breite von 500 Pixeln angezeigt wird, wenn die Ansichtsbreite des Geräts 768 Pixel überschreitet. Auf kleineren Geräten wird das Bild mit 100vw oder der vollen Breite des Darstellungsbereichs angezeigt.

Der Browser kann diese Informationen dann mit der Liste der srcset-Bildquellen kombinieren, um das optimale Bild zu finden. Wenn sich der Nutzer beispielsweise auf einem Mobilgerät mit einer Bildschirmbreite von 320 Pixeln und einer DPR von 3 befindet, wird das Bild bei 320 CSS pixels x 3 DPR = 960 device pixels angezeigt. In diesem Beispiel wäre image-1000.jpg das Bild mit der am besten passenden 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 ist die Bilddatei kleiner und der Download dauert kürzer. Wenn Sie Bilder in modernen Formaten bereitstellen, können Sie die Ladezeit einer Ressource reduzieren. Dies kann zu einem niedrigeren Largest Contentful Paint (LCP) führen.

WebP ist ein weithin unterstütztes Format, das in allen modernen Browsern funktioniert. WebP bietet oft eine bessere Komprimierung als JPEG, PNG oder GIF und ermöglicht sowohl eine verlustbehaftete als auch eine verlustfreie Komprimierung. WebP unterstützt auch die Transparenz des Alphakanals, selbst bei verlustbehafteter Komprimierung – eine Funktion, die der JPEG-Codec nicht bietet.

AVIF ist ein neueres Bildformat und wird zwar nicht so weit verbreitet wie WebP unterstützt, bietet aber einen relativ guten Browsersupport. AVIF unterstützt sowohl die verlustbehaftete als auch die verlustfreie Komprimierung. Tests haben in einigen Fällen Einsparungen von über 50% im Vergleich zu JPEG gezeigt. AVIF bietet außerdem Wide Color Gamut (WCG) und High Dynamic Range (HDR).

Komprimierung

Bei Bildern gibt es zwei Arten von Komprimierung:

1. Verlustbehaftete Komprimierung
2. Verlustfreie Komprimierung

Bei der verlustbehafteten Komprimierung wird die Bildgenauigkeit durch Quantisierung reduziert. Zusätzliche Farbinformationen können mithilfe von Chroma-Subsampling verworfen werden. Die verlustbehaftete Komprimierung ist am effektivsten bei Bildern mit hoher Dichte, viel Rauschen und vielen Farben – in der Regel Fotos oder Bilder mit ähnlichem Inhalt. Das liegt daran, dass die durch die verlustbehaftete Komprimierung entstehenden Artefakte bei solchen detaillierten Bildern viel weniger wahrscheinlich wahrgenommen werden. Bei Bildern mit scharfen Kanten wie Zeichnungen, ähnlich starken Details oder Text ist die verlustbehaftete Komprimierung jedoch möglicherweise weniger effektiv. 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 des Unterschieds zu den 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 fortschrittliche Dienste zur Bildoptimierung können dies automatisch für Sie erledigen, sind aber möglicherweise nicht für alle Nutzer finanziell tragbar.

Das <picture>-Element

Mit dem <picture>-Element können Sie mehrere Bildkandidaten flexibler angeben:

<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 innerhalb des <picture>-Elements verwenden, können Sie Unterstützung für AVIF- und WebP-Bilder hinzufügen, aber auf kompatiblere ältere Bildformate zurückgreifen, wenn der Browser moderne Formate nicht unterstützt. Bei diesem Ansatz wählt der Browser das erste <source>-Element aus, das übereinstimmt. Wenn das Bild in diesem Format gerendert werden kann, wird es verwendet. Andernfalls geht der Browser zum nächsten angegebenen <source>-Element über. Im vorherigen HTML-Snippet hat das AVIF-Format Vorrang vor dem WebP-Format. Wenn weder AVIF noch WebP unterstützt werden, wird das JPEG-Format verwendet.

Ein <picture>-Element muss ein verschachteltes <img>-Element enthalten. Die Attribute alt, width und height werden auf dem <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 Beispiel für <img> oben geben sie dem Browser an, welches Bild in verschiedenen Ansichten 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>

Für das Attribut media kann eine Medienbedingung verwendet werden. Im vorherigen Beispiel wird die DPR des Geräts als Medienbedingung verwendet. Bei allen Geräten mit einem DPR von mindestens 1,5 wird das erste <source>-Element verwendet. Das Element <source> teilt dem Browser mit, dass der ausgewählte Bildkandidat auf Geräten mit einem Viewport, der breiter als 768 Pixel ist, mit einer Breite von 500 Pixeln angezeigt wird. Auf kleineren Geräten nimmt dies die gesamte Breite des Darstellungsfelds ein. Wenn Sie die Attribute media und srcset kombinieren, können Sie die Verwendung von Bildern genauer steuern.

Dies wird in der folgenden Tabelle veranschaulicht, in der mehrere Viewport-Breiten und Gerätepixelverhältnisse bewertet werden:

Auf Geräten mit einer DPR von 1 wird das image-500.jpg-Bild heruntergeladen, einschließlich der meisten Desktopnutzer, die das Bild in einer externen Größe von 500 Pixeln sehen. Mobile Nutzer mit einem DPR von 3 laden dagegen möglicherweise ein größeres image-1500.jpg herunter – dasselbe Bild, das auch auf Desktop-Gerä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 unterschiedliche Bilder für breite Geräte mit hoher DPR zu verwenden:

Mit dieser zusätzlichen Abfrage sehen Sie, dass image-1000-sm.jpg und image-1500-sm.jpg in kleinen Ansichten angezeigt werden. Mit diesen zusätzlichen Informationen können Sie Bilder weiter komprimieren, da Komprimierungsartefakte bei dieser Größe und Dichte nicht sehr sichtbar sind. Gleichzeitig wird die Bildqualität auf Desktop-Geräten nicht beeinträchtigt.

Alternativ können Sie die Attribute srcset und media anpassen, um das Bereitstellen großer Bilder in kleinen Darstellungen zu vermeiden:

<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 Beschreibungen für die Breite entfernt und durch Beschreibungen für das Pixelverhältnis des Geräts ersetzt. Bilder, die auf einem Mobilgerät ausgeliefert werden, sind auf /image-500.jpg oder /image-1000.jpg beschränkt, auch auf Geräten mit einer DPR von 3.

Komplexität bewältigen

Bei der Arbeit mit responsiven Bildern kann es vorkommen, dass Sie für jedes Bild viele verschiedene Größen- und Formatvarianten haben. Im vorherigen Beispiel werden Varianten für jede Größe verwendet, AVIF und WebP werden 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 Übereinstimmung zu erzielen. Jede zusätzliche Bildvariante hat jedoch ihren Preis und der Browsercache wird weniger effizient genutzt. Bei nur einer Variante erhält jeder Nutzer dasselbe Bild, sodass es sehr effizient im Cache gespeichert werden kann.

Wenn es dagegen viele Varianten gibt, benötigt jede Variante einen weiteren Cache-Eintrag. Die Serverkosten können steigen und die Leistung kann beeinträchtigt werden, wenn der Cache-Eintrag der Variante abgelaufen ist und das Bild noch einmal vom Ursprungsserver abgerufen werden muss.

Außerdem nimmt die Größe des HTML-Dokuments mit jeder Variante zu. Möglicherweise senden Sie für jedes Bild mehrere Kilobyte an HTML-Code.

Bilder basierend auf dem Accept-Anfrageheader bereitstellen

Der HTTP-Anfrageheader Accept informiert den Server darüber, welche Inhaltstypen der Browser des Nutzers versteht. Diese Informationen können von Ihrem Server verwendet werden, um das optimale Bildformat bereitzustellen, ohne Ihren HTML-Antworten zusätzliche Bytes 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 vorherige 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 gesendet. Andernfalls, wenn der Accept-Header image/webp enthält, wird das WebP-Bild bereitgestellt. Wenn keine dieser Bedingungen erfüllt ist, wird das JPEG-Bild gesendet.

Sie können Antworten auf fast allen Arten von Webservern basierend auf dem Inhalt des Accept-Anfrage-Headers ändern. So können Sie beispielsweise Bildanfragen auf Apache-Servern basierend auf dem Accept-Header mit mod_rewrite umschreiben.

Das Verhalten ähnelt dem eines Bild-CDN (Content Delivery Network). Bild-CDNs sind eine hervorragende Lösung, um Bilder zu optimieren und je nach Gerät und Browser des Nutzers das optimale Format zu senden.

Der Schlüssel besteht darin, eine angemessene Anzahl von Bildkandidaten zu generieren und die Auswirkungen auf die Nutzerfreundlichkeit zu messen. Unterschiedliche Bilder können zu unterschiedlichen Ergebnissen führen. Die Optimierungen, die auf jedes Bild angewendet werden, hängen von seiner 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 Thumbnails auf einer E-Commerce-Produktseite.

Lazy Loading

Mit dem Attribut loading können Sie dem Browser mitteilen, Bilder nur dann zu laden, wenn sie im Darstellungsbereich erscheinen. Ein Attributwert von lazy weist den Browser an, das Bild erst herunterzuladen, wenn es sich im (oder in der Nähe des) Darstellungsbereichs befindet. Dadurch wird die Bandbreite gespart und der Browser kann die Ressourcen priorisieren, die zum Rendern der wichtigen Inhalte erforderlich sind, die sich bereits im Darstellungsbereich befinden.

decoding

Das Attribut decoding gibt dem Browser an, wie das Bild decodiert werden soll. Ein Wert von async teilt dem Browser mit, dass das Bild asynchron decodiert werden kann, was möglicherweise die Zeit für das Rendern anderer Inhalte verkürzt. Der Wert sync gibt dem Browser an, dass das Bild gleichzeitig mit anderen Inhalten präsentiert werden soll. Mit dem Standardwert auto kann der Browser entscheiden, was für den Nutzer am besten ist.

Bilddemos

Wissen testen

Nächster Schritt: Videoleistung

Bilder sind zwar der häufigste Medientyp im Web, aber bei der Leistung sind noch weitere Faktoren zu berücksichtigen. Videos sind eine weitere gängige Art von Medien, die im Web verwendet werden. Sie haben eigene Leistungsanforderungen. Im nächsten Modul dieses Kurses erfahren Sie, wie Sie Videos optimieren und effizient laden.