Tag <picture> to potężne narzędzie w arsenale nowoczesnego HTML5, które pozwala na inteligentne dostarczanie różnych wersji obrazów w zależności od warunków przeglądarki, takich jak rozmiar ekranu, rozdzielczość czy obsługiwany format pliku.
W przeciwieństwie do prostego tagu <img>, <picture> umożliwia pełną kontrolę nad tym, jaki obraz zostanie wyświetlony, co znacząco poprawia wydajność strony, doświadczenie użytkownika i SEO.
Dlaczego warto używać tagu <picture> – podstawowe zalety
W erze urządzeń mobilnych i różnorodnych ekranów, proste wstawianie obrazów za pomocą <img src="obraz.jpg"> stało się niewystarczające. Obrazy o wysokiej rozdzielczości spowalniają ładowanie na smartfonach, a brak wsparcia dla nowoczesnych formatów jak WebP marnuje potencjał kompresji. Tag <picture> rozwiązuje te problemy, współpracując z elementami <source> i <img>, aby automatycznie wybierać optymalny zasób.
Kluczowe korzyści:
- responsywność – dostarcza mniejsze obrazy na urządzeniach mobilnych, większe na desktopach;
- wsparcie dla formatów – preferuje WebP (lepsza kompresja niż JPEG) tam, gdzie przeglądarka go obsługuje;
- oszczędność transferu danych – redukuje zużycie danych o nawet 30–50% dzięki inteligentnemu wyborowi;
- dostępność i SEO – zachowuje atrybut
alti semantykę, co jest kluczowe dla czytników ekranu i wyszukiwarek.
Według specyfikacji HTML5, <picture> jest natywnie wspierany we wszystkich współczesnych przeglądarkach, co czyni go standardem w profesjonalnym developmencie.
Struktura tagu <picture> – anatomia elementu
Tag <picture> działa jak kontener, zawierający jeden lub więcej <source> oraz fallbackowy <img>. Przeglądarka ocenia warunki w elementach <source> od góry w dół i wybiera pierwszy pasujący.
<source> – definiuje alternatywne źródła; atrybut type weryfikuje MIME type (np. image/webp), a srcset podaje jedną lub wiele ścieżek.
<img> – obowiązkowy fallback, zawsze wyświetlany, jeśli żaden <source> nie pasuje; musi mieć alt dla dostępności.
Podstawowa składnia:
<picture>
<source srcset="obraz.webp" type="image/webp">
<source srcset="obraz.jpg" type="image/jpeg">
<img src="obraz.jpg" alt="Opis obrazka">
</picture>
Przykład 1: Proste wsparcie dla WebP:
<picture>
<source srcset="zdjecie.webp" type="image/webp">
<img src="zdjecie.jpg" alt="Piękny krajobraz górski">
</picture>
Tutaj Chrome/Firefox z obsługą WebP załaduje lżejszy plik .webp, a starsze przeglądarki skorzystają z pliku .jpg jako fallbacku.
Responsywne obrazy z srcset i media – zaawansowane warunki
Aby tag <picture> błyszczał na responsywnych stronach, łączymy go z srcset (różne rozmiary) i media (zapytania media queries).
Przykład 2: Adaptacja do rozmiaru ekranu:
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<source srcset="large.jpg">
<img src="small.jpg" alt="Responsywny produkt">
</picture>
Co wybierze przeglądarka w zależności od szerokości ekranu:
- ekrany < 600 px – plik
small.jpg(np. 300 KB); - ekrany 600–1200 px – plik
medium.jpg(np. 600 KB); - ekrany > 1200 px – plik
large.jpg(np. 1 MB).
Przykład 3: Połączenie formatu i rozdzielczości z sizes: atrybut sizes podpowiada przeglądarce oczekiwany rozmiar wyświetlania (w kontekście CSS).
<picture>
<source
srcset="produkt-320w.webp 320w, produkt-640w.webp 640w, produkt-1280w.webp 1280w"
sizes="(max-width: 600px) 100vw, 50vw"
type="image/webp">
<img src="produkt-640w.jpg" alt="Produkt w wysokiej rozdzielczości" sizes="(max-width: 600px) 100vw, 50vw">
</picture>
sizes mówi: „na mobile zajmij 100% szerokości viewportu, na desktop 50%”, dzięki czemu przeglądarka wybiera idealny plik z srcset.
Integracja z innymi tagami: <figure> i <figcaption>
Dla semantycznej struktury, otocz <picture> w <figure>. To poprawia indeksowanie przez Google i dostępność dla czytników ekranu.
Przykład 4: Obraz z podpisem:
<figure>
<picture>
<source srcset="kot.webp" type="image/webp">
<img src="kot.jpg" alt="Kot bawiący się zabawką" title="Zabawny moment z życia kota">
</picture>
<figcaption>Kot w akcji – zdjęcie z archiwum domowego</figcaption>
</figure>
Atrybut title pokazuje podpowiedź po najechaniu kursorem, uzupełniając alt.
CSS dla <picture> – stylowanie i optymalizacja
Tag <picture> współpracuje z CSS dla precyzyjnego pozycjonowania. Używaj object-fit do zachowania proporcji bez zniekształceń.
Przykład 5: CSS dla responsywnego tła:
picture img {
width: 100%;
height: 300px;
object-fit: cover; /* Dopasowuje bez zniekształceń */
border-radius: 8px;
}
@media (min-width: 768px) {
picture img {
height: 400px;
}
}
HTML do powyższego stylu:
<picture>
<source srcset="banner.webp" type="image/webp">
<img src="banner.jpg" alt="Baner promocyjny">
</picture>
Efekt: estetyczny, szybki i responsywny baner dopasowujący się do szerokości ekranu.
Najlepsze praktyki i pułapki
Poniżej zebraliśmy sprawdzone wskazówki, które ułatwią wdrożenie tagu <picture> bez niespodzianek:
- zawsze fallback –
<img>musi być ostatnim dzieckiem<picture>; - optymalizuj pliki – używaj narzędzi jak ImageOptim lub Squoosh do WebP/AVIF;
- lazy loading – dodaj
loading="lazy"do<img>(np.<img src="..." loading="lazy" alt="...">) – opóźnia ładowanie elementów poza widokiem; - testuj – sprawdź w DevTools (zakładka Network) i emuluj urządzenia;
- unikaj błędów – bez
typew<source>przeglądarka może pominąć wpis; zawsze określ właściwy MIME; - SEO – atrybut
altmusi być opisowy i naturalny, bez upychania słów kluczowych.
Przykład 6: Lazy + WebP + srcset:
<picture>
<source srcset="hero-400w.webp 400w, hero-800w.webp 800w" sizes="100vw" type="image/webp">
<img src="hero-400w.jpg" alt="Główny hero obraz strony" loading="lazy" decoding="async">
</picture>
Atrybut decoding="async" pomaga uniknąć blokowania głównego wątku renderowania.
Porównanie: <picture> vs <img srcset>
Najważniejsze różnice zestawiliśmy w tabeli, aby ułatwić dobór właściwego rozwiązania do konkretnego scenariusza:
| Aspekt | <img srcset> |
<picture> |
|---|---|---|
| Formaty | Tylko jeden format na raz | Wiele formatów z type |
| Media queries | Tylko przez srcset (gęstość pikseli) |
Pełne media w <source> |
| Złożoność | Prostszy dla 1–2 wariantów | Lepszy dla zaawansowanych scenariuszy |
| Wsparcie | IE9+ (częściowe) | IE bez wsparcia – używa fallback |
<picture> wygrywa w złożonych układach, szczególnie przy tzw. art direction (inne kadrowanie obrazu na urządzeniach mobilnych).
Zastosowania praktyczne w projektach
Gdzie <picture> pokazuje pełnię swoich możliwości:
- Galerie zdjęć – różne kadry dla orientacji pion/poziom;
- E-commerce – zdjęcia produktów w WebP z fallbackiem JPEG;
- Blogi – obrazy hero dopasowane do szerokości ekranu;
- PWA – oszczędność danych w aplikacjach mobilnych.
W JavaScript możesz dynamicznie zmieniać srcset; przykładowo:
pictureEl.querySelector('source').srcset = newSrc
Tag <picture> to nie gadżet, lecz konieczność w 2026 roku – przyspiesza strony, redukuje współczynnik odrzuceń i zwiększa satysfakcję użytkowników. Eksperymentuj, testuj i sprawdź wyniki w PageSpeed Insights!