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.
<ph type="x-smartling-placeholder">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:
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.
<ph type="x-smartling-placeholder">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:
Breite des Darstellungsbereichs (Pixel) | 1 dR. | 1,5 dPR | 2 dp. | 3 dp. |
---|---|---|---|---|
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 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:
Breite des Darstellungsbereichs (Pixel) | 1 dR. | 1,5 dPR | 2 dp. | 3 dp. |
---|---|---|---|---|
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 |
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
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
Welche Bildformate unterstützen die verlustfreie Komprimierung?
Welche Bildformate unterstützen die verlustbehaftete Komprimierung?
Was sagt der Breitendeskriptor (z. B. 1000w
) aus?
der Browser bezüglich eines in einer srcset
angegebenen Bilds
?
Was sagt das Attribut sizes
dem Browser über ein
<img>
Element, auf das es angewendet wird?
srcset
des <img>
-Elements muss geladen werden,
Abmessungen des
aktuellen Darstellungsbereichs des Nutzers.
srcset
-Attribut des <img>
-Elements.
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.