Wstępne wczytywanie obrazów elastycznych

Barry Pollard

Yoav Weiss

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

Uwaga: co najmniej 1 wersja demonstracyjna na tej stronie już nie działa, ponieważ Glitch zakończył hosting.

Możesz wstępnie wczytywać obrazy elastyczne, co może znacznie przyspieszyć ich wczytywanie, pomagając przeglądarce zidentyfikować prawidłowy obraz z srcset, zanim wyrenderuje tag img.

Omówienie obrazów elastycznych

Browser Support

• 73
• 79
• 78
• 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 zużyła dużo mobilnej transmisji danych, ponieważ ekran nie może nic zrobić z tą dodatkową rozdzielczością. Najlepiej, gdyby przeglądarka pobrała wersję obrazu, która jest tylko nieco szersza niż rozmiar ekranu, na przykład 325 pikseli. Dzięki temu obraz jest wyświetlany w wysokiej rozdzielczości bez marnowania danych i szybciej się wczytuje.

Obrazy responsywne pozwalają przeglądarkom pobierać różne zasoby obrazów na różne urządzenia. Jeśli nie używasz sieci CDN do obsługi obrazów, zapisz kilka wymiarów dla 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ę dla każdego urządzenia:

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

Omówienie wstępnego wczytywania

Browser Support

• 50
• 79
• 85
• 11.1

Source

Wstępne wczytywanie pozwala poinformować przeglądarkę o zasobach o kluczowym znaczeniu, które chcesz wczytać jak najszybciej, zanim zostaną 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 czy zasoby wczytywane ze skryptu.

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

Ważne: wstępnie wczytane obrazy mają prawdopodobnie wysoki priorytet, dlatego powinny zawierać atrybut fetchpriority="high". W przeciwnym razie wstępne wczytywanie będzie miało domyślny priorytet atrybutu as. W przypadku obrazów domyślnie jest to low, dzięki czemu przeglądarka może traktować priorytetowo treści blokujące renderowanie, a nie obrazy. Więcej informacji znajdziesz w artykule Optymalizowanie wczytywania zasobów za pomocą interfejsu Fetch Priority API.

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">, ze składnią srcset i sizes w elemencie <img>.

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 kodu HTML <head>:

<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.

Ostrzeżenie: obrazy elastyczne mogą nie być obsługiwane w przypadku wstępnego wczytywania nagłówków HTTP, ponieważ obszar wyświetlania jest definiowany tylko podczas tworzenia dokumentu. Oznacza to, że nie można ich używać do wcześniejszego wstępnego wczytywania w ramach 103 Early Hints.

Niektóre przeglądarki, np. Chrome, przetwarzają wstępne wczytywanie z tymi atrybutami po zdefiniowaniu dokumentu i przetworzeniu pierwszego fragmentu kodu HTML. Zaproponowano dodanie tego elementu do standardu HTML. Może to być jednak ryzykowne, jeśli obszar wyświetlania zostanie ponownie zdefiniowany w dalszej części dokumentu (np. w późnym elemencie <meta name="viewport">), ponieważ nieprawidłowe obrazy elastyczne mogły już zacząć się wczytywać.

Aby uniknąć problemów, zalecamy używanie elementów <link rel="preload" href="..."> w przypadku obrazów elastycznych zamiast nagłówków odpowiedzi HTTP Link: <...>; rel="preload".

Przypadki użycia

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

Wstępnie wczytuj dynamicznie wstawiane obrazy elastyczne

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

Możesz sprawdzić ten problem na stronie internetowej z dynamicznie wczytywaną galerią obrazów:

1. Otwórz tę prezentację demonstracyjną w nowej karcie.
2. Aby otworzyć Narzędzia deweloperskie, 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ę.

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 pozwala na wcześniejsze rozpoczęcie wczytywania obrazu, dzięki czemu może on być gotowy do wyświetlenia, gdy przeglądarka będzie musiała go wyświetlić.

Wstępne wczytywanie pierwszego obrazu pozwala rozpocząć jego wczytywanie w tym samym czasie co skrypt.

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

Uwaga: innym sposobem na uniknięcie opóźnień w ładowaniu obrazów jest użycie karuzeli opartej na znacznikach i pobranie wymaganych zasobów przez moduł wstępnego wczytywania przeglądarki. To podejście nie zawsze jest jednak praktyczne, na przykład jeśli ponownie używasz istniejącego komponentu, który nie jest oparty na znacznikach.

Wstępne wczytywanie obrazów tła za pomocą zestawu obrazów

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

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

Uwaga: ta składnia ignoruje potrzebę stosowania prefiksów dostawcy w przypadku tej funkcji zarówno w przeglądarkach opartych na Chromium, jak i WebKit. Jeśli planujesz korzystać z tej funkcji, rozważ użycie narzędzia Autoprefixer (dostępnego online), aby automatycznie rozwiązać ten problem.

Problem z obrazami tła CSS polega na tym, że przeglądarka wykrywa je dopiero po pobraniu i przetworzeniu wszystkich plików CSS w elemencie <head> strony.

Możesz sprawdzić ten problem na przykładowej stronie internetowej z elastycznym obrazem tła.

W tym przykładzie pobieranie obrazu nie rozpocznie się, dopóki nie zostanie pobrany cały arkusz CSS, co powoduje niepotrzebne opóźnienie w wyświetlaniu obrazu.

Wstępne wczytywanie obrazów elastycznych pozwala na szybsze ładowanie tych obrazów.

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

Pominięcie atrybutu href pozwala mieć pewność, ż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 mogli skorzystać z zalet wstępnego wczytywania.

Możesz sprawdzić, jak zachowuje się poprzedni przykład z wstępnie załadowanym elastycznym obrazem tła, w wersji demonstracyjnej wstępnego ładowania elastycznego tła.

W tym przypadku obraz i arkusz CSS zaczynają się pobierać w tym samym czasie, dzięki czemu obraz ładuje się szybciej.

Praktyczne efekty wstępnego wczytywania obrazów elastycznych

Wstępne wczytywanie obrazów elastycznych może teoretycznie przyspieszyć ich działanie, ale jak to wygląda w praktyce?

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

Oto wyniki dla braku wstępnego wczytywania i wstępnego wczytywania obrazu:

• Rozpoczęcie renderowania pozostało bez zmian.
• Speed Index nieznacznie się poprawił (273 ms, ponieważ obrazy docierają szybciej i nie zajmują dużej części obszaru pikseli).
• Wskaźnik Last Painted Hero znacznie się poprawił – o 1, 2 sekundy.

Wstępnie wczytane obrazy pojawiają się znacznie szybciej, co znacznie poprawia wrażenia użytkowników.

Wstępne wczytywanie i <picture>

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

Wciąż jest wiele problemów technicznych do rozwiązania w przypadku wstępnego wczytywania <picture>, ale tymczasem 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> sprawdza po kolei atrybuty media elementów <source>, znajduje pierwszy pasujący i używa dołączonego zasobu.

Ponieważ elastyczne wstępne wczytywanie 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 elementu type, co pozwala na podanie różnych formatów pliku graficznego, dzięki czemu przeglądarka może wybrać pierwszy obsługiwany przez siebie format.

Ten przypadek użycia jest tylko częściowo obsługiwany przez wstępne wczytywanie: przeglądarki powinny pobierać tylko wstępnie wczytywane zasoby obsługiwanych typów. Możesz więc użyć tego, aby zapobiec wstępnemu wczytywaniu przez przeglądarki nieobsługiwanych typów MIME, dodając do wstępnego wczytywania:

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

Jednak w odróżnieniu od <picture> nie zatrzyma się na pierwszym obsługiwanym typie. Jeśli więc uwzględnisz kilka wstępnych wczytań dla wielu typów, wszystkie obrazy zostaną wstępnie wczytane:

Nie rób tego – wstępne wczytywanie wielu 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 wykonaj te czynności – wstępnie załaduj 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 jak progresywne ulepszanie, dzięki któremu przeglądarki obsługujące ten typ będą mogły korzystać z zalet wstępnego wczytywania, a inne przeglądarki nie będą miały takiej możliwości.

W przypadku witryn, w których obraz można szybko znaleźć w kodzie HTML, zalecamy unikanie wstępnego wczytywania i zamiast tego używanie skanera wstępnego wczytywania do pobierania obrazów z elementów <picture> i <source>. Jest to sprawdzona metoda, zwłaszcza gdy używasz priorytetu pobierania, aby ułatwić ustalanie priorytetów odpowiedniego obrazu, ponieważ umożliwia wstępne wczytanie dokładnego obrazu na podstawie obsługi przeglądarki. Eliminuje to też ryzyko, że wstępne wczytywanie stanie się nieaktualne w głównych znacznikach, gdy obrazy lub strony ulegną zmianie.

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

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

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