Stosuj zasady optymalizacji obrazów, aby mieć pewność, że Twoja witryna używa obrazów o najlepszej skuteczności.
Obrazy często zajmują znaczną część przestrzeni wizualnej i stanowią większość pobranych bajtów w witrynie. Optymalizacja obrazów może poprawić wydajność wczytywania i zmniejszyć ruch w sieci.
Co zaskakujące, ponad połowa witryn w internecie wyświetla słabo skompresowane lub niepotrzebnie duże obrazy. Pozostawia to dużo miejsca na poprawę skuteczności przez optymalizację obrazów.
Możesz się zastanawiać, jak sprawdzić, czy Twoje obrazy są zoptymalizowane i jak je zoptymalizować. Eksperymentujemy z nowym zbiorem zasad funkcji dotyczących optymalizacji obrazów: oversized-images
, unoptimized-lossy-images
, unoptimized-lossless-images
i unoptimized-lossless-images-strict
.
Wszystkie są teraz dostępne w ramach testów wersji natywnej.
Zoptymalizowane zasady dotyczące obrazów
Zasady dotyczące uprawnień wprowadzają nowy zestaw ograniczeń dotyczących obrazów, które można stosować w ramach egzekwowania zasad na etapie rozwoju. Obrazy, które naruszają którekolwiek z tych ograniczeń, będą renderowane jako obrazy zastępcze, które są łatwe do zidentyfikowania i poprawienia. Te zasady można określić w trybie tylko do zgłaszania, w którym obrazy będą renderowane normalnie bez egzekwowania zasad, podczas gdy naruszenia będą obserwowane za pomocą raportów. (więcej informacji znajdziesz w sekcji Tryb tylko do zgłaszania).
oversized-images
Zasady dotyczące uprawnień oversized-images
ograniczają wymiary wewnętrzne obrazu w zależności od rozmiaru kontenera.
Gdy dokument używa zasad oversized-images
, każdy element <img>
, którego rozdzielczość jest ponad X razy większa od rozmiaru kontenera w dowolnym wymiarze, zostanie zastąpiony obrazem zastępczym.
Dlaczego?
Przesyłanie obrazów większych niż może wyświetlić urządzenie, np. przesyłanie obrazów przeznaczonych na komputery w kontekście mobilnym lub przesyłanie obrazów o dużej gęstości pikseli na urządzenie o niskiej gęstości pikseli, to marnowanie ruchu sieciowego i pamięci urządzenia. Aby dowiedzieć się więcej o optymalizacji obrazów, przeczytaj artykuły Wyświetlanie obrazów o prawidłowych wymiarach i Wyświetlanie obrazów elastycznych.
Przykłady
Poniżej przedstawiamy kilka przykładów. Poniżej przedstawiamy działanie domyślne, gdy rozmiar wyświetlania obrazu zostanie zmniejszony o połowę.
Jeśli zastosuję te zasady dotyczące uprawnień, zamiast obrazu pojawi się symbol zastępczy.
Permissions-Policy: oversized-images *(2);
Otrzymuje podobne wyniki, jeśli zmniejszę tylko szerokość lub wysokość.
How to use
Podsumowując, zasadę oversized-images
można określić za pomocą:
- Nagłówek HTTP
Permissions-Policy
- Atrybut
<iframe>
allow
Aby zadeklarować zasady oversized-images
, musisz podać:
- Nazwa funkcji,
oversized-images
(wymagana) - Lista źródeł (opcjonalnie)
- Wartości progowe (np.współczynnik zmniejszania X) dla źródeł, określone w nawiasach (opcjonalnie).
Zalecamy zastosowanie współczynnika zmniejszania 2,0 lub niższego. Rozważ użycie obrazów elastycznych o różnych rozdzielczościach, aby wyświetlać obrazy w najlepszy sposób na różnych rozmiarach ekranu.
Więcej przykładów
Permissions-Policy: oversized-images *(2.0)
Zasada jest stosowana do wszystkich źródeł o wartości progowej 2,0. Element <img>
zawierający obraz, którego współczynnik skalowania w dół jest większy niż 2,0, jest niedozwolony i zostanie zastąpiony obrazem zastępczym.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
Zasada jest egzekwowana w źródle witryny z wartością progową 1,5.
<img>
w ramach kontekstów przeglądania najwyższego poziomu i zagnieżdżonych kontekstów przeglądania tego samego pochodzenia będą renderowane normalnie tylko wtedy, gdy współczynnik zmniejszania będzie mniejszy lub równy 1,5. <img>
elementy w innych miejscach będą renderowane normalnie.
unoptimized-{lossy,lossless}-images
Zasady dotyczące funkcji unoptimized-lossy-images
, unoptimized-lossless-images
i unoptimized-lossless-images-strict
ograniczają rozmiar pliku obrazu w stosunku do jego rozdzielczości:
unoptimized-lossy-images
- Formaty stratne nie powinny przekraczać współczynnika bajtów na piksel X, z dodatkowym stałym marginesem 1 KB. W przypadku obrazu W x H próg rozmiaru pliku jest obliczany jako W x H x X + 1024.
unoptimized-lossless-images
- Formaty bezstratne nie powinny przekraczać współczynnika bajtów na piksel X, z uwzględnieniem stałego marginesu 10 KB. W przypadku obrazu W x H próg rozmiaru pliku jest obliczany jako W x H x X + 10240.
unoptimized-lossless-images-strict
- Formaty bezstratne nie powinny przekraczać współczynnika bajtów na piksel X, z dodatkowym stałym marginesem 1 KB. W przypadku obrazu W x H próg rozmiaru pliku jest obliczany jako W x H x X + 1024.
Jeśli dokument używa którejś z tych zasad, każdy element <img>
, który narusza ograniczenie, zostanie zastąpiony obrazem zastępczym.
Dlaczego?
Im większy rozmiar pliku do pobrania, tym dłużej trwa wczytywanie obrazu. Podczas optymalizacji obrazu należy zadbać o to, aby rozmiar pliku był jak najmniejszy. Można to zrobić, usuwając metadane, wybierając odpowiedni format obrazu, stosując kompresję obrazu itp. Informacje o optymalizowaniu obrazów znajdziesz w artykułach Używanie Imagemin do kompresowania obrazów i Używanie obrazów WebP.
Przykład
Poniżej przedstawiono domyślne zachowanie przeglądarki. Bez zasad dotyczących uprawnień nieoptymalizowany obraz z stratą może być wyświetlany tak samo jak obraz zoptymalizowany.
Jeśli zastosuję te zasady dotyczące uprawnień, zamiast obrazu pojawi się symbol zastępczy.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
Jeśli nie znasz zasad dotyczących uprawnień, zapoznaj się z wprowadzeniem do zasad dotyczących uprawnień.
Podsumowując, zasady unoptimized-{lossy,lossless}-images
można określić za pomocą:
- Nagłówek HTTP
Permissions-Policy
- Atrybut
<iframe>
allow
Aby zadeklarować zasady unoptimized-{lossy,lossless}-images
, musisz podać:
- Nazwa funkcji, np.
unoptimized-lossy-images
(wymagane) - Lista źródeł (opcjonalnie)
- Wartości progowe (np.stosunek bajtów do pikseli X) dla źródeł, określone w nawiasach (opcjonalnie).
Zalecamy, aby w przypadku unoptimized-lossy-images
stosunek bajtów do pikseli wynosił 0,5 lub mniej, a w przypadku unoptimized-lossless-images
i unoptimized-lossless-images-strict
– 1 lub mniej.
Formaty WebP mają lepsze współczynniki kompresji niż inne formaty. Jeśli to możliwe, wyświetlaj wszystkie obrazy w formacie WebP z utratą jakości. Jeśli to nie wystarczy, spróbuj użyć bezstratnego formatu WebP. Używaj formatu JPEG w przypadku przeglądarek, które nie obsługują formatu WebP. Użyj formatu PNG, jeśli żaden z tych formatów nie działa.
Jeśli używasz formatów WebP, spróbuj użyć bardziej rygorystycznych wartości progowych:
- 0,2 dla WEBPV8
- 0,5 dla WEBPL
Więcej przykładów
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
Ta zasada jest stosowana we wszystkich źródłach z wartością progową 0,5 (dla formatów stratnych) i 1 (dla formatów bezstratnych). Każdy element <img>
, którego obraz ma stosunek bajtów do pikseli przekraczający ograniczenie, jest niedozwolony i zostanie zastąpiony obrazem zastępczym.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
Ta zasada jest wymuszana w źródle witryny z wartością progową 0,3 (dla formatów stratnych) i 0,8 (dla formatów bezstratnych). Elementy <img>
w kontekstach przeglądania najwyższego poziomu i w kontekstach przeglądania zagnieżdżonych w ramach tego samego źródła będą renderowane normalnie tylko wtedy, gdy stosunek bajtów do pikseli będzie spełniał te ograniczenia. Elementy <img>
w pozostałych miejscach będą renderowane normalnie.
Tryb tylko do zgłaszania w praktyce
Publikowanie witryny z obrazami zastępczymi może nie być pożądanym rozwiązaniem. Podczas rozwoju i testów możesz używać zasad w trybie egzekwowania (z nieoptymalizowanymi obrazami renderowanymi jako obrazy zastępcze), a w produkcji – trybu tylko do raportowania. (Więcej informacji znajdziesz w zasadach dotyczących uprawnień i zgłaszaniu). Podobnie jak nagłówek Permissions-Policy
HTTP, nagłówek Permissions-Policy-Report-Only
pozwala Ci obserwować zgłoszenia naruszeń w naturze bez żadnego egzekwowania.
Ograniczenia
Zasady dotyczące obrazów działają tylko w przypadku elementów obrazu HTML (<img>
, <source>
itd.). Nie są jeszcze obsługiwane w przypadku obrazów tła ani treści wygenerowanych. Jeśli chcesz, aby zasady były stosowane do szerszego zakresu treści, daj nam znać.
Optymalizowanie obrazów
W poprzednich wiadomościach pisałem/pisałam o optymalizacji obrazów, ale nie podałem/podałam, jak to zrobić. Temat ten wykracza poza zakres tego artykułu, ale więcej informacji znajdziesz w linkach poniżej oraz w laboratoriach programistycznych wymienionych na końcu artykułu.
Prześlij nam opinię
Mamy nadzieję, że ten artykuł pomógł Ci zrozumieć zasady dotyczące obrazów i zainspirował Cię do działania. Zachęcamy do wypróbowania zasad i podzielenia się z nami opinią.
Opinie na temat każdej z funkcji wymienionych w tym artykule możesz przesyłać na naszą listę adresową: feature-control@chromium.org.
Chcielibyśmy poznać wartości progowe, których używasz i które okazały się przydatne. Chcielibyśmy się dowiedzieć, czy unoptimized-lossless-images
czy unoptimized-lossless-images-strict
jest bardziej intuicyjne i łatwe w użyciu, czy też powinniśmy użyć zamiast tego dodatku na koszty ogólne. Pod koniec okresu próbnego wyślemy ankietę. Więcej informacji już wkrótce.