Bilder sind oft die häufigste und häufigste Ressource im Web. Durch die Optimierung von Bildern kann die Leistung Ihrer Website also erheblich verbessert werden. In den meisten Fällen bedeutet die Optimierung von Bildern, die Netzwerkzeit zu reduzieren, indem weniger Byte gesendet werden. Sie können jedoch auch die Menge der an den Nutzer gesendeten Byte optimieren, indem Sie Bilder bereitstellen, die die richtige Größe für das Gerät des Nutzers haben.
Bilder können einer Seite mit den <img>- oder <picture>-Elementen oder der CSS-Eigenschaft background-image hinzugefügt werden.
Image size
Die erste Optimierung, die Sie bei der Nutzung von Bildressourcen durchführen 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, hat ein Bild, das in einem Container mit 500 x 500 Pixeln angezeigt wird, die optimale Größe von 500 x 500 Pixeln. Bei einem quadratischen Bild mit 1.000 Pixeln ist das Bild beispielsweise doppelt so groß wie nötig.
Allerdings sind viele Variablen an der Auswahl der richtigen Bildgröße beteiligt, sodass die Aufgabe, die richtige Bildgröße in jedem Fall auszuwählen, ziemlich kompliziert wird. Als im Jahr 2010 das iPhone 4 auf den Markt kam, war die Bildschirmauflösung (640 x 960) doppelt so hoch wie beim iPhone 3 (320 x 480). Die physische Größe des Displays des iPhone 4 blieb jedoch ungefähr die gleiche wie beim iPhone 3.
Wenn alles in der höheren Auflösung angezeigt worden wäre, wären Text und Bilder wesentlich kleiner – um genau zu sein, hätten sie nur noch die Hälfte. Stattdessen wurde 1 Pixel 2 Gerätepixel. Dies wird als Device Pixel Ratio (DPR) bezeichnet. Das iPhone 4 – und viele darauf veröffentlichte iPhone-Modelle – hatte einen DPR von 2.
Wenn das Gerät einen DPR von 2 hat und das Bild in einem Container mit 500 x 500 Pixeln angezeigt wird, ist ein quadratisches Bild mit 1.000 Pixeln (das als intrinsische Größe bezeichnet) jetzt die optimale Größe. Wenn das Gerät einen DPR von 3 hat, wäre ein quadratisches Bild mit 1.500 Pixeln ebenfalls die optimale Größe.
srcset
Das <img>-Element unterstützt das Attribut srcset, mit dem Sie eine Liste möglicher Bildquellen angeben können, die der Browser möglicherweise verwenden kann. Jede angegebene Bildquelle muss die Bild-URL und einen Deskriptor 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 Pixeldichtedeskriptor, um den Browser anzuweisen, 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.
Auch wenn dies alles trocken und trocken erscheint, ist die DPR eines Bildschirms nicht die einzige Überlegung bei der Auswahl des optimalen Images für eine bestimmte Seite. Das Layout der Seite ist ein weiterer Aspekt.
sizes
Die vorherige Lösung funktioniert nur, wenn das Bild in allen Darstellungsbereichen mit derselben CSS-Pixelgröße angezeigt wird. In vielen Fällen ändert sich das Layout einer Seite und 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 srcset-Deskriptoren für die Breite 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. Diese sind durch Kommas getrennt. Jeder Kandidat in der Liste besteht aus der URL des Bildes, gefolgt von einer Syntax, die die vorgegebene Breite des Bildes angibt. Die intrinsische Größe eines Bildes ist seine Abmessungen. Der Deskriptor 1000w gibt beispielsweise an, dass die intrinsische Breite des Bildes 1.000 Pixel breit ist.
Anhand dieser Informationen wertet der Browser die Medienbedingung im Attribut sizes aus. In diesem Fall wird er angewiesen, dass das Bild bei einer Breite von 500 Pixeln angezeigt wird, wenn die Breite des Darstellungsbereichs des Geräts 768 Pixel überschreitet. Auf kleineren Geräten wird das Bild bei 100vw oder der gesamten Breite des Darstellungsbereichs 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 unter 320 CSS pixels x 3 DPR = 960 device pixels angezeigt. In diesem Beispiel wäre das Bild mit der geringsten Größe image-1000.jpg mit einer intrinsischen 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, wodurch Ihre Bilddatei kleiner ist und der Download daher kürzer ist. Durch die Bereitstellung von Bildern in modernen Formaten können Sie die Ladezeit einer Ressource reduzieren, 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 hat oft eine bessere Komprimierung als JPEG, PNG oder GIF und bietet sowohl verlustbehaftete als auch verlustfreie Komprimierung. WebP unterstützt auch Alphakanaltransparenz, auch wenn eine verlustbehaftete Komprimierung verwendet wird – eine Funktion, die der JPEG-Codec nicht bietet.
AVIF ist ein neueres Bildformat, das zwar nicht so weit verbreitet ist wie WebP, aber in allen Browsern relativ gut unterstützt wird. AVIF unterstützt sowohl die verlustbehaftete als auch die verlustfreie Komprimierung. Tests haben in einigen Fällen im Vergleich zu JPEG mehr als 50% Einsparungen gezeigt. AVIF bietet außerdem die Funktionen Wide Color Gamut (WCG) und High Dynamic Range (HDR).
Komprimierung
Für Bilder gibt es zwei Arten der Komprimierung:
Eine verlustbehaftete Komprimierung verringert die Bildgenauigkeit durch Quantisierung. Zusätzliche Farbinformationen können mithilfe von Chrom-Subsampling verworfen werden. Die verlustbehaftete Komprimierung ist am effektivsten bei hochauflösenden Bildern mit viel Rauschen und Farben – in der Regel bei Fotos oder Bildern mit ähnlichen Inhalten. Dies liegt daran, dass die durch eine verlustbehaftete Komprimierung erzeugten Artefakte in so detaillierten Bildern viel seltener bemerkt werden. Bei Bildern mit scharfen Kanten wie Strichzeichnungen, ähnlich düsteren Details oder Text kann die verlustbehaftete Komprimierung jedoch weniger effektiv sein. Auf JPEG-, WebP- und AVIF-Bilder kann eine verlustbehaftete Komprimierung angewendet werden.
Eine verlustfreie Komprimierung reduziert die Dateigröße, indem ein Bild ohne Datenverlust komprimiert wird. Eine verlustfreie Komprimierung beschreibt ein Pixel basierend auf dem Unterschied zu seinen benachbarten Pixeln. Für die Bildformate GIF, PNG, WebP und AVIF wird eine verlustfreie Komprimierung verwendet.
Sie können Ihre Bilder mit Squoosh, ImageOptim oder einem Bildoptimierungsdienst 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 rentabel.
Das <picture>-Element
Das <picture>-Element bietet Ihnen mehr Flexibilität bei der Angabe mehrerer 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>-Element(e) im <picture>-Element verwenden, können Sie AVIF- und WebP-Bilder unterstützen. Sie können aber auch auf kompatiblere ältere Bildformate zurückgreifen, wenn der Browser keine modernen Formate unterstützt. Bei diesem Ansatz wählt der Browser das erste übereinstimmende <source>-Element aus. Wenn das Bild in diesem Format gerendert werden kann, wird dieses Bild 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 und wird auf das JPEG-Format zurückgesetzt, wenn weder AVIF noch WebP unterstützt werden.
Ein <picture>-Element erfordert ein darin verschachteltes <img>-Element. Die Attribute alt, width und height werden auf <img> definiert und unabhängig davon verwendet, welche <source> ausgewählt ist.
Das Element <source> unterstützt auch die Attribute media, srcset und sizes. Ähnlich wie im Beispiel <img> oben geben diese an, welches Bild in den 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 wird der DPR des Geräts als Medienbedingung verwendet. Jedes Gerät mit einem DPR größer oder gleich 1,5 würde das erste <source>-Element verwenden. Mit dem Element <source> wird dem Browser mitgeteilt, dass auf Geräten mit einem Darstellungsbereich, der breiter als 768 Pixel ist, das ausgewählte Bild mit einer Breite von 500 Pixeln angezeigt wird. Auf kleineren Geräten nimmt dieser
die gesamte Breite des Darstellungsbereichs ein. Durch die Kombination der Attribute media und srcset können Sie genauer steuern, welches Bild verwendet werden soll.
Das wird in der folgenden Tabelle veranschaulicht, in der verschiedene Breiten des Darstellungsbereichs und Pixelverhältnisse des Geräts 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 |
| 1.920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Geräte mit einem DPR von 1 laden das image-500.jpg-Bild herunter, einschließlich der meisten Desktopnutzer, die das Bild in einer externen Größe von 500 Pixeln ansehen. Mobile Nutzer mit einem DPR von 3 laden hingegen ein potenziell größeres image-1500.jpg herunter – dasselbe Bild, das auf Desktop-Geräten verwendet wird, mit einem DPR von 3.
<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 Element <picture> so angepasst, dass es ein zusätzliches <source>-Element enthält, um verschiedene Bilder für breite Geräte mit einem hohen DPR-Wert zu verwenden:
| Breite des Darstellungsbereichs (Pixel) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.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 |
| 1.920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Mit dieser zusätzlichen Abfrage können Sie sehen, dass image-1000-sm.jpg und image-1500-sm.jpg in kleinen Darstellungsbereichen angezeigt werden. Mit diesen zusätzlichen Informationen können Sie Bilder weiter komprimieren, da Komprimierungsartefakte bei dieser Größe und Dichte nicht sehr gut sichtbar sind, ohne die Bildqualität auf Desktopgeräten zu beeinträchtigen.
Wenn Sie die Attribute srcset und media anpassen, können Sie die Bereitstellung großer Bilder in kleinen Darstellungsbereichen vermeiden:
<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 Breitendeskriptoren zugunsten der Deskriptoren für das Geräte-Pixel-Verhältnis entfernt. Auf einem Mobilgerät bereitgestellte Bilder sind auf /image-500.jpg oder /image-1000.jpg beschränkt, auch auf Geräten mit einem DPR von 3.
Komplexität managen
Bei responsiven Bildern gibt es viele verschiedene Größen und Formate für jedes Bild. Im vorherigen Beispiel wurden 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 auch hier die Antwort: „Das kommt darauf an.“
Es mag verlockend sein, so viele Varianten zu verwenden, um die beste Anpassung zu liefern, doch jede weitere Bildvariante ist teuer und nutzt den Browser-Cache weniger effizient. Bei nur einer Variante erhält jeder Nutzer das gleiche Bild, sodass es sehr effizient im Cache gespeichert werden kann.
Wenn es andererseits viele Varianten gibt, erfordert jede Variante einen weiteren Cache-Eintrag. Die Serverkosten können steigen und die Leistung beeinträchtigen, wenn der Cache-Eintrag der Variante abgelaufen ist und das Bild noch einmal vom Ursprungsserver abgerufen werden muss.
Abgesehen davon wächst die Größe Ihres HTML-Dokuments mit jeder Variation. Es kann vorkommen, dass für jedes Bild mehrere Kilobyte an HTML gesendet werden.
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 zusätzliche Byte in die HTML-Antworten aufzunehmen.
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 in das JavaScript-Back-End Ihres Servers einfü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 bereitgestellt. Wenn der Accept-Header image/webp enthält, wird das WebP-Bild bereitgestellt. Wenn keine dieser Bedingungen erfüllt ist, wird das JPEG-Bild bereitgestellt.
Bei fast allen Webservertypen lassen sich Antworten basierend auf dem Inhalt des Anfrageheaders Accept ändern. So können Sie beispielsweise Bildanfragen auf Apache-Servern basierend auf dem Accept-Header mit mod_rewrite neu schreiben.
Dies ist vergleichbar mit dem Verhalten in einem Image Content Delivery Network (CDN). Bild-CDNs sind hervorragende Lösungen zum Optimieren von Bildern und zum Senden des optimalen Formats basierend auf dem Gerät und dem Browser des Nutzers.
Wichtig ist, ein Gleichgewicht zu finden, eine angemessene Anzahl von Image-Kandidaten zu generieren und die Auswirkungen auf die Nutzererfahrung zu messen. Unterschiedliche Bilder können unterschiedliche Ergebnisse liefern. Die auf die einzelnen Bilder angewendeten Optimierungen hängen von ihrer Größe auf der Seite und den von den Nutzern verwendeten Geräten ab. Ein Hero-Image in voller Breite kann beispielsweise mehr Varianten erfordern als Thumbnails auf einer E-Commerce-Seite mit Produkteinträgen.
Lazy Loading
Mit dem Attribut loading kannst du den Browser anweisen, Bilder per Lazy Loading im Darstellungsbereich zu laden. Der Attributwert lazy weist den Browser an, das Bild erst herunterzuladen, wenn es sich im Darstellungsbereich oder in dessen Nähe befindet. Dadurch wird Bandbreite eingespart und der Browser kann die Ressourcen priorisieren, die er zum Rendern der kritischen Inhalte benötigt, die sich bereits im Darstellungsbereich befinden.
decoding
Das Attribut decoding teilt dem Browser mit, wie das Bild decodiert werden soll. Durch den Wert async wird dem Browser mitgeteilt, dass das Bild asynchron decodiert werden kann. Dadurch wird möglicherweise die Zeit zum Rendern anderer Inhalte verkürzt. Mit dem Wert sync wird dem Browser mitgeteilt, dass das Bild gleichzeitig mit anderen Inhalten angezeigt werden soll.
Durch den Standardwert 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 eine verlustbehaftete Komprimierung?
Was sagt der Breitendeskriptor (z. B. 1000w) dem Browser über einen in einem srcset-Attribut angegebenen Bildkandidat?
Was informiert das Attribut sizes dem Browser über ein <img>-Element, auf das es angewendet wird?
srcset eines <img>-Elements angegebene Kandidat unter Berücksichtigung der Abmessungen des aktuellen Darstellungsbereichs des Nutzers geladen werden soll.
srcset des Elements <img> geladen werden soll.
Als Nächstes: Videoleistung
Auch wenn Bilder der am häufigsten verwendete Medientyp im Web sind, sind sie bei weitem nicht der einzige Medientyp, den Sie im Hinblick auf die Leistung berücksichtigen müssen. Videos sind ein weiterer Medientyp, der häufig im Web verwendet wird und mit dessen Leistung verbunden ist. Im nächsten Modul dieses Kurses lernen Sie Techniken zur Optimierung von Videos und zu deren effizientem Laden kennen.