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. Durch die Optimierung von Bildern lässt sich die Ladeleistung verbessern und der Netzwerkverkehr 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 Sie wissen, ob Ihre Bilder optimiert sind und wie Sie sie optimieren sollten. 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 Bilder eingeführt, die während der Entwicklung durchgesetzt 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 Modus „Nur melden“ festgelegt werden. In diesem Modus werden Bilder ohne Erzwingung normal gerendert, während Verstöße über Meldungen beobachtet werden. Weitere Informationen finden Sie unten im Abschnitt Nur-Meldungsmodus in der Praxis.
oversized-images
Die oversized-images
-Berechtigungsrichtlinie schränkt die ursprünglichen Abmessungen eines Bildes in Bezug auf seine Containergröße ein.
Wenn für ein Dokument die oversized-images
-Richtlinie verwendet wird, werden alle <img>
-Elemente, deren Auflösung mehr als X-mal größer als die Containergröße in einer der 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 zur Optimierung Ihrer Bilder finden Sie unter Bilder mit den 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, wird stattdessen ein Platzhalterbild angezeigt.
Permissions-Policy: oversized-images *(2);
Ich erhalte ähnliche Ergebnisse, wenn ich nur die Breite oder Höhe verringere.
Verwendung
Zusammenfassung: Die oversized-images
-Richtlinie kann auf folgende Arten angegeben werden:
Permissions-Policy
-HTTP-Header<iframe>
allow
-Attribut
Wenn Sie die oversized-images
-Richtlinie erklären möchten, müssen Sie Folgendes angeben:
- Der Feature-Name,
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.
unoptimized-{lossy,lossless}-images
Die Richtlinien für die Funktionen 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. 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.
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 von Bildern finden Sie unter Bilder mit Imagemin komprimieren und WebP-Bilder verwenden.
Beispiel
Im Folgenden wird das Standardverhalten des Browsers veranschaulicht. Ohne die Berechtigungsrichtlinie kann ein nicht optimiertes Bild mit Verlusten genauso angezeigt werden wie ein optimiertes Bild.
Wenn ich die folgende Berechtigungsrichtlinie anwende, wird stattdessen ein Platzhalterbild angezeigt.
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
Wenn Sie eine unoptimized-{lossy,lossless}-images
-Richtlinie deklarieren möchten, müssen Sie 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. Verwenden Sie 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.
Modus „Nur Berichterstellung“ in der Praxis
Die Veröffentlichung einer Website mit Platzhalterbildern ist möglicherweise nicht das, was Sie sich wünschen. 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 Melden von Verstößen gegen die Richtlinie zu Berechtigungen. Ähnlich wie beim Permissions-Policy
-HTTP-Header können Sie mit dem Permissions-Policy-Report-Only
-Header Verstoßmeldungen in der Praxis beobachten, ohne dass Maßnahmen ergriffen werden.
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 schon viel über die Optimierung von Bildern gesprochen, aber nicht erklärt, wie das geht. 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 gerne wissen, ob unoptimized-lossless-images
oder unoptimized-lossless-images-strict
intuitiver und nutzerfreundlicher ist oder ob wir stattdessen eine andere Überhead-Zulage verwenden sollten. Gegen Ende des Testzeitraums senden wir Ihnen eine Umfrage. Mehr dazu demnächst!