Srcset to atrybut znacznika <img>, w którym podaje się kilka wersji tego samego obrazu w różnych rozmiarach. Przeglądarka wybiera tę, która najlepiej pasuje do szerokości ekranu i jego gęstości pikseli.
Jak wygląda srcset?
Przykład: <img src="foto-800.webp" srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px" alt="...">. Deskryptor w określa szerokość pliku w pikselach.
Po co stosować srcset?
Telefon nie musi pobierać ogromnego obrazu przeznaczonego na duży monitor. Mniejszy plik skraca ładowanie, zmniejsza zużycie danych i poprawia LCP.
Srcset a znacznik picture
Srcset dopasowuje rozmiar tego samego obrazu. Znacznik <picture> pozwala dodatkowo wybierać różne formaty lub kadry zależnie od warunków.
Przeglądarka sama wybiera plik o odpowiedniej szerokości, a atrybut sizes podpowiada jej, ile miejsca zajmie obraz.
Typowe błędy
Brak atrybutu sizes sprawia, że przeglądarka zakłada pełną szerokość okna i pobiera zbyt duży plik. Podanie wymiarów width i height zapobiega przesunięciom układu. Nie używaj srcset do obrazu, który zawsze ma stały rozmiar. Pamiętaj, że wygenerowanie wielu wersji kosztuje miejsce na dysku, więc wybierz sensowne progi, np. 400, 800 i 1600 pikseli.