Mit Richtlinien für optimierte Bilder sorgen Sie dafür, dass auf Ihrer Website die leistungsstärksten Bilder verwendet werden.
Bilder nehmen oft einen erheblichen Teil des sichtbaren Bereichs ein und machen den Großteil der heruntergeladenen Byte einer Website aus. Durch die Optimierung von Images kann die Ladeleistung verbessert und der Netzwerkverkehr reduziert werden.
Überraschenderweise liefern über die Hälfte der Websites schlecht komprimierte oder unnötig große Bilder. Dies lässt viel Raum für Leistungsverbesserungen durch die Optimierung der Bilder.
Sie fragen sich vielleicht: Woher weiß ich, ob meine Bilder optimiert sind, und wie sollte ich sie optimieren? Wir testen derzeit neue Funktionsrichtlinien für die Bildoptimierung: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images und unoptimized-lossless-images-strict.
Alle sind jetzt für Ursprungstests verfügbar.
Richtlinien für optimierte Bilder
Für die Berechtigungsrichtlinie werden neue festgelegte Einschränkungen für Images eingeführt, die zusammen mit der Erzwingung bei der Entwicklung angewendet werden können. Bilder, die gegen eine der Einschränkungen verstoßen, werden als Platzhalterbilder gerendert, die leicht zu erkennen und zu korrigieren sind. Diese Richtlinien können im Modus „Nur Bericht“ angegeben werden. In diesem Modus werden Bilder normal gerendert, ohne dass sie erzwungen werden, während in Berichten Verstöße festgestellt werden. Weitere Informationen finden Sie unten im Abschnitt Modus „Nur Bericht“ in der Praxis.
Übergroße Bilder
Die Berechtigungsrichtlinie oversized-images schränkt die intrinsischen Abmessungen eines Images in Bezug auf seine Containergröße ein.
Wenn ein Dokument die Richtlinie oversized-images verwendet, wird jedes <img>-Element, dessen Auflösung mehr als X-mal größer als die Containergröße in beiden Dimensionen ist, durch ein Platzhalterbild ersetzt.
Warum?
Die Bereitstellung von Bildern, die größer sind als das, was das Anzeigegerät rendern kann, z. B. das Bereitstellen von Desktopbildern für mobile Kontexte oder das Bereitstellen von Bildern mit hoher Pixeldichte für ein Gerät mit niedriger Pixeldichte, verschwendet Netzwerkverkehr und Gerätespeicher. Informationen zum Optimieren von Bildern finden Sie unter Bilder mit richtigen Abmessungen bereitstellen und Responsive Bilder bereitstellen.
Beispiele
Einige Beispiele veranschaulichen dies. Im Folgenden sehen Sie das Standardverhalten, wenn die Anzeigegröße eines Bildes halbiert wird.
Wenn ich die folgende Berechtigungsrichtlinie anwende, erhalte ich stattdessen ein Platzhalterbild.
Permissions-Policy: oversized-images *(2);
Ich erhalte ähnliche Ergebnisse, wenn ich nur die Breite oder Höhe verringere.
Verwendung
Die Richtlinie oversized-images kann also folgendermaßen angegeben werden:
Permissions-Policy-HTTP-Header<iframe>allow-Attribut
Wenn du die Richtlinie „oversized-images“ deklarieren möchtest, musst du Folgendes angeben:
- Name der Funktion,
oversized-images(erforderlich) - Eine Liste der Ursprünge (optional)
- Die Schwellenwerte (d.h. das Herunterskalierungsverhältnis X) für die Ursprünge, die in Klammern angegeben werden (optional)
Wir empfehlen ein Herunterskalierungsverhältnis von 2,0 oder weniger. Verwenden Sie responsive Bilder mit verschiedenen Auflösungen, damit Bilder für verschiedene Bildschirmgrößen, Auflösungen usw. optimal dargestellt werden.
Weitere Beispiele
Permissions-Policy: oversized-images *(2.0)
Die Richtlinie wird für alle Ursprünge mit einem Grenzwert von 2,0 erzwungen. Jedes <img>-Element mit einem Bild, dessen Herunterskalierungsverhältnis größer als 2,0 ist, ist nicht zulässig und wird durch ein Platzhalterbild ersetzt.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
Die Richtlinie wird beim Ursprung der Website mit einem Grenzwert von 1,5 erzwungen.
<img>-Elemente in Browserkontexten der obersten Ebene und verschachtelten Ursprungskontexten werden nur dann normal gerendert, wenn das Herunterskalierungsverhältnis kleiner oder gleich 1,5 ist. Auf allen anderen Geräten werden <img>-Elemente normal gerendert.
unoptimierten-{lossy,lossless}-Bildern
Die Funktionsrichtlinien unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict beschränken die Dateigröße eines Bildes in Bezug auf seine intrinsische Auflösung:
unoptimized-lossy-images- Verlustbehaftete Formate sollten ein Byte-pro-Pixel-Verhältnis von X nicht überschreiten, mit einer festen Kapazität von 1 KB. Für ein Bild im Format B x H errechnet sich der Grenzwert für die Dateigröße mit B x H x X + 1024.
unoptimized-lossless-images- Verlustfreie Formate sollten ein Byte-pro-Pixel-Verhältnis von X nicht überschreiten, mit einem festen Kontingent von 10 KB. Für ein Bild im Format B x H wird der Grenzwert für die Dateigröße mit B x H x X + 10.240 berechnet.
unoptimized-lossless-images-strict- Verlustfreie Formate sollten ein Byte-pro-Pixel-Verhältnis von X nicht überschreiten, mit einer festen Kapazität von 1 KB. Für ein Bild im Format B x H errechnet sich der Grenzwert für die Dateigröße mit B x H x X + 1024.
Wenn in einem Dokument eine dieser Richtlinien verwendet wird, wird jedes <img>-Element, das gegen die Einschränkung verstößt, durch ein Platzhalterbild ersetzt.
Warum?
Je größer die Downloadgröße ist, desto länger dauert das Laden eines Bildes. Die Dateigröße sollte beim Optimieren eines Bildes so klein wie möglich gehalten werden. Dazu gehören beispielsweise das Entfernen von Metadaten, die Auswahl eines guten Bildformats oder die Verwendung der Bildkomprimierung. Informationen zur Optimierung Ihrer Bilder finden Sie unter Bilder mit Imagemin komprimieren und WebP-Bilder verwenden.
Beispiel
Im Folgenden sehen Sie das Standardverhalten des Browsers. Ohne die Berechtigungsrichtlinie kann ein nicht optimiertes, verlustbehaftetes Bild genauso wie ein optimiertes Bild angezeigt werden.
Wenn ich die folgende Berechtigungsrichtlinie anwende, erhalte ich stattdessen ein Platzhalterbild.
Permissions-Policy: unoptimized-lossy-images *(0.5);
Verwendung
Wenn Sie mit Berechtigungsrichtlinien noch nicht vertraut sind, finden Sie unter Einführung in die Richtlinie für Berechtigungen weitere Informationen.
unoptimized-{lossy,lossless}-images-Richtlinien können also auf zwei Arten angegeben werden:
Permissions-Policy-HTTP-Header<iframe>allow-Attribut
Zum Deklarieren einer unoptimized-{lossy,lossless}-images-Richtlinie müssen Sie Folgendes angeben:
- Der Name der Funktion, z. B.
unoptimized-lossy-images(erforderlich) - Eine Liste der Ursprünge (optional)
- Die Schwellenwerte (d.h. Byte-pro-Pixel-Verhältnis X) für die Ursprünge, die in Klammern angegeben werden (optional)
Wir empfehlen ein Byte-pro-Pixel-Verhältnis von 0,5 oder weniger für unoptimized-lossy-images und ein Byte-pro-Pixel-Verhältnis von 1 oder weniger für unoptimized-lossless-images und unoptimized-lossless-images-strict.
WebP-Formate haben bessere Komprimierungsverhältnisse als andere Formate. Stellen Sie alle Images nach Möglichkeit im verlustbehafteten WebP-Format bereit. Wenn dies nicht ausreicht, versuchen Sie es mit dem verlustfreien WebP-Format. Verwenden Sie JPEG in Browsern, die keine WebP-Formate unterstützen. Verwenden Sie PNG, wenn keines der Formate funktioniert.
Wenn Sie WebP-Formate verwenden, versuchen Sie es mit strengeren Grenzwerten:
- 0.2 für WEBPV8
- 0,5 für WEBPL
Weitere Beispiele
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
Diese Richtlinie wird für alle Ursprünge mit einem Grenzwert von 0,5 (für verlustbehaftete Formate) und 1 (für verlustfreie Formate) erzwungen. Jedes <img>-Element, dessen Bild ein Byte-pro-Pixel-Verhältnis überschreitet, das die Einschränkung überschreitet, ist nicht zulässig und wird durch ein Platzhalterbild ersetzt.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
Diese Richtlinie wird beim Ursprung der Website mit einem Grenzwert von 0,3 (für verlustbehaftete Formate) und 0,8 (für verlustfreie Formate) erzwungen. Die <img>-Elemente in Browserkontexten der obersten Ebene und dieselben Ursprungsserverkontexte werden nur dann normal gerendert, wenn das Verhältnis von Byte pro Pixel diese Einschränkungen erfüllt. Die <img>-Elemente werden an allen anderen Stellen normal gerendert.
Modus „Nur Bericht“ in der Praxis
Möglicherweise möchten Sie eine Website mit Platzhalterbildern nicht veröffentlichen. Sie können die Richtlinien während der Entwicklung und beim Staging im Erzwingungsmodus (mit nicht optimierten Bildern, die als Platzhalterbilder gerendert werden) und den Modus „Nur Bericht“ für die Produktion verwenden. Weitere Informationen finden Sie unter Berichterstellung für Berechtigungsrichtlinien. Ähnlich wie beim Permissions-Policy-HTTP-Header können Sie mit dem Permissions-Policy-Report-Only-Header Verstoßberichte beobachten, ohne dass Maßnahmen ergriffen werden.
Beschränkungen
Bildrichtlinien können nur für HTML-Bildelemente (<img>, <source> usw.) verwendet werden. Für Hintergrundbilder oder generierte Inhalte werden sie noch nicht unterstützt. Wenn Sie möchten, dass Richtlinien für umfassendere Inhalte unterstützt werden, teilen Sie uns dies bitte mit.
Bilder optimieren
Ich habe bereits einiges über das Optimieren von Bildern gesprochen, aber nicht gesagt, wie das geht. Dieses Thema wird in diesem Artikel nicht behandelt. Über die unten stehenden Links und die am Ende des Artikels aufgeführten Codelabs erfahren Sie jedoch mehr.
Bitte gib uns Feedback.
Dieser Artikel hat Ihnen hoffentlich ein gutes Verständnis der Richtlinien für Bilder vermittelt und Sie aufgeregt. Wir würden uns freuen, wenn du die Richtlinien ausprobierst und uns Feedback gibst.
Du kannst uns zu jeder der in diesem Artikel erwähnten Funktionen Feedback über unsere Mailingliste senden: feature-control@chromium.org.
Wir würden gerne wissen, welche Grenzwerte Sie verwendet und nützlich fanden. Wir würden gerne wissen, ob unoptimized-lossless-images oder unoptimized-lossless-images-strict intuitiver und nutzerfreundlicher ist oder ob wir stattdessen eine zusätzliche Aufwandsentschädigung verwenden sollten. Gegen Ende des Tests werden wir
eine Umfrage versenden. Mehr dazu demnächst!