Obrazy są często największymi i najpopularniejszymi zasobami w internecie. W rezultacie optymalizacja obrazów może znacznie poprawić skuteczność witryny. W większości przypadków optymalizacja obrazów polega na skróceniu czasu przesyłania danych przez sieć przez wysyłanie mniejszej liczby bajtów, ale możesz też zoptymalizować ilość bajtów wysyłanych do użytkownika, podając obrazy o odpowiednim rozmiarze do urządzenia użytkownika.
Obrazy można dodawać do strony za pomocą elementów <img> lub <picture> albo za pomocą właściwości background-image w kodzie CSS.
Rozmiar obrazu
Pierwszą optymalizacją, którą możesz wykonać w przypadku zasobów obrazów, jest wyświetlanie obrazu w odpowiednim rozmiarze. W tym przypadku termin rozmiar odnosi się do wymiarów obrazu. Nie biorąc pod uwagę innych zmiennych, obraz wyświetlany w kontenerze o wymiarach 500 x 500 pikseli powinien mieć optymalny rozmiar 500 x 500 pikseli. Na przykład użycie kwadratowego obrazu o wymiarach 1000 pikseli oznacza, że obraz jest dwa razy większy niż to potrzebne.
Wybór odpowiedniego rozmiaru obrazu zależy jednak od wielu zmiennych, co sprawia, że w każdym przypadku jest to dość skomplikowane. W 2010 r., gdy pojawił się iPhone 4, rozdzielczość ekranu (640 x 960) była dwukrotnie większa niż w przypadku iPhone’a 3 (320 x 480). Jednak fizyczny rozmiar ekranu iPhone'a 4 pozostał mniej więcej taki sam jak w przypadku iPhone'a 3.
Wyświetlanie wszystkich elementów w wyższej rozdzielczości spowodowałoby, że tekst i obrazy byłyby znacznie mniejsze – w połowie mniejsze niż w obecnej rozdzielczości. Zamiast 1 piksela urządzenia pojawiły się 2 piksele. Nazywa się to współczynnikiem pikseli urządzenia (DPR). iPhone 4 i wiele modeli iPhone'a wydanych później miały DPR 2.
Wracając do wcześniejszego przykładu: jeśli urządzenie ma DPR 2, a obraz jest wyświetlany w kontenerze o wymiarach 500 x 500 pikseli, optymalny rozmiar to kwadrat o wymiarach 1000 pikseli (nazywany właściwym rozmiarem). Podobnie, jeśli urządzenie ma DPR 3, optymalny rozmiar to kwadrat o wymiarach 1500 pikseli.
srcset
Element <img> obsługuje atrybut srcset, który umożliwia określenie listy możliwych źródeł obrazów, których może użyć przeglądarka. Każde określone źródło obrazu musi zawierać adres URL obrazu oraz opis gęstości pikseli (szerokość lub).
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
Powyższy fragment kodu HTML używa deskryptora gęstości pikseli, aby zasugerować przeglądarce użycie wartości image-500.png na urządzeniach z wartością DPR 1, wartości image-1000.jpg na urządzeniach z wartością DPR 2 i wartości image-1500.jpg na urządzeniach z wartością DPR 3.
Chociaż może się to wydawać proste, DPR ekranu nie jest jedynym czynnikiem, który należy wziąć pod uwagę przy wyborze optymalnego obrazu na danej stronie. Kolejną kwestią jest układ strony.
sizes
Poprzednie rozwiązanie działa tylko wtedy, gdy obraz jest wyświetlany w tym samym rozmiarze pikseli CSS we wszystkich widocznych obszarach. W wielu przypadkach układ strony (a wraz z nim rozmiar kontenera) zmienia się w zależności od urządzenia użytkownika.
Atrybut sizes umożliwia określenie zestawu rozmiarów źródeł, gdzie każdy rozmiar źródła składa się z warunku dotyczącego mediów i wartości. Atrybut sizes określa docelowy rozmiar wyświetlania obrazu w pikselach CSS. Połączenie tych informacji z opisami szerokości srcset pozwala przeglądarce wybrać źródło obrazu, które najlepiej pasuje do urządzenia użytkownika.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
W powyższym fragmencie kodu HTML atrybut srcset określa listę kandydatów na obrazy, spośród których przeglądarka może wybrać, rozdzielonych przecinkami. Każdy kandydat na liście składa się z adresu URL obrazu, po którym następuje składnia oznaczająca jego rzeczywistą szerokość. Właściwy rozmiar obrazu to jego wymiary. Na przykład deskryptor 1000w oznacza, że rzeczywista szerokość obrazu to 1000 pikseli.
Na podstawie tych informacji przeglądarka ocenia warunki multimediów w atrybucie sizesi – w tym przypadku – otrzymuje instrukcję, że jeśli szerokość widoku urządzenia przekracza 768 pikseli, obraz jest wyświetlany o szerokości 500 pikseli. Na mniejszych urządzeniach obraz jest wyświetlany w trybie 100vw lub w całej szerokości widoku.
Następnie przeglądarka może połączyć te informacje z listą srcset źródeł obrazów, aby znaleźć optymalny obraz. Jeśli na przykład użytkownik korzysta z urządzenia mobilnego o szerokości ekranu 320 pikseli i współczynniku DPR 3, obraz jest wyświetlany w rozmiary 320 CSS pixels x 3 DPR = 960 device pixels. W tym przykładzie najbliższym rozmiarem obrazu jest image-1000.jpg, który ma rozmiar 1000 pikseli (1000w).
Formaty plików
Przeglądarki obsługują kilka różnych formatów plików graficznych. Nowoczesne formaty obrazów, takie jak WebP i AVIF, mogą zapewniać lepszą kompresję niż PNG czy JPEG, co powoduje, że rozmiar pliku obrazu jest mniejszy, a pobieranie trwa krócej. Udostępniając obrazy w nowoczesnych formatach, możesz skrócić czas wczytywania zasobu, co może skutkować niższą wartością największego wyrenderowania treści (LCP).
WebP to powszechnie obsługiwany format, który działa we wszystkich nowoczesnych przeglądarkach. WebP często zapewnia lepszą kompresję niż JPEG, PNG czy GIF, oferując zarówno kompresję stratną, jak i kompresję bezstratną. WebP obsługuje też przezroczystość kanału alfa nawet przy użyciu kompresji stratnej, co jest funkcją niedostępną w kodzie JPEG.
AVIF to nowszy format obrazu, który nie jest tak szeroko obsługiwany jak WebP, ale jest całkiem dobrze obsługiwany w przeglądarkach. Format AVIF obsługuje zarówno kompresję stratną, jak i bezstratną, a testy wykazały, że w niektórych przypadkach pozwala on zaoszczędzić ponad 50% w porównaniu z formatem JPEG. Format AVIF oferuje też funkcje szerszego gamutu barw (WCG) i High Dynamic Range (HDR).
Kompresja
W przypadku obrazów występują 2 rodzaje kompresji:
Kompresja stratna polega na zmniejszeniu dokładności obrazu za pomocą kwantyzacji, a dodatkowe informacje o kolorach mogą zostać odrzucone za pomocą subpróbkowania barw. Kompresja stratna jest najbardziej skuteczna w przypadku obrazów o wysokiej gęstości z dużą ilością szumu i kolorów – zwykle zdjęć lub obrazów o podobnej zawartości. Dzieje się tak, ponieważ artefakty generowane przez kompresję stratną są znacznie mniej widoczne na zdjęciach z dużą ilością szczegółów. Jednak kompresja stratna może być mniej skuteczna w przypadku obrazów zawierających ostre krawędzie, takich jak rysunki liniowe, podobne szczegóły lub tekst. Kompresja stratna może być stosowana w przypadku obrazów JPEG, WebP i AVIF.
Kompresja bezstratna zmniejsza rozmiar pliku, kompresując obraz bez utraty danych. Bezstratne kompresowanie opisuje piksel na podstawie różnicy w stosunku do sąsiednich pikseli. Bezstratna kompresja jest używana w przypadku formatów obrazów GIF, PNG, WebP i AVIF.
Obrazy możesz skompresować za pomocą narzędzia Squoosh, ImageOptim lub usługi optymalizacji obrazów. Podczas kompresowania nie ma uniwersalnego ustawienia odpowiedniego do wszystkich przypadków. Zalecamy eksperymentowanie z różnymi poziomami kompresji, aż znajdziesz odpowiedni kompromis między jakością obrazu a rozmiarem pliku. Niektóre zaawansowane usługi optymalizacji obrazów mogą wykonywać tę czynność automatycznie, ale nie zawsze są one opłacalne dla wszystkich użytkowników.
Element <picture>
Element <picture> zapewnia większą elastyczność w określaniu wielu kandydatów na obraz:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
Jeśli użyjesz elementów <source> w elemencie <picture>, możesz dodać obsługę obrazów AVIF i WebP, ale w przypadku, gdy przeglądarka nie obsługuje nowszych formatów, wróci ona do starszych formatów obrazów, które są bardziej kompatybilne. W takim przypadku przeglądarka wybiera pierwszy pasujący element <source>. Jeśli może wyświetlić obraz w tym formacie, używa go. W przeciwnym razie przeglądarka przechodzi do następnego określonego elementu <source>. W poprzednim fragmencie kodu HTML format AVIF ma pierwszeństwo przed formatem WebP. Jeśli żaden z nich nie jest obsługiwany, format JPEG jest używany jako alternatywa.
Element <picture> wymaga zagnieżdżenia w nim elementu <img>. Atrybuty alt, width i height są zdefiniowane w <img> i używane niezależnie od tego, który tag <source> jest wybrany.
Element <source> obsługuje też atrybuty media, srcset i sizes. Podobnie jak w przypadku przykładu <img>, wskazują one przeglądarce, które zdjęcie wybrać w różnych widokach.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
Atrybut media przyjmuje stan multimediów. W powyższym przykładzie jako stan multimediów jest używany DPR urządzenia. Każde urządzenie z wartością DPR większą lub równą 1,5 będzie używać pierwszego elementu <source>. Element <source> informuje przeglądarkę, że na urządzeniach z widocznym obszarem szerszym niż 768 pikseli wybrany obraz kandydujący jest wyświetlany z szerokością 500 pikseli. Na mniejszych urządzeniach zajmuje ona całą szerokość widocznego obszaru. Połączenie atrybutów media i srcset daje większą kontrolę nad tym, które zdjęcie ma być używane.
Poniżej w tabeli przedstawiono kilka szerokości widoku i proporcji pikseli urządzenia:
| Szerokość widocznego obszaru (w pikselach) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
| 480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
| 560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Urządzenia z DPR = 1 pobierają obraz image-500.jpg, w tym większość użytkowników komputerów, którzy wyświetlają obraz o zewnętrznym rozmiarze wynoszącym 500 pikseli. Z kolei użytkownicy mobilni z DPR 3 pobierają potencjalnie większy obrazimage-1500.jpg – ten sam obraz, który jest używany na komputerach z DPR 3.
<picture>
<source
media="(min-width: 561px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
W tym przykładzie element <picture> został dostosowany, aby zawierać dodatkowy element <source>, który będzie wyświetlać różne obrazy na szerokich urządzeniach o wysokiej DPR:
| Szerokość widocznego obszaru (w pikselach) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 1000-sm.jpg | 1000-sm.jpg |
| 480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Dzięki temu dodatkowemu zapytaniu możesz zobaczyć, że image-1000-sm.jpg i image-1500-sm.jpg są wyświetlane w małych widokach. Te dodatkowe informacje umożliwiają dalsze kompresowanie obrazów, ponieważ artefakty kompresji nie są zbyt widoczne przy takim rozmiarze i gęstości, a jednocześnie nie pogarszają jakości obrazu na komputerach.
Możesz też uniknąć serwowania dużych obrazów na małych widocznych obszarach, dostosowując atrybuty srcset i media:
<picture>
<source
media="(min-width: 561px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
W poprzednim fragmencie kodu HTML opisy szerokości zostały usunięte na rzecz opisów współczynnika pikseli urządzenia. Obrazy wyświetlane na urządzeniu mobilnym są ograniczone do /image-500.jpg lub /image-1000.jpg, nawet na urządzeniach z DPR 3.
Zarządzanie złożonością
Podczas pracy z obrazami elastycznymi możesz mieć wiele różnych rozmiarów i formatów dla każdego obrazu. W powyższym przykładzie używane są warianty dla każdego rozmiaru, ale wykluczają one formaty AVIF i WebP. Ile wariantów powinieneś mieć? Podobnie jak w przypadku wielu problemów technicznych, odpowiedź zwykle brzmi „to zależy”.
Możesz mieć ochotę utworzyć jak najwięcej wariantów, aby uzyskać najlepsze wyniki, ale każdy dodatkowy wariant obrazu wiąże się z kosztami i zmniejsza efektywność wykorzystania pamięci podręcznej przeglądarki. W przypadku tylko jednej wersji każdy użytkownik otrzymuje ten sam obraz, który można bardzo efektywnie zapisać w pamięci podręcznej.
Z drugiej strony, jeśli masz wiele wariantów, każdy z nich wymaga osobnego wpisu w pamięci podręcznej. Koszty serwera mogą wzrosnąć, a wydajność może się obniżyć, jeśli wpis w pamięci podręcznej wariantu wygaśnie i obraz trzeba będzie ponownie pobrać z serwera źródłowego.
Poza tym rozmiar dokumentu HTML rośnie wraz z każdą odmianą. Może się okazać, że wysyłasz kilka kilobajtów kodu HTML na każdy obraz.
wyświetlać obrazy na podstawie nagłówka żądania Accept,
Nagłówek żądania HTTP Accept informuje serwer, które typy treści rozumie przeglądarka użytkownika. Serwer może używać tych informacji do wyświetlania optymalnego formatu obrazu bez dodawania dodatkowych bajtów do odpowiedzi HTML.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
Poprzedni fragment kodu HTML to uproszczona wersja kodu, który możesz dodać do backendu JavaScript serwera, aby wybrać i wyświetlić optymalny format obrazu.
Jeśli nagłówek żądania Accept zawiera image/avif, obraz AVIF jest wyświetlany. Jeśli nagłówek Accept zawiera image/webp, obraz WebP jest wyświetlany. Jeśli żaden z tych warunków nie jest spełniony, obraz JPEG jest wyświetlany.
Możesz modyfikować odpowiedzi na podstawie zawartości nagłówka żądania Accept w prawie każdym typie serwera WWW. Możesz na przykład za pomocą nagłówka mod_rewrite zmienić żądania obrazów na serwerach Apache na podstawie nagłówka Accept.
Jest to działanie podobne do tego, jakie można zaobserwować w sieci dostarczania treści (CDN) dla obrazów. Sieci CDN obrazów to doskonałe rozwiązania do optymalizacji obrazów i wysyłania ich w najlepszym formacie na podstawie urządzenia i przeglądarki użytkownika.
Kluczem jest znalezienie odpowiedniej równowagi, wygenerowanie rozsądnej liczby zdjęć kandydatów i zmierzenie wpływu na wrażenia użytkowników. Różne obrazy mogą dawać różne wyniki, a optymalizacje stosowane w przypadku poszczególnych obrazów zależą od ich rozmiaru na stronie i urządzeń, których używają użytkownicy. Na przykład baner powitalny o pełnej szerokości może wymagać większej liczby wersji niż miniatury na stronie z informacjami o produkcie w e-sklepie.
Leniwe ładowanie
Za pomocą atrybutu loading możesz poinformować przeglądarkę, aby wczytywała obrazy z opóźnieniem, gdy pojawią się one w widoku. Wartość atrybutu lazy informuje przeglądarkę, aby nie pobierała obrazu, dopóki nie znajdzie się on w obszarze widoku (lub w jego pobliżu). Pozwala to oszczędzać przepustowość, dzięki czemu przeglądarka może nadać priorytet zasobom potrzebnym do wyrenderowania kluczowych treści, które są już w widocznym obszarze.
decoding
Atrybut decoding informuje przeglądarkę, jak ma zdekodować obraz. Wartość async informuje przeglądarkę, że obraz może być dekodowany asynchronicznie, co może skrócić czas renderowania innych treści. Wartość sync informuje przeglądarkę, że obraz powinien być wyświetlany w tym samym czasie co inne treści.
Wartość domyślna auto pozwala przeglądarce zdecydować, co jest najlepsze dla użytkownika.
Demonstracje obrazów
Sprawdź swoją wiedzę
Które formaty obrazów obsługują kompresję bezstratną?
Które formaty obrazów obsługują kompresję stratną?
Co deskryptor szerokości (np. 1000w) mówi przeglądarce o obrazie kandydującym określonym w atrybucie srcset?
Co atrybut sizes mówi przeglądarce o zastosowanej do niego właściwości <img>?
<img> srcset powinien zostać załadowany na podstawie wymiarów bieżącego widocznego obszaru użytkownika.
srcset elementu <img>.
Następny temat: wyniki filmu
Chociaż obrazy są najpopularniejszym typem mediów używanym w internecie, nie są jedynym, o którym należy pamiętać, gdy chodzi o skuteczność. Filmy to kolejny popularny typ multimediów stosowanych w internecie, który ma swoje własne zalety. W następnym module tego kursu poznasz techniki optymalizacji filmów i ich efektywnego wczytywania.