Mithilfe der Richtlinien für optimierte Bilder können Sie dafür sorgen, dass auf Ihrer Website die leistungsstärksten Bilder verwendet werden.
Bilder nehmen oft einen erheblichen visuellen Raum ein und machen den Großteil der heruntergeladenen Bytes auf einer Website aus. Die Optimierung von Bildern kann die Ladeleistung verbessern und den Netzwerktraffic reduzieren.
Überraschenderweise stellen mehr als die Hälfte der Websites im Web schlecht komprimierte oder unnötig große Bilder bereit. So lässt sich die Leistung durch die Optimierung der Bilder erheblich steigern.
Sie fragen sich vielleicht: Woher weiß ich, ob meine Bilder optimiert sind, und wie kann ich sie optimieren? Wir testen 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
Mit der Berechtigungsrichtlinie werden neue Einschränkungen für Images eingeführt, die bei der Erzwingung während der Entwicklung angewendet werden können. Bilder, die gegen eine der Einschränkungen verstoßen, werden als Platzhalterbilder gerendert, die sich leicht erkennen und korrigieren lassen. Diese Richtlinien können im Berichtsmodus festgelegt werden, in dem Bilder normal und ohne Erzwingung gerendert werden, während Verstöße über Berichte beobachtet werden. Weitere Informationen finden Sie unten im Abschnitt Nur Berichtsmodus in der Wildnis.
oversized-images
Die oversized-images
-Berechtigungsrichtlinie schränkt die ursprünglichen Abmessungen eines Bildes in Bezug auf seine Containergröße ein.
Wenn in einem Dokument die Richtlinie oversized-images
verwendet wird, wird jedes <img>
-Element, dessen intrinsische Auflösung mehr als X-mal größer als die Containergröße in beiden Dimensionen ist, durch ein Platzhalterbild ersetzt.
Warum?
Wenn Bilder größer als das Display des Anzeigegeräts gesendet werden, z. B. Desktopbilder in mobilen Kontexten oder Bilder mit hoher Pixeldichte auf einem Gerät mit niedriger Pixeldichte, wird Netzwerkverkehr und Gerätespeicher verschwendet. 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
Zusammenfassend lässt sich sagen, dass die oversized-images
-Richtlinie auf folgende Arten angegeben werden kann:
Permissions-Policy
-HTTP-Header<iframe>
allow
-Attribut
Wenn Sie die oversized-images
-Richtlinie erklären möchten, müssen Sie Folgendes angeben:
- Der Funktionsname
oversized-images
(erforderlich) - Eine Liste der Ursprünge (optional)
- Die Grenzwerte (d.h. das Downscaling-Verhältnis X) für die Ursprünge, in Klammern angegeben (optional)
Wir empfehlen ein Downscaling-Verhältnis von 2,0 oder weniger. Verwenden Sie responsive Bilder mit unterschiedlichen Auflösungen, um Bilder optimal auf verschiedenen Bildschirmgrößen, Auflösungen usw. zu präsentieren.
Weitere Beispiele
Permissions-Policy: oversized-images *(2.0)
Die Richtlinie wird mit einem Grenzwert von 2,0 auf alle Ursprünge angewendet. <img>
-Elemente mit einem Bild, dessen Downscaling-Verhältnis über 2,0 liegt, sind nicht zulässig und werden durch einen Platzhalter ersetzt.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
Die Richtlinie wird am Ursprung der Website mit einem Grenzwert von 1,5 durchgesetzt.
<img>
-Elemente in Browserkontexten der obersten Ebene und verschachtelte Browserkontexte mit demselben Ursprung werden nur dann normal gerendert, wenn das Downscaling-Verhältnis maximal 1,5 beträgt. <img>
-Elemente an anderen Stellen werden normal gerendert.
nicht optimierte-{lossy,lossless}-Images
Die Richtlinien unoptimized-lossy-images
, unoptimized-lossless-images
und unoptimized-lossless-images-strict
beschränken die Dateigröße eines Bildes in Bezug auf seine intrinsische Auflösung:
unoptimized-lossy-images
- Bei verlustbehafteten Formaten darf das Byte-pro-Pixel-Verhältnis X nicht überschritten werden. Dabei ist ein fester Overhead von 1 KB zulässig. Für ein Bild (B × H) wird der Grenzwert für die Dateigröße wie folgt berechnet: B × H × X + 1.024.
unoptimized-lossless-images
- Bei verlustfreien Formaten darf das Byte-zu-Pixel-Verhältnis X nicht überschritten werden. Dabei ist ein fester Overhead von 10 KB zulässig. Bei einem Bild mit den Abmessungen „B x H“ wird der Grenzwert für die Dateigröße als „B x H x X + 10240“ berechnet.
unoptimized-lossless-images-strict
- Bei verlustfreien Formaten darf das Byte-zu-Pixel-Verhältnis X nicht überschritten werden. Dabei ist ein fester Overhead von 1 KB zulässig. Bei einem Bild mit den Abmessungen „B x H“ wird der Grenzwert für die Dateigröße als „B x H x X + 1024“ berechnet.
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 es, bis ein Bild geladen wird. Die Dateigröße sollte beim Optimieren eines Bilds so klein wie möglich gehalten werden: Entfernen von Metadaten, Auswahl eines geeigneten Bildformats, Verwendung der Bildkomprimierung usw. Weitere Informationen zur Optimierung Ihrer Bilder finden Sie unter Bilder mit Imagemin komprimieren und WebP-Bilder verwenden.
Beispiel
Im Folgenden wird das Standardverhalten des Browsers dargestellt. Ohne die Berechtigungsrichtlinie kann ein nicht optimiertes Bild mit Verlusten genauso angezeigt werden wie ein optimiertes Bild.
Wenn ich die folgende Berechtigungsrichtlinie anwende, erhalte ich stattdessen ein Platzhalterbild.
Permissions-Policy: unoptimized-lossy-images *(0.5);
Verwendung
Wenn Sie die Richtlinie für Berechtigungen noch nicht kennen, lesen Sie den Hilfeartikel Einführung in die Richtlinie für Berechtigungen.
Zusammenfassend lässt sich sagen, dass unoptimized-{lossy,lossless}-images
-Richtlinien entweder über Folgendes angegeben werden können:
Permissions-Policy
-HTTP-Header<iframe>
allow
-Attribut
Zum Deklarieren einer unoptimized-{lossy,lossless}-images
-Richtlinie musst du Folgendes angeben:
- Der Name der Funktion, z. B.
unoptimized-lossy-images
(erforderlich) - Eine Liste der Ursprünge (optional)
- Die Grenzwerte (d. h. das Byte-pro-Pixel-Verhältnis X) für die Ursprünge, in Klammern angegeben (optional)
Wir empfehlen für unoptimized-lossy-images
ein Byte-pro-Pixel-Verhältnis von 0,5 oder weniger und für unoptimized-lossless-images
und unoptimized-lossless-images-strict
ein Byte-pro-Pixel-Verhältnis von 1 oder weniger.
WebP-Formate haben ein besseres Komprimierungsverhältnis als andere Formate. Stellen Sie nach Möglichkeit alle Bilder im verlustbehafteten WebP-Format bereit. Wenn das nicht ausreicht, versuchen Sie es mit dem verlustfreien WebP-Format. Verwenden Sie JPEG in Browsern, die WebP-Formate nicht unterstützen. Verwende PNG, wenn keines dieser 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 gilt für alle Ursprünge mit einem Grenzwert von 0,5 (für Verlustbehaftete Formate) und 1 (für verlustfreie Formate). <img>
-Elemente, deren Bild ein Byte-pro-Pixel-Verhältnis hat, das die Einschränkung überschreitet, sind nicht zulässig und werden durch einen Platzhalter 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 an der Quelle 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 verschachtelten Browserkontexten mit demselben Ursprung werden nur dann normal gerendert, wenn das Byte-pro-Pixel-Verhältnis diese Einschränkungen erfüllt. Die <img>
-Elemente an anderen Stellen werden normal gerendert.
„Nur Bericht“-Modus
Möglicherweise möchten Sie eine Website mit Platzhalterbildern veröffentlichen. Sie können die Richtlinien während der Entwicklung und des Stagings im Erzwingungsmodus (mit nicht optimierten Bildern, die als Platzhalterbilder gerendert werden) und in der Produktion im reinen Meldemodus verwenden. Weitere Informationen finden Sie unter Berichterstellung zu Berechtigungsrichtlinien. Ähnlich wie im HTTP-Header Permissions-Policy
können Sie mit dem Header Permissions-Policy-Report-Only
Verstöße melden, ohne dass dies erzwungen wird.
Beschränkungen
Bildrichtlinien gelten nur für HTML-Bildelemente (<img>
, <source>
usw.) und werden noch nicht für Hintergrundbilder oder generierte Inhalte unterstützt. Wenn Sie möchten, dass Richtlinien für mehr Inhalte gelten, lassen Sie es uns wissen.
Bilder optimieren
Ich habe bereits viel über die Optimierung von Bildern gesprochen, aber nicht beschrieben, wie das funktioniert. Dieses Thema fällt nicht in den Rahmen dieses Artikels. Weitere Informationen finden Sie in den folgenden Links und in den Codelabs am Ende des Artikels.
Bitte geben Sie uns Feedback
Wir hoffen, dass Sie mit diesem Artikel einen guten Überblick über die Bildrichtlinien erhalten haben und sie Ihnen Lust auf mehr gemacht haben. Wir würden uns freuen, wenn du die Richtlinien ausprobierst und uns Feedback dazu gibst.
Sie können uns Feedback zu den in diesem Artikel genannten Funktionen über unsere Mailingliste senden: feature-control@chromium.org.
Wir würden gerne wissen, welche Grenzwerte Sie verwendet und als nützlich empfunden haben. Wir würden gern wissen, ob unoptimized-lossless-images
oder unoptimized-lossless-images-strict
intuitiver und nutzerfreundlicher ist oder ob wir stattdessen ein anderes Aufwandskontingent verwenden sollten. Gegen Ende des Tests werden wir Ihnen
eine Umfrage zusenden. Mehr dazu demnächst!