Zasady dotyczące obrazów – m.in. szybkie wczytywanie

Stosuj zasady dotyczące zoptymalizowanych obrazów, aby mieć pewność, że Twoja witryna używa obrazów o najlepszej skuteczności.

Luna Lu
Luna Lu

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-imagesunoptimized-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ę.

Domyślne zachowanie podczas zmiany rozmiaru.
Domyślne zachowanie przy zmianie rozmiaru.

Jeśli zastosuję te zasady dotyczące uprawnień, zamiast obrazu pojawi się symbol zastępczy.

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

Gdy obraz jest za duży, aby zmieścić się w kontenerze.
Gdy obraz jest za duży, aby zmieścić się w kontenerze.

Otrzymuje podobne wyniki, jeśli zmniejszę tylko szerokość lub wysokość.

Zmieniono szerokość szerokości Wysokość po zmianie rozmiaru
Zmień rozmiar i szerokość.

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ówUż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.

Porównanie zoptymalizowanego obrazu z niezoptymalizowanym.
Porównywanie zoptymalizowanego obrazu z niezoptymalizowanym.

Jeśli zastosuję poniższe zasady dotyczące uprawnień, otrzymam obraz zastępczy.

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

Gdy obraz nie jest zoptymalizowany.
Gdy obraz nie jest zoptymalizowany

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.