Stosuj zasady dotyczące zoptymalizowanych obrazów, aby mieć pewność, że Twoja witryna używa obrazów o najlepszej skuteczności.
Obrazy często zajmują znaczną ilość przestrzeni wizualnej i stanowią większość pobranych bajtów na stronie. Optymalizacja obrazów może przyspieszyć wczytywanie i ograniczyć 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.
Jak mam sprawdzić, czy moje 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.
Zasady dotyczące zoptymalizowanych obrazów
Zasady dotyczące uprawnień wprowadzają nowy zestaw ograniczeń dotyczących obrazów, które można zastosować podczas egzekwowania zasad w czasie programowania. Obrazy naruszające któreś z ograniczeń będą renderowane jako obrazy zastępcze, które można łatwo zidentyfikować i poprawić. Zasady te można określić w trybie „tylko do raportowania”, w którym obrazy będą renderowane normalnie bez egzekwowania zasad, gdy naruszenia są wykrywane w raportach. (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ć zasadę oversized-images
, musisz podać:
- Nazwa funkcji,
oversized-images
(wymagana). - Lista źródeł (opcjonalnie)
- wartości progów (tj.współczynnika zmniejszania X) dla źródeł określonych 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 najlepiej wyświetlać obrazy na ekranach o różnych rozmiarach, rozdzielczościach itp.
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. Wszystkie pozostałe elementy (<img>
) 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
- Utracone formaty nie powinny przekraczać współczynnika bajtów na piksel, który wynosi X przy stałym limicie 1 KB. W przypadku zdjęć o szer. x wys. próg rozmiaru pliku oblicza się w ten sposób: szer. x wys. x wys. + 1024.
unoptimized-lossless-images
- Formaty bezstratne nie powinny przekraczać współczynnika bajtów na piksel X, z dodatkiem 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ć stosunku bajtów do pikseli wynoszącego 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.
Gdy dokument korzysta z dowolnej z tych zasad, każdy element <img>
naruszający ograniczenie jest zastępowany 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ę poniższe zasady dotyczące uprawnień, otrzymam obraz 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ć zasadę 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).
W przypadku unoptimized-lossy-images
zalecamy współczynnik bajtów na piksel wynoszący 0,5 lub mniej, a dla 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 formatu bezstratnego WebP. Używaj formatu JPEG w przeglądarkach, 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);
Te zasady są wymuszane we wszystkich źródłach z wartością progową 0,5 (w przypadku formatów stratnych) i 1 (w przypadku 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 raportowanie” na wolności
Publikowanie witryny z obrazami zastępczymi może nie być pożądanym rozwiązaniem. Możesz używać zasad w trybie egzekwowania (z niezoptymalizowanymi obrazami renderowanymi jako obrazy zastępcze) podczas tworzenia i testowania, a w wersji produkcyjnej używać trybu „Tylko raportowanie”. (Więcej informacji znajdziesz w sekcji Raportowanie zasad dotyczących uprawnień). Podobnie jak w przypadku nagłówka HTTP Permissions-Policy
nagłówek Permissions-Policy-Report-Only
umożliwia obserwację zgłoszeń o naruszeniach zasad bez konieczności egzekwowania zasad.
Ograniczenia
Zasady dotyczące obrazów działają tylko w przypadku elementów HTML (<img>
, <source>
itp.). Nie są jeszcze obsługiwane w przypadku obrazów tła ani wygenerowanych treści. Jeśli chcesz, aby zasady obejmowały szersze treści, daj nam znać.
Optymalizacja obrazów
W poprzednich wiadomościach pisałem/pisałam o optymalizacji obrazów, ale nie podałem/podałam, jak to zrobić. Nie omawiamy tego tematu w tym artykule, ale możesz dowiedzieć się więcej, korzystając z poniższych linków oraz z ćwiczeń z programowania wymienionych na końcu tego artykułu.
Przekaż nam swoją opinię
Mamy nadzieję, że ten artykuł przybliżył zasady dotyczące obrazów i skutecznie Cię zainteresował. Zachęcamy do wypróbowania zasad i podzielenia się z nami opinią.
Możesz podzielić się z nami opinią o wszystkich funkcjach wymienionych w tym artykule na naszej liście adresowej: feature-control@chromium.org.
Chcielibyśmy się dowiedzieć, jakie wartości progów zostały użyte przez Ciebie 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.