SEOMaster
Obrazy responsywne: srcset, sizes i picture
Dobór rozmiaru, formatu lub kadru obrazu do ekranu bez pobierania wszystkich wariantów.
Obrazy responsywne: srcset, sizes i picture w 30 sekund
- 01 · Zrozum: Obrazy responsywne pozwalają przeglądarce pobrać plik dopasowany do szerokości miejsca w układzie i gęstości ekranu.
- 02 · Sprawdź: W DevTools otwórz Network, wyłącz cache i odśwież stronę przy szerokości telefonu.
- 03 · Unikaj: Podanie srcset bez poprawnego sizes.
Co to jest Obrazy responsywne: srcset, sizes i picture?
Obrazy responsywne pozwalają przeglądarce pobrać plik dopasowany do szerokości miejsca w układzie i gęstości ekranu. Atrybut srcset opisuje dostępne warianty, na przykład 480w, 960w i 1600w. Atrybut sizes mówi, ile miejsca obraz zajmie przy danym breakpointcie; bez tej informacji przeglądarka może założyć zbyt szeroki slot i pobrać cięższy plik. Element picture służy do zmiany formatu albo kadru, a nie do ładowania wszystkich źródeł naraz. Przeglądarka wybiera jednego najlepszego kandydata przed pobraniem, dlatego poprawna konfiguracja ogranicza transfer bez pogorszenia ostrości.
Dlaczego to ważne dla SEO
Telefon nie powinien pobierać obrazu przygotowanego dla szerokiego monitora. Mniejszy transfer poprawia LCP, ogranicza zużycie danych i nie wymaga pogarszania jakości na dużym ekranie.
Jak to sprawdzić
W DevTools otwórz Network, wyłącz cache i odśwież stronę przy szerokości telefonu. Sprawdź faktycznie pobrany plik, jego wymiary i zakładkę Preview. Powtórz test na dużym ekranie oraz przy DPR 2. W kodzie potwierdź, że wartości sizes odpowiadają realnej szerokości komponentu, nie szerokości całego viewportu.
Częste błędy
- Podanie srcset bez poprawnego sizes. Wpisanie zawsze 100vw dla obrazu zajmującego połowę kolumny. Używanie picture do prostego skalowania. Brak bazowego src jako fallbacku. Generowanie wielu wariantów o niemal identycznej szerokości. Lazy-loading obrazu LCP nad pierwszym ekranem.
Przykład
<picture><source type="image/avif" srcset="hero-480.avif 480w, hero-960.avif 960w"><img src="hero-960.webp" srcset="hero-480.webp 480w, hero-960.webp 960w" sizes="(max-width: 640px) 100vw, 50vw" width="960" height="540" alt="Opis treści obrazu"></picture>
Najczęstsze pytania
Czy srcset wystarczy bez sizes?
Przy deskryptorach szerokości przeglądarka potrzebuje sizes, aby znać przewidywaną szerokość slotu. Bez niego zwykle przyjmuje 100vw i może pobrać zbyt duży plik.
Kiedy używać elementu picture?
Gdy potrzebujesz innego kadru na małym ekranie albo chcesz podać źródła AVIF/WebP z bezpiecznym fallbackiem. Do samego skalowania zwykle wystarcza img z srcset i sizes.
Poradniki na ten temat
- Jak czytać PageSpeed Insights i Core Web Vitals — Zacznij od danych polowych, potem użyj laboratorium do diagnozy. Wynik 100/100 nie jest celem samym w sobie — ważniejsze są LCP, INP i CLS prawdziwych użytkowników oraz poprawki, które usuwają konkretną przyczynę.
- Jak poprawić Core Web Vitals — LCP, INP i CLS po kolei — Trzy metryki, trzy zupełnie różne przyczyny. Ten poradnik idzie od zmian, które zajmują kwadrans i dają najwięcej, do przebudów, w które warto wchodzić dopiero na końcu.