Immagini adattabili e art director

Le immagini reattive vengono spesso implementate utilizzando l'attributo srcset. L'attributo srcset è un elenco separato da virgole di nomi file delle immagini e dei relativi descrittori di larghezza o densità. Per impedire variazioni del layout, imposta gli attributi width e height nei tag <img> e <source> che utilizzano srcset.

Per le immagini adattabili che utilizzano descrittori di densità:

• Tutte le immagini elencate in src e srcset devono avere le stesse proporzioni.
• Imposta gli attributi width e height in modo che corrispondano alle dimensioni dell'immagine 1x.
• L'attributo src deve fare riferimento all'immagine 1x.

Per le immagini adattabili che utilizzano descrittori di larghezza:

• Tutte le immagini elencate in src e srcset devono avere le stesse proporzioni.
• Imposta gli attributi width e height in modo che corrispondano alle dimensioni dell'immagine di riserva.
• Regola lo stile dell'immagine in base alle esigenze: in assenza di stili CSS, le impostazioni width e height su un'immagine adattabile che utilizza descrittori di larghezza comportano il rendering dell'immagine sempre alle stesse dimensioni, anche se le immagini elencate in srcset hanno dimensioni diverse. Questo comportamento potrebbe non essere ciò che desideri. L'aggiunta di width: 100%; height: auto; o width: 100vw; height: auto; allo stile dell'immagine può ottenere l'aspetto visivo che desideri.

Per i tag <picture>:

• Imposta gli attributi width e height per tutti i tag <source>: i valori appropriati di width e height dipenderanno dal modo in cui il tag <source> utilizza srcset. Per informazioni sull'utilizzo di srcset, vedi sopra.
• Regola lo stile dell'immagine: se devi regolare lo stile dell'immagine, tieni presente che l'aggiunta di stili a un tag <source> non avrà alcun effetto. Il tag <source> è un elemento vuoto. Dovrai invece applicare uno stile al tag <img> corrispondente.
• Imposta gli attributi width e height nel tag <img>: questi valori devono corrispondere alle dimensioni intrinseche dell'immagine di riserva.

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>