Zastosuj zasady dotyczące zoptymalizowanych obrazów, aby mieć pewność, że Twoja witryna wykorzystuje najskuteczniejsze obrazy.
Obrazy często zajmują znaczną ilość przestrzeni wizualnej i stanowią większość pobieranych bajtów na stronie. Optymalizacja obrazów może zwiększyć wydajność ładowania i zmniejszyć ruch w sieci.
Co ciekawe, ponad połowa witryn w internecie wyświetla źle skompresowane lub niepotrzebnie duże obrazy. Daje to sporo miejsca na poprawę skuteczności dzięki zwykłej optymalizacji obrazów.
Możesz zapytać, jak sprawdzić, czy obrazy są zoptymalizowane i jak je zoptymalizować. Eksperymentujemy z nowym zestawem zasad dotyczących funkcji optymalizacji obrazów: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images i unoptimized-lossless-images-strict.
Wszystkie są teraz dostępne w ramach próbnych wersji origin.
Zasady dotyczące zoptymalizowanych obrazów
Zasady dotyczące uprawnień wprowadzają nowy zestaw ograniczeń dotyczących obrazów, które można zastosować z wymuszaniem w czasie programowania. Obrazy naruszające którekolwiek z tych ograniczeń będą renderowane jako obrazy zastępcze, które można łatwo rozpoznać i naprawić. Te zasady 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 poniżej w sekcji Tryb „Tylko raportowanie w ogóle”).
nadwymiarowe-obrazy
Zasada uprawnień oversized-images ogranicza wymiary własne obrazu w odniesieniu do jego rozmiaru kontenera.
Jeśli dokument używa zasady oversized-images, każdy element <img>, którego wewnętrzna rozdzielczość jest ponad X razy większa od rozmiaru kontenera w jednym z wymiarów, zostanie zastąpiona obrazem zastępczym.
Dlaczego?
Wyświetlanie obrazów większych niż te, które może wyrenderować urządzenie, np. wyświetlanie obrazów z komputerów w kontekście urządzeń mobilnych lub wyświetlanie obrazów o dużej gęstości pikseli na urządzeniu o małej gęstości pikseli, marnuje ruch sieciowy i pamięć urządzenia. Więcej informacji o optymalizowaniu obrazów znajdziesz w artykułach Wyświetlanie obrazów o prawidłowych wymiarach i Wyświetlanie obrazów elastycznych.
Przykłady
Kilka przykładów. Poniżej pokazano domyślne zachowanie przy przycinaniu obrazu na pół o jego rozmiarze.
Jeśli zastosuję poniższe zasady uprawnień, otrzymam obraz zastępczy.
Permissions-Policy: oversized-images *(2);
Podobne wyniki uzyskasz, jeśli zmniejszyę 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 cechy,
oversized-images(wymagana) - Lista źródeł (opcjonalnie)
- Wartości progowe (czyli współczynnik zmniejszania X) źródeł, określone w nawiasach (opcjonalnie)
Zalecamy współczynnik skalowania w dół na poziomie 2,0 lub niższym. Zastanów się nad używaniem obrazów elastycznych o różnej rozdzielczości, aby najlepiej wyświetlać je na ekranach o różnej rozdzielczości itd.
Więcej przykładów
Permissions-Policy: oversized-images *(2.0)
Ta zasada jest egzekwowana w przypadku wszystkich źródeł z wartością progową 2,0. Dowolny element <img> z obrazem, którego współczynnik skalowania w dół przekracza 2,0, jest niedozwolony i zostanie zastąpiony obrazem zastępczym.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
Ta zasada jest egzekwowana w pierwotnym miejscu witryny z wartością progową 1,5.
Elementy <img> w kontekstach przeglądania najwyższego poziomu i w zagnieżdżonych kontekstach przeglądania tego samego źródła będą renderowane normalnie tylko wtedy, gdy współczynnik skalowania w dół nie przekracza 1,5. W pozostałych przypadkach elementy <img> będą renderowane normalnie.
niezoptymalizowane-{lossy,lossless}-obrazy
Zasady dotyczące funkcji unoptimized-lossy-images, unoptimized-lossless-images i unoptimized-lossless-images-strict ograniczają rozmiar pliku obrazu w odniesieniu do jego wewnętrznej rozdzielczości:
unoptimized-lossy-images- W przypadku słabszych formatów współczynnik bajtów na piksel nie powinien przekraczać X przy stałym koszcie wynoszącym 1 KB. W przypadku zdjęć szer. x wys. limit rozmiaru pliku jest obliczany jako szer. x wys. x X + 1024.
unoptimized-lossless-images- W przypadku formatów bezstratnych współczynnik proporcji bajtów na piksel nie powinien przekraczać X przy stałym koszcie wynoszącym 10 KB. W przypadku zdjęć szer. x wys. limit rozmiaru pliku jest obliczany jako szer. x wys. x X + 10 240.
unoptimized-lossless-images-strict- W przypadku formatów bezstratnych współczynnik proporcji bajtów na piksel nie powinien przekraczać X przy stałym koszcie wynoszącym 1 KB. W przypadku zdjęć szer. x wys. limit rozmiaru pliku jest obliczany jako szer. x wys. x X + 1024.
Jeśli dokument korzysta z którejś z tych zasad, każdy element <img> naruszający ograniczenie zostanie zastąpiony obrazem zastępczym.
Dlaczego?
Im większy rozmiar pobieranego pliku, tym dłużej trwa wczytywanie obrazu. Podczas optymalizacji obrazu staraj się, aby plik był jak najmniejszy: wycinając metadane, wybierając dobry format obrazu, stosując kompresję obrazu itp. Przeczytaj artykuły Używanie Imagemin do kompresowania obrazów i Korzystanie z obrazów WebP, aby dowiedzieć się, jak zoptymalizować obrazy.
Przykład
Poniżej pokazano działanie domyślnej przeglądarki. Bez zasady uprawnień niezoptymalizowany obraz stratny może być wyświetlany tak samo jak obraz zoptymalizowany.
Jeśli zastosuję poniższe zasady uprawnień, otrzymam obraz zastępczy.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
Jeśli nie znasz jeszcze zasad uprawnień, więcej informacji znajdziesz w artykule Wprowadzenie do zasad uprawnień.
Podsumowując, zasady unoptimized-{lossy,lossless}-images można określić w ten sposób:
- Nagłówek HTTP
Permissions-Policy - Atrybut
<iframe>allow
Aby zadeklarować zasadę unoptimized-{lossy,lossless}-images, musisz podać:
- nazwa cechy, na przykład
unoptimized-lossy-images(wymagany); - Lista źródeł (opcjonalnie)
- Wartości progowe (np. współczynnik bajtów na piksel X) dla punktów początkowych, określone w nawiasach (opcjonalnie)
W przypadku unoptimized-lossy-images zalecamy stosowanie współczynnika bajtów na piksel wynoszący 0,5 lub mniej, a w przypadku elementów unoptimized-lossless-images i unoptimized-lossless-images-strict – 1 lub mniej.
Formaty WebP mają lepszy współczynnik kompresji niż inne. Jeśli to możliwe, wyświetl wszystkie obrazy w stratnym formacie WebP. Jeśli to nie wystarczy, wypróbuj format bezstratny WebP. Używaj plików JPEG w przeglądarkach, które nie obsługują formatów WebP. Jeśli żaden z nich nie odpowiada, użyj PNG.
Jeśli korzystasz z formatów WebP, spróbuj zastosować bardziej rygorystyczne progi:
- 0.2 – WEBPV8
- 0,5 w przypadku 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 egzekwowana w przypadku wszystkich źródeł z wartością progową równą 0,5 (w przypadku formatów stratnych) i 1 (w przypadku formatów bezstratnych). Każdy element <img>, którego obraz ma współczynnik bajtów na piksel przekraczający ograniczenie, jest niedozwolony. Zostanie on 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 egzekwowana w źródle witryny z wartością progową równą 0,3 (w przypadku formatów utraconych) lub 0,8 (w przypadku formatów bezstratnych). Elementy <img> w kontekstach przeglądania najwyższego poziomu i zagnieżdżonych kontekstach przeglądania tego samego źródła będą renderowane normalnie tylko wtedy, gdy współczynnik bajtów na piksel jest zgodny z tymi ograniczeniami. Elementy <img> w pozostałych miejscach będą renderowane normalnie.
Tryb „tylko raportowanie” w środowisku
Nie chcesz publikować witryny z obrazami zastępczymi. Możesz z nich korzystać w trybie egzekwowania (z niezoptymalizowanymi obrazami renderowanymi jako obrazy zastępcze) podczas tworzenia i testowania, a w wersji produkcyjnej korzystać z trybu „tylko raporty”. (więcej informacji znajdziesz w sekcji Raportowanie zasad uprawnień). Podobnie jak nagłówek HTTP Permissions-Policy, nagłówek Permissions-Policy-Report-Only pozwala łatwo obserwować raporty o naruszeniach bez konieczności ich egzekwowania.
Ograniczenia
Zasady dotyczące obrazów działają tylko w przypadku elementów graficznych HTML (<img>, <source> itp.), a nie są jeszcze obsługiwane w przypadku obrazów tła ani generowanych treści. Jeśli chcesz, aby zasady dotyczące szerszej treści były obsługiwane, daj nam znać.
Optymalizacja obrazów
Wiesz już sporo o optymalizacji obrazów, ale jeszcze nie wiem, jak to zrobić. Ten artykuł nie mieści się w zakresie tego artykułu, ale możesz dowiedzieć się więcej, korzystając z linków poniżej oraz z ćwiczeń z programowania wymienionych na końcu tego artykułu.
Przekaż nam swoją opinię
Mamy nadzieję, że ten artykuł pozwoli Ci lepiej zrozumieć zasady dotyczące zdjęć i zainteresuje Cię. Z przyjemnością wypróbujesz nasze zasady i podzielisz się z nami swoją opinią.
Możesz podzielić się z nami swoją opinią o każdej z funkcji wymienionych w tym artykule na naszej liście adresowej: feature-control@chromium.org.
Chętnie dowiemy się, jakie wartości progowe użyte i które uważasz za przydatne. Chętnie dowiemy się, czy rozwiązanie unoptimized-lossless-images czy unoptimized-lossless-images-strict jest bardziej intuicyjne i łatwiejsze w użyciu, czy też powinniśmy uwzględnić różnicę w kosztach. Pod koniec okresu próbnego wyślemy ankietę. Nie przegap ważnych informacji!