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
mediaatrybut, 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 .