HTML <obraz> Element
Element HTML <picture>
umożliwia wyświetlanie różnych obrazów dla różnych urządzeń lub rozmiarów ekranu.
Element HTML <obraz>
Element HTML <picture>
zapewnia programistom WWW większą elastyczność w określaniu zasobów graficznych.
Element <picture>
zawiera jeden lub więcej <source>
elementów, z których każdy odwołuje się do różnych obrazów za pośrednictwem srcset
atrybutu. W ten sposób przeglądarka może wybrać obraz, który najlepiej pasuje do bieżącego widoku i/lub urządzenia.
Każdy <source>
element ma
media
atrybut, który określa, kiedy obraz jest najbardziej odpowiedni.
Przykład
Pokaż różne obrazy dla różnych rozmiarów ekranu:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Uwaga: Zawsze określaj <img>
element jako ostatni element podrzędny <picture>
elementu. Element <img>
jest używany przez przeglądarki, które nie obsługują <picture>
elementu lub jeśli żaden z <source>
tagów nie pasuje.
Kiedy używać elementu obrazu?
Istnieją dwa główne cele tego <picture>
elementu:
1. Przepustowość
Jeśli masz mały ekran lub urządzenie, nie jest konieczne ładowanie dużego pliku obrazu. Przeglądarka użyje pierwszego <source>
elementu z pasującymi wartościami atrybutów i zignoruje każdy z poniższych elementów.
2. Obsługa formatu
Niektóre przeglądarki lub urządzenia mogą nie obsługiwać wszystkich formatów obrazów. Używając tego
<picture>
elementu, możesz dodać obrazy we wszystkich formatach, a przeglądarka użyje pierwszego rozpoznanego formatu i zignoruje każdy z poniższych elementów.
Przykład
Przeglądarka użyje pierwszego rozpoznanego formatu obrazu:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Uwaga: przeglądarka użyje pierwszego <source>
elementu z pasującymi wartościami atrybutów i zignoruje wszystkie kolejne <source>
elementy.
Tagi obrazu HTML
Tag | Description |
---|---|
<img> | Defines an image |
<map> | Defines an image map |
<area> | Defines a clickable area inside an image map |
<picture> | Defines a container for multiple image resources |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .