Obrazy są często najpoważniejszym i najpopularniejszym zasobem w sieci. Jako Zoptymalizowanie obrazów może znacznie poprawić skuteczność witryny. W większości przypadków optymalizacja obrazów oznacza skrócenie czasu pracy sieci przez to mniej bajtów, ale możesz też zoptymalizować liczbę bajtów wysyłanych do użytkownika przez wyświetlane obrazy, których rozmiar jest odpowiedni do urządzenia użytkownika.
Obrazy można dodawać do strony za pomocą elementów <img> lub <picture>.
właściwości CSS background-image.
Rozmiar obrazu
W pierwszej kolejności, jeśli chodzi o korzystanie z zasobów graficznych, aby wyświetlić obraz w prawidłowym rozmiarze – w tym przypadku termin size odnosi się do wymiary obrazu. Nie biorąc pod uwagę żadnych innych zmiennych, wyświetla się obraz w kontenerze o wymiarach 500 na 500 pikseli będzie optymalnie wykorzystać 500 pikseli, 500 pikseli. Na przykład użycie kwadratowego obrazu o wymiarach 1000 pikseli oznacza, że jest on dwa razy większy niż to konieczne.
Jednak przy wyborze odpowiedniego rozmiaru obrazu wpływa wiele zmiennych, dzięki czemu dobieranie odpowiednich rozmiarów zdjęć w każdym przypadku jest dość skomplikowane. W 2010 roku, po premierze iPhone'a 4, rozdzielczość ekranu (640 x 960) to dwukrotnie więcej niż w iPhone'ie 3 (320 x 480). Jednak rozmiar fizyczny ekranu iPhone'a 4 pozostała mniej więcej taka sama jak w iPhonie 3.
Wyświetlenie wszystkiego w wyższej rozdzielczości spowodowałoby utworzenie tekstu i obrazów znacznie mniejsze – dokładnie o połowę poprzedniego rozmiaru. Zamiast tego 1 piksel zmienił się w 2 piksele urządzenia. Jest to tzw. współczynnik pikseli urządzenia (DPR). iPhone 4 – oraz wiele modeli iPhone'ów wprowadzonych na rynek – miały DPR 2.
Wracając do poprzedniego przykładu: jeśli urządzenie ma DPR 2, a obraz jest wyświetlany w kontenerze o wymiarach 500 x 500 pikseli, a następnie jako kwadratowy obraz o wymiarach 1000 pikseli. (nazywany rozmiarem wewnętrznym) to teraz rozmiar optymalny. Podobnie, jeśli matryca DPR wynosząca 3 piksele, optymalny rozmiar obrazu kwadratowego to 1500 pikseli.
srcset
Element <img> obsługuje atrybut srcset, który umożliwia określenie
lista możliwych źródeł obrazów, z których może korzystać przeglądarka. Określono każde źródło obrazu
musi zawierać adres URL obrazu oraz deskryptor szerokości lub gęstości pikseli.
<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"
>
Poprzedni fragment kodu HTML używa deskryptora gęstości pikseli, aby wskazać przeglądarkę
aby używać aplikacji image-500.png na urządzeniach z DPR wynoszącą 1, image-1000.jpg na urządzeniach
z DPR równym 2 i image-1500.jpg na urządzeniach z DPR równym 3.
Choć może się wydawać, że wszystko jest w porządku, tryb DPR na ekranie nie jest jedynym są istotne przy wyborze optymalnego obrazu dla danej strony. Adres strony Kolejnym czynnikiem, który należy wziąć pod uwagę, jest układ.
sizes
Poprzednie rozwiązanie działa tylko wtedy, gdy wyświetlasz obraz z tym samym pikselem CSS we wszystkich widocznych obszarach. W wielu przypadkach układ strony i który może się zmieniać w zależności od urządzenia użytkownika.
Atrybut sizes pozwala określić zestaw rozmiarów źródłowych, przy czym każdy z nich
rozmiar źródła składa się z warunku multimediów i wartości. Atrybut sizes
opisuje zamierzony rozmiar wyświetlanej grafiki w pikselach CSS. Po połączeniu
z deskryptorami szerokości srcset przeglądarka może wybrać źródło obrazu
jest najlepsze dla 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 poprzednim fragmencie kodu HTML atrybut srcset określa listę obrazów
propozycje rozdzielone przecinkami, które przeglądarka może wybrać. Każdy kandydat w
Lista składa się z adresu URL obrazu oraz składni oznaczającej
rzeczywistej szerokości obrazu. Rozmiar wewnętrzny obrazu to jego wymiary. Dla:
Na przykład deskryptor 1000w oznacza, że wewnętrzna szerokość obrazu to
1000 pikseli szerokości.
Na podstawie tych informacji przeglądarka ocenia stan multimediów w interfejsie sizes
i – w tym przypadku – informuje, że jeśli szerokość widocznego obszaru urządzenia
przekracza 768 pikseli, obraz jest wyświetlany jako szerokość 500 pikseli. Mniejsze
na urządzeniach mobilnych, obraz jest wyświetlany w rozmiarze 100vw – lub ma pełną szerokość widocznego obszaru.
Przeglądarka może następnie połączyć te informacje z listą obrazów z srcset
i źródeł w celu znalezienia
optymalnych obrazów. Jeśli na przykład użytkownik korzysta z urządzenia mobilnego,
urządzenia o szerokości ekranu 320 pikseli i DPR wynoszącym 3, obraz jest wyświetlany
o 320 CSS pixels x 3 DPR = 960 device pixels. W tym przykładzie najbliższą opcją
rozmiar obrazu wynosi image-1000.jpg, który ma wewnętrzną szerokość 1000
piks. (1000w).
Formaty plików
Przeglądarki obsługują kilka różnych formatów plików graficznych. Nowoczesne formaty obrazu, takie jak Pliki WebP i AVIF mogą zapewniać lepszą kompresję niż PNG czy JPEG, przez co plik rozmiar pliku graficznego jest mniejszy, a jego pobieranie zajmuje mniej czasu. Według wyświetlania obrazów w nowoczesnych formatach, możesz skrócić czas wczytywania zasobu, który może co skutkuje niższym największym wyrenderowaniem treści (LCP).
WebP to powszechnie obsługiwany format, który działa we wszystkich nowoczesnych przeglądarkach. WebP często mają lepszą kompresję niż JPEG, PNG czy GIF, oferując zarówno strate, kompresji bezstratnej. WebP obsługuje również przejrzystość kanału alfa, nawet jeśli przy użyciu kompresji stratnej, której nie oferuje kodek JPEG.
AVIF to nowszy format obrazu. Choć nie jest on tak szeroko obsługiwany jak WebP, obsługuje dostatecznie przyzwoity poziom obsługi w różnych przeglądarkach. AVIF obsługuje zarówno stratny, i kompresję bezstratną, a testy wykazały ponad 50% oszczędności, niż w formacie JPEG w niektórych przypadkach. AVIF oferuje również stosowanie szerokiej gamy kolorów (WCG) oraz HDR (High Dynamic Range).
Kompresja
W przypadku obrazów wyróżniamy 2 rodzaje kompresji:
Kompresja stratna zmniejsza dokładność obrazu za pomocą kwantyzacji, a dodatkowe informacje o kolorach mogą zostać odrzucone przy użyciu podpróbkowania kolorów. Kompresja stratna działa najlepiej w przypadku obrazów o dużej gęstości z dużą ilością szumu i kolory, zwykle zdjęcia lub obrazy o podobnej zawartości. Dzieje się tak, ponieważ artefakty powstające w wyniku kompresji stratnej są znacznie mniej zauważalne. na tak szczegółowych zdjęciach. Kompresja stratna może być jednak mniej skuteczna, zdjęcia zawierające ostre krawędzie, takie jak grafiki liniowe, podobnie proste szczegóły; tekstu. Kompresję stratną można zastosować do obrazów JPEG, WebP i AVIF.
Kompresja bezstratna zmniejsza rozmiar pliku, kompresując obraz bez danych straty. Kompresja bezstratna opisuje piksel na podstawie różnicy między jego pikseli. Stosuje się kompresję bezstratną dla plików GIF, PNG, WebP oraz Formaty obrazu AVIF.
Możesz skompresować obrazy przy użyciu funkcji Squoosh, ImageOptim lub obrazu w usłudze optymalizacji. Podczas kompresowania nie ma uniwersalnego ustawienia odpowiedniego dla dla wszystkich przypadków. Zalecamy eksperymentowanie z różnymi aż znajdziesz kompromis między jakością obrazu rozmiar pliku. Niektóre zaawansowane usługi optymalizacji obrazów mogą to zrobić za Ciebie automatycznie, ale może nie być opłacalne dla wszystkich użytkowników.
Element <picture>
Element <picture> zapewnia większą elastyczność w określaniu wielu
kandydaci obrazu:
<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 można korzystać z bardziej zgodnego obrazu starszego typu.
, jeśli przeglądarka nie obsługuje nowoczesnych formatów. Przy takim podejściu
przeglądarka wybiera pierwszy określony element <source>, który pasuje. Jeśli może
renderuje obraz w tym formacie, używa tego obrazu. W przeciwnym razie przeglądarka
przechodzi do następnego określonego elementu <source>. W poprzednim kodzie HTML
, format AVIF ma pierwszeństwo przed formatem WebP, a zamiast niego używany jest
format JPEG, jeśli nie są obsługiwane pliki AVIF ani WebP.
Element <picture> wymaga umieszczonego w nim elementu <img>.
Atrybuty alt, width i height są zdefiniowane w <img> i używane
bez względu na wybraną opcję <source>.
Element <source> obsługuje też atrybuty media, srcset i sizes
. Podobnie jak we wcześniejszym przykładzie z funkcją <img>, wskazują one
który obraz wybrać w różnych widocznych obszarach.
<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 warunek mediów. W poprzednim przykładzie para klucz-wartość
Tryb DPR urządzenia jest używany jako warunek multimediów. Dowolne urządzenie o DPR przekraczającym
lub równa 1,5 spowoduje użycie pierwszego elementu <source>. Element <source>
informuje przeglądarkę, że na urządzeniach z widocznym obszarem szerszym niż 768 pikseli
wybrany obraz o szerokości 500 pikseli. Na mniejszych urządzeniach
zajmuje całą szerokość widocznego obszaru. Łącząc media i srcset
możesz mieć większą kontrolę nad tym, który obraz zostanie użyty.
Zostało to pokazane w tabeli poniżej, gdzie kilka szerokości i szerokości widocznego obszaru współczynnik proporcji urządzeń jest oceniany:
| 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 wynoszącym 1 pobierają obraz image-500.jpg, w tym większość
użytkowników komputerów – którzy wyświetlają obraz w rozmiarze zewnętrznym o szerokości 500 pikseli; Wł.
natomiast użytkownicy urządzeń mobilnych z DPR wynoszącym 3 pobierają potencjalnie większe
image-1500.jpg – ten sam obraz używany na komputerach z DPR wynoszącym 3.
<picture>
<source
media="(min-width: 560px) 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 tak, aby zawierał dodatkową
<source>, aby używać różnych obrazów w przypadku szerokich urządzeń o wysokiej rozdzielczości DPR:
| Szerokość widocznego obszaru (w pikselach) | 1 DPR | 1,5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.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 |
Po wykonaniu tego dodatkowego zapytania zobaczysz, że image-1000-sm.jpg i
image-1500-sm.jpg są wyświetlane w małych widocznych obszarach. Te dodatkowe informacje
pozwala jeszcze bardziej skompresować obrazy, ponieważ artefakty kompresji nie są nadmiernie skompresowane
widoczne przy tym rozmiarze i gęstości, nie pogarszając jakości obrazu
na komputerach.
Ewentualnie, dostosowując atrybuty srcset i media, możesz uniknąć
wyświetlanie dużych obrazów w małych widocznych obszarach:
<picture>
<source
media="(min-width: 560px)"
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 deskryptory szerokości zostały usunięte na rzecz
deskryptorów współczynnika pikseli urządzeń. Obrazy wyświetlane na urządzeniu mobilnym są ograniczone
na /image-500.jpg lub /image-1000.jpg, nawet na urządzeniach z DPR ustawionym na 3.
Jak zarządzać złożonością
Podczas pracy z obrazami elastycznymi możesz napotkać różne rozmiary i formaty. W poprzednim przykładzie odmiany dla każdego rozmiaru, z wyłączeniem AVIF i WebP. Ile wariantów trzeba wybrać ? Podobnie jak w przypadku wielu innych problemów inżynieryjnych odpowiedź brzmi: „to zależy”.
Chociaż kuszące może być posiadanie jak największej liczby odmian, aby zapewnić najlepsze dopasowanie, każda dodatkowa wersja zdjęcia jest płatna i mniej efektywna i pamięć podręczna przeglądarki. W przypadku tylko 1 wariantu każdy użytkownik otrzymuje to samo zdjęcie, dzięki czemu można ją bardzo wydajnie przechowywać w pamięci podręcznej.
Jeśli natomiast występuje wiele odmian, każda z nich wymaga wprowadzenia wpisu w pamięci podręcznej. Koszty serwera mogą wzrosnąć i zmniejszyć wydajność, jeśli wpis w pamięci podręcznej wariantu wygasł i trzeba ponownie pobrać obraz z na serwerze pierwotnym.
Poza tym rozmiar dokumentu HTML zwiększa się z każdą odmianą. Ty że możemy wysłać kilka kilobajtów kodu HTML dla każdego obrazu.
Wyświetlaj obrazy na podstawie nagłówka żądania Accept
Nagłówek żądania HTTP Accept informuje serwer o typie treści
przeglądarki użytkownika. Serwer może ich użyć do wyświetlania reklam
optymalny format obrazu bez dodawania 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
zaplecza JavaScript serwera w celu wybrania i wyświetlenia optymalnego formatu obrazu.
Jeśli nagłówek Accept żądania zawiera ciąg image/avif, obraz AVIF jest
. W przeciwnym razie, jeśli nagłówek Accept zawiera ciąg image/webp, obraz WebP
. Jeśli żaden z tych warunków nie jest spełniony, obraz JPEG jest
.
Możesz modyfikować odpowiedzi na podstawie zawartości nagłówka żądania Accept
na niemal każdym typie serwera WWW – możesz na przykład przepisywać żądania dotyczące obrazów
na serwerach Apache na podstawie nagłówka Accept i tagu mod_rewrite.
Działanie to niczym nie odbiega od sposobu działania w sieci dostarczania treści graficznych (CDN). Sieci CDN obrazów są doskonałym rozwiązaniem do optymalizacji obrazów i wysyłania aby zoptymalizować się pod kątem urządzenia i przeglądarki użytkownika.
Najważniejsze jest znaleźć równowagę, wygenerować rozsądną liczbę propozycji obrazów, i mierzyć ich wpływ na wrażenia użytkowników. Różne obrazy mogą różne wyniki, a optymalizacje zastosowane do każdego obrazu zależą od jego do rozmiaru strony i urządzeń, z których korzystają użytkownicy. Na przykład plik baner powitalny o pełnej szerokości może wymagać więcej wariantów niż miniatury w przypadku stronie z informacjami o produkcie e-commerce.
Leniwe ładowanie
Można skonfigurować leniwe ładowanie obrazów, gdy pojawią się w
widoczny obszar za pomocą atrybutu loading. Wartość atrybutu lazy informuje
nie może pobierać obrazu, dopóki nie znajdzie się w widocznym obszarze (lub w jego pobliżu). Ten
oszczędza przepustowość, pozwalając przeglądarce na traktowanie priorytetowo zasobów, których potrzebuje
i do renderowania kluczowych treści, które są już w widocznym obszarze.
decoding
Atrybut decoding informuje przeglądarkę, jak ma zdekodować obraz. O
async informuje przeglądarkę, że obraz można dekodować asynchronicznie,
i skrócić czas renderowania innych treści. Wartość sync informuje
w przeglądarce, że obraz powinien być wyświetlany w tym samym czasie co inne treści.
Domyślna wartość auto pozwala przeglądarce zdecydować, co jest najlepsze
użytkownika.
Wersje demonstracyjne obrazów
Sprawdź swoją wiedzę
Które formaty obrazów obsługują kompresję bezstratną?
Które formaty obrazów obsługują kompresję stratną?
Co mówi deskryptor szerokości (np. 1000w)
przeglądarka dotycząca kandydującego obrazu określonego w tagu srcset
?
Co atrybut sizes informuje przeglądarkę o
<img> elementu, do którego jest zastosowany?
srcset elementu <img> powinna zostać wczytana,
zgodnie z wymiarami bieżącego widocznego obszaru użytkownika.
srcset elementu <img>.
Kolejny krok: wyniki filmu
Obrazy mogą być najpopularniejszym typem multimediów używanym w internecie, ale który jest jedyny, o którym musisz pamiętać, jeśli chodzi o wyniki. Wideo to kolejny powszechny rodzaj mediów stosowanych w internecie, który ma swoje własne oraz kwestii wydajności. W następnym module tego kursu omówimy następujące zagadnienia: optymalizacji filmów i sprawnego wczytywania ich.