Prova questa demo
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
A schermo intero
. - Ricarica l'app utilizzando dimensioni diverse del browser. Notare quanto siano diverse le immagini: non solo hanno dimensioni diverse, ma anche ritagli e proporzioni diverse.
Che succede qui?
La direzione artistica mostra immagini diverse su dimensioni di visualizzazione diverse.
Un'immagine adattabile carica dimensioni diverse della stessa immagine. L'art direction fa un passo avanti e carica immagini completamente diverse a seconda del display.
Utilizza l'art direction per migliorare la presentazione visiva. Ad esempio, i diversi ritagli delle immagini in questa demo assicurano che il punto d'interesse (il fiore) venga sempre mostrato in dettaglio, indipendentemente dal display. I vantaggi dell'art direction sono puramente estetici e non offrono alcun vantaggio in termini di rendimento rispetto alle immagini adattabili.
Visualizza il codice
- Visualizza
index.htmlper vedere il codice di direzione artistica di questa demo.
Come funziona il codice
La direzione artistica utilizza i tag <picture>, <source> e <img>.
immagine
Il tag <picture> fornisce un wrapper per zero o più tag <source> e un tag <image>.
source
Il tag <source> specifica una risorsa multimediale.
Il browser utilizza il primo tag <source> con una query sui media
che restituisce true. Se nessuna delle query sui media corrisponde, il browser ricorre al caricamento dell'immagine specificata da <img>.
.
img
Il tag <img> consente a questo codice di funzionare sui browser che non supportano il tag <img>.<picture>
Se un browser non supporta il tag <picture>, carica l'immagine specificata dal tag <img>.