Wydajność obrazu

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:

1. Utrata kompresji
2. Kompresja bezstratna

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:

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:

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ę

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.