Immagini adattabili e art director

Le immagini reattive vengono spesso implementate con 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 evitare variazioni del layout, imposta gli attributi width e height sui tag <img> e <source> che utilizzano srcset.

Descrittori di densità

Per creare 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.

Descrittori di larghezza

Per creare immagini adattabili che utilizzano descrittori di larghezza:

  • Tutte le immagini elencate in src e srcset devono avere le stesse proporzioni.
  • Gli attributi width e height devono corrispondere alle dimensioni dell'immagine di riserva.
  • Regola lo stile dell'immagine in base alle tue esigenze. Senza CSS, se imposti width e height su un'immagine adattabile con descrittori di larghezza, l'immagine verrà sempre visualizzata alle dimensioni impostate. anche quando le immagini elencate in srcset hanno dimensioni diverse. Questo comportamento potrebbe non essere ciò che vuoi. Aggiungi width: 100%; height: auto; o width: 100vw; height: auto; allo stile dell'immagine per ottenere l'aspetto visivo che desideri.

Elementi dell'immagine

Per creare elementi <picture> adattabili:

  • Imposta gli attributi width e height per tutti i tag <source>. I valori appropriati per questi attributi dipendono dal modo in cui il tag <source> utilizza srcset.
  • Modifica l'immagine applicando uno stile al tag <img> corrispondente. Il tag <source> è un elemento vuoto e, pertanto, lo stile non ha alcun effetto.
  • Imposta gli attributi width e height nel tag <img>. Questi valori devono corrispondere alle dimensioni intrinseche dell'immagine di riserva.

Esempi

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>