Obrazy i czas ładowania: formaty, rozmiary, lazy loading

Dlaczego obrazy decydują o czasie ładowania

Google pisze, że obrazy często stanowią największą część strony, przez co strony mogą ładować się wolno i kosztownie. Dwa z podstawowych wskaźników internetowych (Core Web Vitals) zależą bezpośrednio od obrazów. Largest Contentful Paint (LCP) mierzy ładowanie: Google radzi, aby największy element pojawił się w ciągu pierwszych 2,5 sekundy od rozpoczęcia ładowania strony. Na wielu stronach tym elementem jest obraz, na przykład duże zdjęcie na górze. Cumulative Layout Shift (CLS) mierzy stabilność wizualną i powinien pozostać poniżej 0,1. Obrazy, które pojawiają się bez zarezerwowanego miejsca, przesuwają tekst w dół i podnoszą tę wartość.

Właściwy format

• Zdjęcia: JPEG działa wszędzie. WebP i AVIF są przy podobnej jakości często wyraźnie mniejsze.
• Grafiki z ostrymi krawędziami lub przezroczystością: PNG albo WebP i AVIF, które też mogą być przezroczyste.
• Logo i ikony: SVG, bo pozostaje ostre w każdym rozmiarze i zwykle jest bardzo małe.
• Wyszukiwarka Google obsługuje obrazy w atrybucie src w formatach BMP, GIF, JPEG, PNG, WebP, SVG i AVIF.

Jeśli udostępniasz WebP albo AVIF, możesz zostawić JPEG jako wersję zapasową w elemencie picture. Przeglądarka wybierze pierwsze źródło, które rozumie.

Właściwy rozmiar

Obraz o szerokości 2400 pikseli wyświetlany w szerokości 600 pikseli marnuje większość swoich bajtów. Eksportuj obrazy mniej więcej w takiej szerokości, w jakiej są wyświetlane, a dla ostrych ekranów w mniej więcej podwójnej. Potem je skompresuj. W wielu programach graficznych dla zdjęć w internecie wystarcza jakość mniej więcej w połowie skali. Sprawdź wynik w pełnym rozmiarze, zanim zastąpisz oryginał.

srcset i sizes

Jeden plik nigdy nie pasuje do każdego ekranu. W srcset podajesz kilka plików tego samego obrazu i szerokość każdego z nich. W sizes mówisz przeglądarce, jak szeroko obraz będzie wyświetlany. Przeglądarka wybiera wtedy najmniejszy plik, który jest wystarczająco ostry.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

W tym przykładzie obraz na wąskich ekranach wypełnia całą szerokość, a na szerszych ma 700 pikseli. Google zaleca, aby zawsze zostawiać wersję zapasową w atrybucie src. Zamiast trzech kropek wpisz prawdziwy tekst alternatywny.

Szerokość i wysokość przeciw przesunięciom układu

Bez szerokości i wysokości przeglądarka nie wie, ile miejsca potrzebuje obraz, dopóki plik nie dotrze. Tekst pod nim przeskakuje wtedy w dół. Poradnik web.dev o przesunięciach układu radzi: zawsze podawaj atrybuty width i height przy obrazach i filmach, z rozmiarem pliku w pikselach albo przynajmniej z właściwymi proporcjami. Nowoczesne przeglądarki ustalają z tych wartości proporcje obrazu i rezerwują miejsce. W CSS reguły width: 100% i height: auto zachowują elastyczność obrazu. Jeśli nie możesz ustawić atrybutów, poradnik wskazuje jako alternatywę właściwość CSS aspect-ratio.

Leniwe ładowanie

Z loading="lazy" przeglądarka ładuje obraz dopiero wtedy, gdy zbliża się on do widocznego obszaru. To oszczędza dane przy obrazach niżej na stronie. Google pisze o tym: nie dodawaj leniwego ładowania do treści, które prawdopodobnie będą widoczne od razu po otwarciu strony. Wbudowane leniwe ładowanie przeglądarki działa dla obrazów i elementów iframe.

Obraz LCP

Największy obraz na górze, często baner albo główne zdjęcie produktu, to najważniejszy plik strony. Poradnik web.dev o LCP mówi: nigdy nie ładuj leniwie obrazu LCP. fetchpriority="high" to wskazówka dla przeglądarki, aby załadowała go wcześnie. Według poradnika wysoki priorytet dla więcej niż jednego lub dwóch obrazów przestaje pomagać. Obrazy, których adres biblioteka skryptów ukrywa w data-src, albo obrazy będące tylko tłem w CSS przeglądarka znajduje późno. Dla obrazu tła poradnik wskazuje preload przez link rel="preload" w HTML. AVIF albo WebP i mniejszy plik dodatkowo skracają czas ładowania.

Jak wypadają twoje strony, pokazuje według Google raport Core Web Vitals w Search Console. Dla pojedynczej strony narzędzia wydajności w przeglądarce pokazują, który element jest elementem LCP i które elementy przesuwają układ. Mierz przed zmianą i po niej, aby wiedzieć, czy pomogła.

Krótka lista kontrolna

• Czy największy obraz na górze ładuje się normalnie, a nie leniwie?
• Czy każdy img ma szerokość i wysokość albo miejsce zarezerwowane przez aspect-ratio?
• Czy każdy plik ma mniej więcej taką szerokość, w jakiej jest wyświetlany, i jest skompresowany?
• Czy duże zdjęcia są dostępne w kilku szerokościach przez srcset i sizes?
• Czy są pliki JPEG lub PNG, które mogłyby być w WebP albo AVIF?

Praca z Do4U

Sprawdzanie obrazów czyta jedną stronę i każdy obraz na niej. Dla każdego pliku podaje format, rozmiar pliku i piksele, a z HTML szerokość i wysokość, loading, fetchpriority, srcset i sizes, źródła w picture i obrazy tła w atrybutach style. Do4U szacuje prawdopodobny obraz LCP na podstawie HTML. Nie mierzy go, bo o rzeczywistym elemencie LCP decyduje przeglądarka. Dostajesz tabelę obrazów z wynikami, łączną wagę i krótkie podsumowanie. Obrazy wstawiane przez JavaScript i obrazy tła z zewnętrznych plików CSS nie są uwzględniane. Nie używamy AI, a sprawdzenie jest bezpłatne, z dziennym limitem.

Do4U znajduje wskazówki, a ty sprawdzasz i decydujesz. Zanim zmienisz stronę, potwierdź element LCP narzędziami wydajności w swojej przeglądarce.