Responsywne obrazy pozwalają przeglądarce wybrać najlepszy obraz dla urządzenia — oszczędzając przepustowość na telefonach i dostarczając ostre obrazy na ekranach high-DPI.
srcset + sizes — ten sam obraz, różne rozdzielczości
html
Responsywne obrazy pozwalają przeglądarce wybrać najlepszy obraz dla urządzenia — oszczędzając przepustowość na telefonach i dostarczając ostre obrazy na ekranach high-DPI.
srcset wyświetla obrazy kandydujące wraz z ich szerokościami rzeczywistymi (400w = 400px szerokości).sizes mówi przeglądarce, jak szeroki będzie obraz wyświetlany w różnych punktach przerwania (tutaj: pełna szerokość okna przeglądarki poniżej 600px, w przeciwnym razie połowa).sizes + gęstość pikseli urządzenia, aby wybrać najmniejszy obraz, który wciąż wygląda ostro — zanim cokolwiek pobierze.Telefon może wybrać small.jpg; laptop Retina wyświetlający go z szerokością 50% może wybrać large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Przeglądarka używa pierwszego <source>, który wspiera/pasuje. Użyj <picture>, gdy potrzebujesz różnych formatów (serwuj AVIF/WebP z rezerwą JPEG) lub innego kadrowania na rozmiar ekranu (kierowanie artystyczne) — rzeczy, których sam srcset nie może zrobić.
srcset vs picture — który?
srcset + sizes.<picture>.Dostarczanie obrazów o właściwym rozmiarze i w nowoczesnym formacie to jedna z największych wygranych wydajności dla sieci — dramatycznie zmniejsza zużycie danych mobilnych i poprawia Largest Contentful Paint.
Te natywne narzędzia pozwalają przeglądarce automatycznie dokonać optymalnego wyboru, z gracjosem fallbackiem dla starszych przeglądarek.