Bildleistung

Bilder sind oft die wichtigste und häufigste Ressource im Web. Als kann die Leistung Ihrer Website erheblich verbessert werden. In den meisten Fällen bedeutet das Optimieren von Bildern, dass die Netzwerkzeit durch das Senden von weniger Byte, aber Sie können auch die Menge der an den Nutzer gesendeten Byte optimieren, indem Sie die die richtige Größe für das Gerät des Nutzers haben.

Bilder können einer Seite mit den Elementen <img> oder <picture> hinzugefügt werden. die CSS-Eigenschaft background-image.

Image size

Die erste Optimierung, die Sie bei der Verwendung von Bildressourcen durchführen können, ist damit das Bild in der richtigen Größe angezeigt wird. In diesem Fall bezieht sich der Begriff Größe auf Die Abmessungen eines Bildes. Unter Berücksichtigung anderer Variablen wird ein Bild angezeigt, in einem Container mit 500 x 500 Pixeln eine optimale Größe von 500 x 500 Pixeln 500 Pixel. Ein quadratisches Bild mit 1.000 Pixeln bedeutet beispielsweise, doppelt so groß wie nötig.

Bei der Auswahl der richtigen Bildgröße sind jedoch viele Variablen beteiligt. sodass die Auswahl der richtigen Bildgröße kompliziert. 2010, als das iPhone 4 auf den Markt kam, war die Bildschirmauflösung 640 x 960 war doppelt so hoch wie das iPhone 3 (320 x 480). Die physische Größe des iPhone 4-Displays blieb ungefähr gleich wie beim iPhone 3.

Wenn alle Elemente mit einer höheren Auflösung angezeigt würden, wären Texte und Bilder entstanden. erheblich kleiner – also halb so groß wie die vorherige Größe. Stattdessen wird 1 Pixel wurden zu 2 Gerätepixeln. Dies wird als Pixel-Verhältnis des Geräts (DPR) bezeichnet. Die Das iPhone 4 – und viele iPhone-Modelle, die danach auf den Markt gekommen sind – hatten eine DPR von 2.

Nehmen wir noch einmal das vorherige Beispiel: Wenn das Gerät einen DPR von 2 hat und das Bild die in einem Container mit 500 x 500 Pixeln angezeigt werden, (auch als intrinsische Größe bezeichnet) ist jetzt die optimale Größe. Wenn der Parameter Gerät bei einem DPR von 3 liegt, wäre ein quadratisches Bild mit 1500 Pixel die optimale Größe.

srcset

Das Element <img> unterstützt das Attribut srcset, mit dem Sie einen Wert für Liste möglicher Bildquellen, die der Browser verwenden kann. Jede angegebene Bildquelle muss die Bild-URL sowie eine Beschreibung für die Breite oder die Pixeldichte 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"
>

Das vorherige HTML-Snippet verwendet den Deskriptor für die Pixeldichte, um Hinweise an den Browser zu senden. zum Verwenden von image-500.png auf Geräten mit einem Niederschlagsrisiko von 1, image-1000.jpg auf Geräten mit einem Niederschlagsrisiko von 2 und image-1500.jpg auf Geräten mit einem Niederschlagspunkt von 3.

Auch wenn dies alles ziemlich ausgesprochen und trocken erscheint, sind die digitalen bei der Auswahl des optimalen Bildes für eine Seite. Die layout ein weiterer Aspekt.

sizes

Die vorherige Lösung funktioniert nur, wenn Sie das Bild im selben CSS-Pixel anzeigen in allen Darstellungsbereichen anpassen. In vielen Fällen ist das Layout einer Seite – verwendet werden. Sie ändert sich je nach Gerät des Nutzers.

Mit dem Attribut sizes können Sie eine Reihe von Quellengrößen angeben, wobei jede Die Quellgröße besteht aus einer Medienbedingung und einem Wert. Das Attribut sizes beschreibt die vorgesehene Anzeigegröße des Bildes in CSS-Pixeln. In Kombination Mit den Breitendeskriptoren für srcset kann der Browser die Bildquelle auswählen. für das Gerät des Nutzers am besten 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 Bildern an Kandidaten, aus denen der Browser auswählen kann, getrennt durch Kommas. Jeder Kandidat in Die Liste besteht aus der URL des Bildes, gefolgt von einer Syntax, die das der unveränderlichen Breite des Bildes. Die systeminterne Größe eines Bildes sind seine Abmessungen. Für Beispiel: Der Deskriptor 1000w gibt an, dass die unveränderliche Breite des Bildes Breite: 1000 Pixel.

Anhand dieser Informationen wertet der Browser die Medienbedingung in sizes aus. und in diesem Fall wird festgelegt, dass, wenn die Breite des Darstellungsbereichs des Geräts 768 Pixel überschreitet, wird das Bild mit einer Breite von 500 Pixel angezeigt. Auf kleineren Geräten wird das Bild unter 100vw oder über die volle Breite des Darstellungsbereichs angezeigt.

Der Browser kann diese Informationen dann mit der Liste der srcset-Bilder kombinieren um das optimale Bild zu finden. Wenn der Nutzer beispielsweise ein Mobilgerät verwendet, Gerät mit einer Bildschirmbreite von 320 Pixeln und einem effektiven Display-Netzwerk von 3 wird das Bild angezeigt. um 320 CSS pixels x 3 DPR = 960 device pixels. In diesem Beispiel ist die nächstgelegene Bild mit der entsprechenden Größe wäre image-1000.jpg, das eine intrinsische Breite von 1.000 hat. Pixel (1000w).

Dateiformate

Browser unterstützen mehrere verschiedene Bilddateiformate. Moderne Bildformate wie WebP und AVIF bieten möglicherweise eine bessere Komprimierung als PNG oder JPEG. die die Größe der Bilddatei kleiner macht, sodass der Download weniger Zeit in Anspruch nimmt. Nach Auslieferung Bilder in modernen Formaten verwenden, können Sie die Ladezeit einer Ressource reduzieren, die sich möglicherweise zu einem niedrigeren Largest Contentful Paint (LCP) führen.

WebP ist ein allgemein unterstütztes Format, das auf allen modernen Browsern funktioniert. WebP verfügt oft über eine bessere Komprimierung als JPEG, PNG oder GIF, wobei sowohl verlustbehaftete Dateien als auch verlustfreie Komprimierung. WebP unterstützt auch Alphakanaltransparenz, mit einer verlustbehafteten Komprimierung – eine Funktion, die der JPEG-Codec nicht bietet.

AVIF ist ein neueres Bildformat und wird zwar nicht so weit verbreitet wie WebP, aber es wird wird in allen Browsern angemessen unterstützt. AVIF unterstützt sowohl verlustbehaftete und verlustfreie Komprimierung. Tests ergaben Einsparungen von über 50 %, wenn im Vergleich zu JPEG. AVIF bietet außerdem Wide Color Gamut (WCG) und HDR-Funktionen (High Dynamic Range)

Komprimierung

Bei Bildern gibt es zwei Komprimierungstypen:

1. Verlustsame Komprimierung
2. Verlustlose Komprimierung

Die verlustbehaftete Komprimierung verringert die Bildgenauigkeit durch Quantisierung, und zusätzliche Farbinformationen können mithilfe von Chroma Subsampling verworfen werden. Die verlustbehaftete Komprimierung ist am effektivsten bei hochauflösenden Bildern mit viel Rauschen und Farben, meist Fotos oder Bilder mit ähnlichen Inhalten. Das liegt daran, Die Artefakte, die durch die verlustbehaftete Komprimierung erzeugt werden, werden viel seltener bemerkt in so detaillierten Bildern zu erkennen. Eine verlustbehaftete Komprimierung ist bei Bilder mit scharfen Kanten, z. B. Strichzeichnungen, ähnlich schroffen Details oder Text. Eine verlustbehaftete Komprimierung kann auf JPEG-, WebP- und AVIF-Bilder angewendet werden.

Die verlustfreie Komprimierung reduziert die Dateigröße, indem ein Bild ohne Daten komprimiert wird Verlust. Die verlustfreie Komprimierung beschreibt ein Pixel basierend auf dem Unterschied von seinem benachbarten Pixeln. Die verlustfreie Komprimierung wird für GIF-, PNG-, WebP- AVIF-Bildformate.

Sie können Ihre Bilder mit Squoosh, ImageOptim oder einem Bild komprimieren. und Optimierungsservice. Beim Komprimieren gibt es keine allgemein geeignete Einstellung für alle Fälle. Es wird empfohlen, mit verschiedenen bis Sie einen guten Kompromiss zwischen Bildqualität und Dateigröße. Einige erweiterte Bildoptimierungsdienste können das für Sie erledigen automatisch, aber möglicherweise nicht für alle Nutzer finanziell tragbar.

Das <picture>-Element

Mit dem Element <picture> können Sie mehrere mögliche Bilder:

<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 AVIF- und WebP-Bilder werden unterstützt, es wird jedoch auf ein kompatibleres älteres Bild zurückgegriffen. Formate, wenn der Browser keine modernen Formate unterstützt. Bei diesem Ansatz der Browser wählt das erste übereinstimmende <source>-Element aus. Wenn ja in diesem Format rendert, wird das Bild verwendet. Andernfalls wird der Browser Das nächste angegebene <source>-Element wird erreicht. Im vorherigen HTML-Code hat, hat das AVIF-Format Vorrang vor dem WebP-Format, JPEG-Format, wenn weder AVIF noch WebP unterstützt wird.

Ein <picture>-Element erfordert ein darin verschachteltes <img>-Element. Die Die Attribute alt, width und height sind in der <img> definiert und werden verwendet: unabhängig davon, welche <source> ausgewählt ist.

Das <source>-Element unterstützt auch media, srcset und sizes Attribute. Ähnlich wie im <img>-Beispiel oben weisen diese auf den Browser, welches Bild in verschiedenen Darstellungsbereichen 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 Medienbedingung. Im vorherigen Beispiel hat der Parameter Der digitale Ausdruck des Geräts wird als Medienbedingung verwendet. Alle Geräte mit einem Niederschlagspunkt größer als oder gleich 1,5 verwendet wird, wird das erste <source>-Element verwendet. Das <source>-Element informiert den Browser, dass auf Geräten mit einem Darstellungsbereich, der breiter als 768 Pixel ist, der ausgewähltes Bild mit einer Breite von 500 Pixeln angezeigt wird. Auf kleineren Geräten und nimmt die gesamte Breite des Darstellungsbereichs ein. Durch Kombinieren von media und srcset Attribute können Sie genauer steuern, welches Bild verwendet werden soll.

Dies wird in der folgenden Tabelle veranschaulicht, in der verschiedene Breiten und Pixelverhältnisse auf Geräten werden so bewertet:

Auf Geräten mit einem DVR-Wert von 1 wird das image-500.jpg-Bild heruntergeladen, einschließlich der meisten Desktop-Nutzer, die das Bild mit einer extrinsischen Größe von 500 Pixeln betrachten An mobile Nutzer mit einer niederschlagenden Gebotsstrategie von 3 eine potenziell größere image-1500.jpg: Dasselbe Bild, das auf Desktop-Geräten mit einem DVR-Wert von 3 verwendet wird.

<picture>
  <source
    media="(min-width: 560px) 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 einen zusätzlichen <source>-Element, um unterschiedliche Bilder für breite Geräte mit hohem DVR-Wert zu verwenden:

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

Alternativ können Sie durch Anpassen der Attribute srcset und media große Bilder in kleinen Darstellungsbereichen bereitstellen:

<picture>
  <source
    media="(min-width: 560px)"
    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 Breitenbeschreibungen zugunsten entfernt. von Deskriptoren für das Pixelverhältnis auf Geräten. Auf Mobilgeräten ausgelieferte Bilder sind eingeschränkt auf /image-500.jpg oder /image-1000.jpg, sogar auf Geräten mit einem Niederschlagsrisiko von 3.

Komplexität bewältigen

Beim Arbeiten mit responsiven Bildern stehen Ihnen viele verschiedene Größenvarianten und -formaten für jedes Bild. Im vorherigen Beispiel haben Varianten für jede Größe verwendet, aber AVIF und WebP ausschließen. Wie viele Varianten sollten Sie haben? Wie bei vielen technischen Problemen lautet die Antwort meist: „Das kommt darauf an“.

Es mag verlockend sein, so viele Varianten zu haben, dass die beste Passform erzielt wird. jede zusätzliche Bildvariante verursacht Kosten und nutzt die im Cache des Browsers. Bei nur einer Variante erhält jeder Nutzer dasselbe Bild, sodass er sehr effizient im Cache gespeichert werden kann.

Gibt es viele Varianten, erfordert jede Variante eine andere mit einem Cache-Eintrag. Die Serverkosten können steigen und die Leistung beeinträchtigen, wenn Der Cache-Eintrag der Variante ist abgelaufen und das Bild muss noch einmal abgerufen werden von auf dem Ursprungsserver.

Außerdem wird das HTML-Dokument mit jeder Variante größer. Ich könnten Sie mehrere Kilobyte HTML-Code für jedes Bild versenden.

Bilder basierend auf dem Accept-Anfrageheader bereitstellen

Der Accept-HTTP-Anfrageheader informiert den Server darüber, welche Inhaltstypen die der Browser versteht. Anhand dieser Informationen kann Ihr Server das optimale Bildformat zu verwenden, 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 im JavaScript-Back-End Ihres Servers, um das optimale Bildformat zu wählen und bereitzustellen. Wenn der Accept-Header der Anfrage image/avif enthält, ist das AVIF-Bild ausgeliefert wird. Wenn der Accept-Header image/webp enthält, wird das WebP-Bild ausgeliefert wird. Wenn keine dieser Bedingungen erfüllt ist, wird das JPEG-Bild ausgeliefert wird.

Sie können Antworten basierend auf dem Inhalt des Anfrageheaders Accept ändern in beinahe jeder Art von Webserver. Beispielsweise können Sie Bildanfragen neu schreiben, auf Apache-Servern basierend auf dem Accept-Header mit mod_rewrite.

Dies unterscheidet sich nicht vom Verhalten eines Content Delivery Network für Bilder. (CDN). Bild-CDNs sind hervorragende Lösungen zum Optimieren von Bildern und zum Senden der das optimale Format für das Gerät und den Browser des Nutzers.

Entscheidend ist, ein Gleichgewicht zu finden, eine angemessene Anzahl von Kandidaten zu generieren, und die Auswirkungen auf die User Experience zu messen. Mit unterschiedlichen Bildern unterschiedliche Ergebnisse, und die auf die einzelnen Bilder angewendeten Optimierungen hängen davon ab, Größe auf der Seite und auf den Geräten, die die Nutzer verwenden. Beispiel: Für ein Hero-Image in voller Breite sind möglicherweise mehr Varianten erforderlich als für Miniaturansichten auf Seite mit E-Commerce-Produkteinträgen.

Lazy Loading

Sie können den Browser anweisen, Lazy Loading für Bilder zu aktivieren, wenn sie in der Darstellungsbereichs mithilfe des Attributs loading. Mit dem Attributwert lazy wird der wird das Bild erst dann heruntergeladen, wenn es sich im Darstellungsbereich befindet (oder in dessen Nähe). Dieses spart Bandbreite und der Browser kann die benötigten Ressourcen die kritischen Inhalte rendern, die sich bereits im Darstellungsbereich befinden.

decoding

Das Attribut decoding teilt dem Browser mit, wie das Bild decodiert werden soll. A async teilt dem Browser mit, dass das Bild asynchron decodiert werden kann. und so möglicherweise die Zeit für das Rendern anderer Inhalte verbessern. Bei einem Wert von sync wird dem Browser, dass das Bild gleichzeitig mit anderem Inhalt angezeigt werden soll. Mit dem Standardwert auto kann der Browser entscheiden, was für den Nutzer.

Bilddemos

Wissen testen

Nächster Schritt: Videoleistung

Bilder sind zwar der häufigste Medientyp im Web, doch sie sind bei Weitem die Sie im Hinblick auf die Leistung im Hinterkopf behalten müssen. Videokampagne ist ein weiterer gängiger Medientyp, der im Web verwendet wird, und verfügt über eine eigene Leistungsaspekte berücksichtigen. Im nächsten Modul dieses Kurses beschäftigen wir uns mit einigen zur Optimierung von Videos und zum effizienten Laden.