Bildrichtlinien für kurze Ladezeiten und mehr

Mithilfe der Richtlinien für optimierte Bilder können Sie dafür sorgen, dass auf Ihrer Website die leistungsstärksten Bilder verwendet werden.

Luna Lu
Luna Lu

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.

Das Standardverhalten beim Ändern der Größe.
Das Standardverhalten beim Ändern der Größe.

Wenn ich die folgende Berechtigungsrichtlinie anwende, wird stattdessen ein Platzhalterbild angezeigt.

Permissions-Policy: oversized-images *(2);

Wenn das Bild zu groß für den Container ist.
Wenn das Image zu groß für den Container ist

Ich erhalte ähnliche Ergebnisse, wenn ich nur die Breite oder Höhe verringere.

Breite nach Größenanpassung Höhe nach Größenänderung
Breite und Höhe ändern.

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.

Vergleich eines optimierten Bildes mit einem nicht optimierten Bild
Vergleich eines optimierten Bildes mit einem nicht optimierten Bild

Wenn ich die folgende Berechtigungsrichtlinie anwende, wird stattdessen ein Platzhalterbild angezeigt.

Permissions-Policy: unoptimized-lossy-images *(0.5);

Wenn das Bild nicht optimiert ist.
Wenn das Bild nicht optimiert ist

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!