Wstępne wczytywanie obrazów elastycznych

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Opublikowano: 30 września 2019 r., ostatnia aktualizacja: 10 lipca 2026 r.

Możesz wstępnie wczytywać obrazy elastyczne, co może znacznie przyspieszyć ich wczytywanie, ponieważ przeglądarka będzie mogła zidentyfikować prawidłowy obraz z srcset przed wyrenderowaniem tagu img.

Omówienie obrazów elastycznych

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

Załóżmy, że przeglądasz internet na ekranie o szerokości 300 pikseli, a strona żąda obrazu o szerokości 1500 pikseli. Ta strona zmarnowała dużo danych mobilnych, ponieważ ekran nie może wykorzystać tej dodatkowej rozdzielczości. Idealnie byłoby, gdyby przeglądarka pobrała wersję obrazu, która jest tylko nieco szersza niż rozmiar ekranu, np. 325 pikseli. Zapewnia to obraz w wysokiej rozdzielczości bez marnowania danych i przyspiesza wczytywanie obrazu.

Obrazy elastyczne umożliwiają przeglądarkom pobieranie różnych zasobów graficznych na różne urządzenia. Jeśli nie używasz sieci CDN do obsługi obrazów, zapisz kilka wymiarów każdego obrazu i określ je w atrybucie srcset. Wartość w informuje przeglądarkę o szerokości każdej wersji, dzięki czemu może ona wybrać odpowiednią wersję na dowolne urządzenie:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Omówienie wstępnego wczytywania

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

Wstępne wczytywanie umożliwia informowanie przeglądarki o kluczowych zasobach, które chcesz wczytać jak najszybciej, zanim zostaną one wykryte w kodzie HTML. Jest to szczególnie przydatne w przypadku zasobów, które nie są łatwo wykrywalne, takich jak czcionki zawarte w arkuszach stylów, obrazy tła lub zasoby wczytywane ze skryptu.

<link rel="preload" as="image" href="important.png" fetchpriority="high">

imagesrcset i imagesizes

Element <link> używa atrybutów imagesrcset i imagesizes do wstępnego wczytywania obrazów elastycznych. Używaj ich razem z <link rel="preload">, z syntaktyką srcset i sizes używaną w <img> elemencie.

Jeśli na przykład chcesz wstępnie wczytać obraz elastyczny określony za pomocą:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Możesz to zrobić, dodając do sekcji <head> kodu HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

Spowoduje to zainicjowanie żądania przy użyciu tej samej logiki wyboru zasobów, której używają srcset i sizes.

Przypadki użycia

Oto kilka przypadków użycia wstępnego wczytywania obrazów elastycznych.

Wstępne wczytywanie obrazów elastycznych wstawianych dynamicznie

Wyobraź sobie, że dynamicznie wczytujesz banery powitalne w ramach pokazu slajdów i wiesz, który obraz będzie wyświetlany jako pierwszy. W takim przypadku prawdopodobnie chcesz wyświetlić ten obraz jak najszybciej i nie czekać, aż skrypt pokazu slajdów go wczyta.

Ten problem możesz sprawdzić w witrynie z dynamicznie wczytywaną galerią obrazów:

  1. Otwórz tę prezentację pokazu slajdów w nowej karcie.
  2. Aby otworzyć Narzędzia dla programistów, naciśnij Control+Shift+J (lub Command+Option+J na Macu).
  3. Kliknij kartę Sieć.
  4. Z listy Ograniczanie wybierz Szybkie 3G.
  5. Odznacz pole wyboru Wyłącz pamięć podręczną.
  6. Odśwież stronę.
Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący wykres kaskadowy, na którym zasób JPEG zaczyna się pobierać dopiero po wykonaniu kodu JavaScript.
Bez wstępnego wczytywania obrazy zaczynają się wczytywać dopiero po zakończeniu działania skryptu przez przeglądarkę. W przypadku pierwszego obrazu to opóźnienie jest niepotrzebne.

Użycie tutaj preload umożliwia rozpoczęcie wczytywania obrazu z wyprzedzeniem, dzięki czemu może on być gotowy do wyświetlenia, gdy przeglądarka będzie musiała go wyświetlić.

Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący wykres kaskadowy z zasobem JPEG pobieranym równolegle z kodem JavaScript.
Wstępne wczytywanie pierwszego obrazu umożliwia rozpoczęcie jego wczytywania w tym samym czasie co skrypt.

Aby zobaczyć różnicę, jaką daje wstępne wczytywanie, sprawdź tę samą dynamicznie wczytywaną galerię obrazów, ale z wstępnie wczytanym pierwszym obrazem wykonując czynności z pierwszego przykładu.

Wstępne wczytywanie obrazów tła za pomocą image-set

Jeśli masz różne obrazy tła dla różnych gęstości ekranu, możesz je określić w CSS za pomocą składni image-set. Przeglądarka może wtedy wybrać, który obraz ma być wyświetlany, na podstawie współczynnika DPR ekranu.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

Problem z obrazami tła CSS polega na tym, że przeglądarka wykrywa je dopiero po pobraniu i przetworzeniu całego kodu CSS w sekcji <head> strony.

Ten problem możesz sprawdzić w przykładowej witrynie z obrazem tła elastycznego.

Panel Sieć w Narzędziach deweloperskich w Chrome pokazujący wykres kaskadowy, na którym zasób JPEG zaczyna się pobierać dopiero po pobraniu CSS.
W tym przykładzie pobieranie obrazu nie rozpoczyna się, dopóki nie zostanie pobrany cały kod CSS, co powoduje niepotrzebne opóźnienie w wyświetlaniu obrazu.

Wstępne wczytywanie obrazów elastycznych umożliwia szybsze wczytywanie tych obrazów.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

Pominięcie atrybutu href pozwala zapewnić, że przeglądarki, które nie obsługują imagesrcset w elemencie <link>, ale obsługują image-set w CSS, pobiorą prawidłowe źródło. W takim przypadku nie będą jednak korzystać z wstępnego wczytywania.

W prezentacji wstępnego wczytywania obrazu tła elastycznego możesz sprawdzić, jak zachowuje się poprzedni przykład z wstępnie wczytanym obrazem tła elastycznego w prezentacji wstępnego wczytywania obrazu tła elastycznego.

Panel Sieć w Narzędziach deweloperskich w Chrome przedstawiający wykres kaskadowy z zasobem JPEG pobieranym równolegle z niektórymi plikami CSS.
W tym przypadku obraz i CSS zaczynają się pobierać w tym samym czasie, co przyspiesza wczytywanie obrazu.

Praktyczne efekty wstępnego wczytywania obrazów elastycznych

Wstępne wczytywanie obrazów elastycznych może teoretycznie przyspieszyć ich wczytywanie, ale co to daje w praktyce?

Aby odpowiedzieć na to pytanie, utworzyłem 2 kopie przykładowego sklepu PWA: jedną, która nie wstępnie wczytuje obrazów, i drugą, która wstępnie wczytuje niektóre z nich. Ponieważ witryna leniwie wczytuje obrazy za pomocą JavaScriptu, prawdopodobnie skorzysta na wstępnym wczytywaniu tych, które pojawiają się w początkowym obszarze widocznym.

Dało to te wyniki w przypadku braku wstępnego wczytywania i wstępnego wczytywania obrazu:

Porównanie pasków filmowych WebPageTest pokazujące, że wstępnie załadowane obrazy wyświetlają się o około 1,5 sekundy szybciej.
Wstępnie wczytane obrazy docierają znacznie szybciej, co znacznie poprawia wygodę użytkowników.

Wstępne wczytywanie i <picture>

Grupa robocza ds. wydajności w internecie omawia dodanie odpowiednika wstępnego wczytywania dla srcset i sizes, ale nie dla <picture> elementu, który obsługuje "kierunku artystycznego" przypadek użycia.

Wciąż jest kilka problemów technicznych, które trzeba rozwiązać w przypadku wstępnego wczytywania <picture>, ale w międzyczasie można zastosować obejścia:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

Logika wyboru źródła obrazu elementu <picture> przechodzi po kolei atrybuty media elementów <source>, znajduje pierwszy pasujący i używa dołączonego zasobu.

Ponieważ wstępne wczytywanie elastyczne nie ma pojęcia „kolejności” ani „pierwszego dopasowania”, musisz przetłumaczyć punkty przerwania na coś takiego:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Wstępne wczytywanie i type

Element <picture> obsługuje też dopasowywanie do pierwszego type, co umożliwia udostępnianie różnych formatów obrazów, dzięki czemu przeglądarka może wybrać pierwszy obsługiwany format obrazu.

Ten przypadek użycia jest tylko częściowo obsługiwany w przypadku wstępnego wczytywania: przeglądarki powinny pobierać wstępnie wczytane zasoby tylko w przypadku obsługiwanych typów. Dzięki temu możesz uniemożliwić przeglądarkom wstępne wczytywanie nieobsługiwanych typów MIME, dodając to do wstępnego wczytywania:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

W przeciwieństwie do <picture> nie zatrzyma się jednak na pierwszym obsługiwanym typie. Jeśli więc uwzględnisz kilka wstępnie wczytanych zasobów dla kilku typów, wszystkie obrazy zostaną wstępnie wczytane:

Nie rób tego – wstępnie wczytuj wiele typów:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Zamiast tego wstępnie wczytaj najbardziej preferowany typ:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Wstępne wczytywanie najnowszego formatu (w tym przypadku AVIF) działa jako progresywne ulepszenie, w którym przeglądarki obsługujące ten typ będą korzystać z wstępnego wczytywania, a inne nie.

W przypadku witryn, w których obraz jest szybko wykrywalny w kodzie HTML, zalecamy unikanie wstępnego wczytywania i zamiast tego umożliwienie skanerowi wstępnego wczytywania pobierania obrazów z elementów <picture> i <source>. Jest to i tak sprawdzona metoda, zwłaszcza w przypadku używania interfejsu Fetch Priority API do ustalania priorytetów odpowiedniego obrazu, ponieważ umożliwia wstępne wczytywanie dokładnego obrazu na podstawie obsługi przeglądarki. Eliminuje też ryzyko, że wstępne wczytywanie stanie się nieaktualne w stosunku do głównego kodu, gdy zmienią się obrazy lub strony.

Wpływ na największe wyrenderowanie treści (LCP)

Ponieważ obrazy mogą być kandydatami do największego wyrenderowania treści (LCP), ich wstępne wczytywanie może poprawić LCP witryny.

Niezależnie od tego, czy wstępnie wczytywany obraz jest elastyczny, wstępne wczytywanie działa najlepiej, gdy zasób graficzny nie jest wykrywalny w początkowym ładunku znaczników. Większą poprawę LCP uzyskasz też w witrynach, które renderują znaczniki po stronie klienta, niż w witrynach, które wysyłają kompletne znaczniki z serwera.