<picture>
Kontener na kilka wersji obrazu. Przeglądarka wybiera tę, która najlepiej pasuje do ekranu i formatu.
- Wyświetlanie
- inline
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<source>, a na końcu jeden<img>
Przykład
#<picture>
<source
media="(min-width: 480px)"
srcset="/collections/covers/vibe-coding.webp"
width="300"
height="200"
>
<img
src="/collections/cursor.png"
alt="Kurs vibe codingu z edytorem Cursor"
width="96"
height="96"
>
</picture>Na ekranie szerszym niż 480 pikseli widać okładkę kursu, a na węższym samo logo. Zwęź okno albo otwórz stronę na telefonie, żeby zobaczyć zmianę.
Definicja i zastosowanie
#Element <picture> pozwala podać kilka źródeł obrazu, a przeglądarka wybiera pierwsze pasujące. W środku umieszczasz elementy <source> z warunkami oraz jeden element <img>, który jest obowiązkowy i działa jako wersja domyślna.
Stosuje się go w dwóch sytuacjach. Pierwsza to dopasowanie kadru do ekranu (ang. art direction): na szerokim monitorze panoramiczne zdjęcie, a na telefonie ciaśniejszy kadr albo sama ikona. Druga to nowoczesne formaty: przeglądarka weźmie plik AVIF lub WebP, jeśli go obsługuje, a starsza dostanie JPEG.
Obraz zawsze wyświetla element <img>, a <source> podmienia mu tylko adres. Dlatego atrybuty alt, width, height i style CSS ustawiasz na <img>, a nie na <picture>. Jeśli chcesz tylko podać ten sam obraz w kilku rozdzielczościach, wystarczy srcset na samym <img>.
Składnia
#<picture>
<source media="…" srcset="…">
<img src="…" alt="…">
</picture>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<picture>
<source srcset="/img/kurs-python.avif" type="image/avif">
<source srcset="/img/kurs-python.webp" type="image/webp">
<img src="/img/kurs-python.jpg" alt="Laptop z otwartym edytorem kodu Python" width="640" height="427">
</picture>Przeglądarka sprawdza źródła po kolei i bierze pierwsze, którego format obsługuje. Dlatego najlżejszy format (AVIF) stoi na początku, a JPEG na końcu jako wersja dla wszystkich.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Bez
<img>wewnątrz<picture>nic się nie wyświetli. Same elementy<source>niczego nie pokazują. - Przy różnych kadrach podaj
widthiheighttakże na każdym<source>, żeby przeglądarka zarezerwowała miejsce o właściwych proporcjach. - Nie używaj
<picture>do zwykłych obrazów w kilku rozdzielczościach. Wystarczy<img srcset="…" sizes="…">.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.