Elementul picture în HTML

Elementul HTML <picture>

Elementul <picture> îți permite să afișezi imagini diferite pentru dispozitive sau dimensiuni de ecran diferite.

Elementul HTML <picture>

Elementul <picture> îți oferă mai multă flexibilitate în privința imaginii afișate. Conține unul sau mai multe elemente <source>, fiecare indicând o imagine diferită prin atributul srcset, astfel încât browserul poate alege pe cea mai potrivită pentru vizualizarea sau dispozitivul curent. Fiecare <source> are un atribut media care spune când este cea mai bună alegere.

Notă: Pune întotdeauna un element <img> ca ultimul copil al lui <picture>. Browserul îl folosește atunci când nu suportă <picture> sau când niciun <source> nu se potrivește.

Exemplu

Imagini diferite afișate la dimensiuni diferite de ecran.

O pagină care folosește elementul picture cu două elemente source ce afișează imagini diferite la lățimi de ecran diferite (imagine cu mâncare la min-width 650px, imagine cu mașină la min-width 465px), și o imagine de rezervă (img_girl.jpg) ca ultim copil.

> Ieșire: pagină HTML completă

Prompt

O pagină care folosește elementul picture cu două elemente source ce afișează imagini diferite la lățimi de ecran diferite (imagine cu mâncare la min-width 650px, imagine cu mașină la min-width 465px), și o imagine de rezervă (img_girl.jpg) ca ultim copil.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dimensiuni de ecran pentru picture</title>
</head>
<body>

<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>

</body>
</html>

Când Să Folosești Elementul Picture

Există două motive principale pentru a folosi <picture>. Primul, lățimea de bandă: pe un ecran mic nu trebuie să încarci o imagine mare, deci browserul folosește primul <source> care se potrivește și ignoră restul. Al doilea, suportul pentru format: unele browsere nu suportă fiecare format de imagine, deci poți lista imagini în mai multe formate, iar browserul o folosește pe prima pe care o recunoaște.

Exemplu

Browserul folosește primul format de imagine pe care îl recunoaște.

O pagină care folosește elementul picture cu două elemente source ce oferă formate de imagine diferite (PNG apoi JPG) și o imagine GIF (img_beatles.gif, alt Beatles) ca ultim copil de rezervă, astfel încât browserul folosește primul format pe care îl recunoaște.

> Ieșire: pagină HTML completă

Prompt

O pagină care folosește elementul picture cu două elemente source ce oferă formate de imagine diferite (PNG apoi JPG) și o imagine GIF (img_beatles.gif, alt Beatles) ca ultim copil de rezervă, astfel încât browserul folosește primul format pe care îl recunoaște.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Format picture</title>
</head>
<body>

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

</body>
</html>

Tag-uri HTML pentru Imagini

Tag-urile legate de imagini sunt: <img> (definește o imagine), <map> (definește o hartă de imagine), <area> (definește o zonă apăsabilă în interiorul unei hărți de imagine), și <picture> (definește un container pentru mai multe resurse de imagine).