Atrybut srcset i obrazy responsywne
Atrybut srcset to rozszerzenie znacznika img w HTML, które pozwala dostarczyć przeglądarce listę rożnych wariantów tego samego obrazu wraz z informacją o ich rzeczywistej szerokości lub gęstości pikseli.
Wspólnie z atrybutem sizes umożliwia tworzenie obrazów responsywnych (responsive images). Przeglądarka sama decyduje, który plik pobrać, biorąc pod uwagę szerokość ekranu urządzenia, rozdzielczość wyświetlacza (DPI) oraz aktualny stan sieci.
Mechanizm działania i deskryptory
Tradycyjny znacznik img wymusza pobranie jednego pliku graficznego dla każdego urządzenia. Zastosowanie srcset przenosi decyzję o wyborze zasobu na stronę klienta:
-
Deskryptory szerokości (w): Określają fizyczną szerokość obrazu w pikselach (np. 400w, 800w, 1200w). Przeglądarka przelicza te wartości w odniesieniu do szerokości okna i dobiera optymalny plik.
-
Deskryptory gęstości pikseli (x): Stosowane dla ekranów o różnej gęstości (np. ekran Retina). Pozwalają przypisać konkretne pliki do standardowych (1x) lub zagęszczonych (2x, 3x) wyświetlaczy.
Przykład składni z wykorzystaniem atrybutu sizes
Podawanie samych wariantów w srcset często nie wystarcza, ponieważ przeglądarka musi wiedzieć, jaką przestrzeń na ekranie zajmie obraz, zanim przetworzy styl CSS. Do tego służy atrybut sizes:
img src=”obraz-domyslny.jpg” srcset=”obraz-maly.jpg 400w, obraz-sredni.jpg 800w, obraz-duzy.jpg 1200w” sizes=”(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px” alt=”Opis obrazu”
W powyższym przykładzie:
-
Na ekranach do 600px obraz zajmie 100% szerokości ekranu (100vw).
-
Na ekranach do 1200px obraz zajmie połowę szerokości ekranu (50vw).
-
Na większych ekranach obraz zajmie stałe 800px.
Przeglądarka kalkuluje wymagany rozmiar i wybiera najmniejszy pasujący plik z listy w srcset.
Wpływ na SEO i wydajność strony
-
Wydajność mobilna i oszczędność danych: Smartfony nie pobierają zbędnych, gigantycznych plików przeznaczonych dla monitorów 4K. Skraca to czas transferu na łączach komórkowych.
-
Optymalizacja wskaźnika LCP (Largest Contentful Paint): Szybsze załadowanie kluczowej grafiki w sekcji widocznej bez przewijania (above the fold) bezpośrednio poprawia wynik LCP w audytach Core Web Vitals.
-
Redukcja przesunięć układu (CLS): W połączeniu z poprawnym określeniem proporcji obrazu (aspect-ratio), responsywne obrazy zapobiegają skakaniu treści podczas ładowania strony.
