Elemento HTML <immagine>
L'elemento HTML <picture>consente di visualizzare immagini diverse per dispositivi o dimensioni dello schermo differenti.
L'elemento HTML <immagine>
L'elemento HTML <picture>offre agli sviluppatori Web una maggiore flessibilità nella specifica delle risorse di immagine.
L' <picture>elemento contiene uno o più <source>elementi, ciascuno riferito a immagini diverse tramite l' srcset
attributo. In questo modo il browser può scegliere l'immagine che meglio si adatta alla visualizzazione e/o al dispositivo corrente.
Ogni <source>elemento ha un
mediaattributo che definisce quando l'immagine è la più adatta.
Esempio
Mostra immagini diverse per dimensioni dello schermo diverse:
<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>
Nota: specificare sempre un <img>elemento come ultimo elemento figlio <picture>dell'elemento. L' <img>elemento viene utilizzato dai browser che non supportano l' <picture>elemento o se nessuno dei <source>tag corrisponde.
Quando utilizzare l'elemento immagine
Ci sono due scopi principali per l' <picture>elemento:
1. Larghezza di banda
Se hai uno schermo o un dispositivo piccolo, non è necessario caricare un file immagine di grandi dimensioni. Il browser utilizzerà il primo <source>
elemento con valori di attributo corrispondenti e ignorerà uno qualsiasi dei seguenti elementi.
2. Supporto formato
Alcuni browser o dispositivi potrebbero non supportare tutti i formati di immagine. Utilizzando l'
<picture>elemento, puoi aggiungere immagini di tutti i formati e il browser utilizzerà il primo formato riconosciuto e ignorerà uno qualsiasi dei seguenti elementi.
Esempio
Il browser utilizzerà il primo formato immagine riconosciuto:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Nota: il browser utilizzerà il primo <source>elemento con valori di attributo corrispondenti e ignorerà qualsiasi <source>elemento successivo.
Tag immagine 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 |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .