Il tag picture viene usato nei file HTML per inserire immagini di dimensioni diverse ma che rappresentano lo stesso argomento in modo da avere sempre un’immagine o foto adatta alle dimensioni del dispositivo dell’utente che accede al sito web.
Quando diverse foto vengono inserite all’interno di picture, il browser mostrerà la foto più adatta alle dimensioni della finestra. Questo significa che nel proprio PC, anche se il monitor è molto grande, è possibile visualizzare una qualsiasi immagine semplicemente ridimensionando la finestra del proprio browser.
<picture> <source media="(min-width:650px)" srcset="immagine650px.jpg"> <source media="(min-width:400px)" srcset="immagine400px.jpg"> <img src="immagine.jpg" alt="Esempio di immagine" style="width:auto;"> </picture>
Il tag img viene usato alla fine per aggiungere l’immagine predefinita, quella che viene visualizzata lo schermo è abbastanza grande, nel caso che le altre foto non siano disponibili o che il browser non sia in grado di visualizzarle. Interessante il fatto che sia l’unico elemento a cui assegnare il testo alternativo.
Altri elementi che funzionano in modo simile sono il tag audio e il tag video.
Vedi anche: Come aggiungere contenuti multimediali e link in una pagina HTML