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

Stosuj zasady optymalizacji 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ą 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-imagesunoptimized-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ę.

Domyślne zachowanie podczas zmiany rozmiaru.
Domyślne zachowanie zmiany 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 dla kontenera.
Gdy obraz jest za duży dla kontenera.

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

Szerokość po zmianie rozmiaru Wysokość po zmianie rozmiaru
Zmień szerokość i 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ó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ę te zasady dotyczące uprawnień, zamiast obrazu pojawi się symbol 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ć 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-imagesunoptimized-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.