Znacznik PICTURE jak nie trudno odgadnąć odnosi się do zdjęć, obrazków. Nie zastępuje jednak znacznika IMG, a jakby go obudowuje, IMG znajdzie się zawsze wewnątrz PICTURE.
<picture>
<img src="obrazek.jpg">
<picture>
To jeszcze nie zadziała, to tylko przykład umiejscowienia PICTURE w stosunku do IMG. Ja znam dwa sensowne zastosowania PICTURE.
Pierwszy to możliwość zastosowania dwóch formatów zapisu grafiki. Google lansują format .WEBP jest to format o dobrej kompresji plików i jeśli chcemy umieścić duży obrazek na stronie to ten format pozwala dużo zaoszczędzić na wielkości w bitach a stąd szybkości strony, więc warto. Czy wszystkie przeglądarki sobie poradzą z tym formatem? Ja nie wiem, a żeby nie gnębić się tym dylematem, można sobie poradzić przy pomocy PICTURE. Zapisujemy obrazek w formacie .JPG i tym nowym .WEBP i dajemy przeglądarce możliwość wyboru. I wygląda to tak:
<picture>
<source type="image/webp" srcset="obrazek400.webp">
<img src="obrazek400.jpg">
<picture>
Przykład jesli przegladarka obsługuje format WEBP zobaczysz obrazek z '400" w tle, jesli nie z "100".
Dla przeglądarki oznacza to tyle, że jeżeli SURCE TYPE spełnia warunek IMAGE/WEBP, czyli jeśli obsługiwanym typem jest format WEBP to wczyta z SRCSET (zestaw źródeł) obrazek.webp, jeśli nie to przechodzi dalej i wczytuje co jest w IMG SRC.
Drugim zastosowaniem jest dostosowywanie się strony z grafiką do wielkości ekranu (układ responsywny). Przygotowujemy obrazek w dwuch wielkościach, a przeglądarka wczyta najmniejszy potrzebny. Tu również da szybciej wczytującą się stronę, a grafiki to dość ciężki element strony, więc wart uwagi i trzech linijek kodu.
<picture>
<source media="(max-width:599px)" srcset="obrazek100.jpg">
<source media="(min-width:600px)" srcset="obrazek400.jpg">
<img src="obrazek400.jpg">
<picture>
Tu SURCE TYPE zmieniło się w SURCE MEDIA i podany jest warunek wielkości pola przeznaczonego na obrazek. Ten sposób można też wykorzystać gdy w zależności od wielkości ekranu raz chcemy użyć obrazka w pionie a raz w poziomie, a nie chcemy przypadkowego kadrowania i obcięcia np. w połowie głowy.
Przykład przy zmniejszeniu ekranu poniżej 600px podmieni się obrazek na mniejszy.
