Immagini adattabili

Il testo sul web viene automaticamente a capo al bordo dello schermo in modo che non venga troncato. Le immagini, invece, hanno una dimensione intrinseca. Se un'immagine è più larga dello schermo, l'immagine viene troncata e l'utente deve scorrere orizzontalmente per visualizzarla tutta.

Fortunatamente, CSS ti offre strumenti per impedire che ciò accada.

Vincolare le immagini

Nel foglio di stile, puoi utilizzare max-inline-size per dichiarare che le immagini non possono mai essere visualizzate con una larghezza superiore a quella dell'elemento contenitore.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Puoi applicare la stessa regola anche ad altri tipi di contenuti incorporati, come video e iframe.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Con questa regola, i browser ridimensionano automaticamente le immagini per adattarle allo schermo.

L'aggiunta di un valore block-size di auto indica che il browser mantiene le proporzioni delle immagini durante il ridimensionamento.

A volte, le dimensioni di un'immagine vengono impostate da un sistema di gestione dei contenuti (CMS) o da un altro sistema di distribuzione dei contenuti. Se il tuo design richiede un formato diverso da quello predefinito del CMS, puoi utilizzare la proprietà aspect-ratio per preservare il design del tuo sito:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Purtroppo, spesso il browser deve comprimere o allungare l'immagine per farla entrare nello spazio previsto.

Per evitare lo schiacciamento e l'allungamento, utilizza la proprietà object-fit.

Un valore object-fit pari a contain indica al browser di mantenere le proporzioni dell'immagine, lasciando spazio vuoto intorno all'immagine, se necessario.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Un valore object-fit di cover indica al browser di mantenere le proporzioni dell'immagine, ritagliandola se necessario.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

Puoi modificare la posizione del ritaglio dell'immagine utilizzando la proprietà object-position. In questo modo, la messa a fuoco del ritaglio viene regolata, così puoi assicurarti che la parte più importante dell'immagine sia ancora visibile.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Fornire le immagini

Queste regole CSS indicano al browser come vuoi che vengano visualizzate le immagini. Puoi anche fornire suggerimenti in HTML su come il browser deve gestire queste immagini.

Suggerimenti per la scelta della taglia

Se conosci le dimensioni dell'immagine, includi sempre gli attributi width e height. Anche se l'immagine viene visualizzata con dimensioni diverse a causa della regola max-inline-size, il browser conosce comunque il rapporto tra larghezza e altezza e può riservare la giusta quantità di spazio. In questo modo, gli altri contenuti non si spostano quando l'immagine viene caricata.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Suggerimenti per il caricamento

Utilizza l'attributo loading per indicare al browser se ritardare il caricamento dell'immagine finché non si trova all'interno o in prossimità del riquadro visibile. Per le immagini sotto la piega, utilizza un valore di lazy. Il browser non carica le immagini con caricamento lento finché l'utente non scorre abbastanza in basso da far apparire l'immagine. Se l'utente non scorre mai, l'immagine non viene mai caricata.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Per un'immagine hero above the fold, non utilizzare loading. Se il tuo sito applica automaticamente l'attributo loading="lazy", in genere puoi impostare loading sul valore predefinito eager per impedire il caricamento lento delle immagini:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Priorità di recupero

Per le immagini importanti, come l'immagine LCP, puoi dare ulteriore priorità al caricamento utilizzando Fetch Priority impostando l'attributo fetchpriority su high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

In questo modo, il browser recupera l'immagine immediatamente e con priorità elevata, anziché attendere il completamento del layout e il recupero normale delle immagini.

Tuttavia, quando chiedi al browser di dare la priorità al download di una risorsa, ad esempio un'immagine, il browser deve declassare un'altra risorsa, ad esempio uno script o un file di caratteri. Imposta fetchpriority="high" su un'immagine solo se è davvero fondamentale.

Suggerimenti per il precaricamento

È meglio evitare il precaricamento quando possibile includendo tutte le immagini nel file HTML iniziale. Tuttavia, alcune immagini potrebbero non essere disponibili, ad esempio le immagini aggiunte da JavaScript o un'immagine di sfondo CSS.

Puoi utilizzare il precaricamento per fare in modo che il browser recuperi queste immagini importanti in anticipo. Per le immagini davvero importanti, puoi combinare il precaricamento con l'attributo fetchpriority:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Anche in questo caso, utilizza questi attributi con parsimonia per evitare di ignorare troppo spesso l'euristica di prioritizzazione del browser. L'uso eccessivo può causare un peggioramento delle prestazioni.

Alcuni browser supportano il precaricamento di immagini adattabili in base a srcset, utilizzando gli attributi imagesrcset e imagesizes. Ad esempio:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

Se escludi il fallback href, puoi assicurarti che i browser senza supporto srcset precarichino comunque l'immagine corretta.

Non puoi precaricare immagini in formati diversi in base al supporto del browser per determinati formati. Se tenti di farlo, potresti causare download aggiuntivi che sprecano i dati degli utenti.

Immagini adattabili con srcset

Grazie a questa dichiarazione max-inline-size: 100%, le tue immagini non possono uscire dai relativi contenitori. Tuttavia, se un utente ha uno schermo piccolo e una rete a bassa larghezza di banda, il download di immagini delle stesse dimensioni di quelle degli utenti con schermi più grandi comporta uno spreco di dati.

Per risolvere il problema, aggiungi più versioni della stessa immagine di dimensioni diverse e utilizza l'attributo srcset per comunicare al browser che queste dimensioni esistono e quando utilizzarle.

Descrittore della larghezza

Puoi definire un srcset utilizzando un elenco separato da virgole di valori. Ogni valore è l'URL di un'immagine, seguito da uno spazio e da alcuni metadati sull'immagine, chiamati descrittore.

In questo esempio, i metadati descrivono la larghezza di ogni immagine utilizzando l'unità w. Un w corrisponde alla larghezza di un pixel.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

L'attributo srcset integra l'attributo src anziché sostituirlo. Devi comunque avere un attributo src valido, ma il browser può sostituire il suo valore con una delle opzioni elencate in srcset. Per risparmiare larghezza di banda, il browser scarica l'immagine più grande solo se è necessaria.

Formato

Se utilizzi il descrittore di larghezza, devi utilizzare anche l'attributo sizes per fornire ulteriori informazioni al browser. Indica al browser le dimensioni con cui prevedi che l'immagine venga visualizzata in diverse condizioni. Queste condizioni sono specificate in una media query.

L'attributo sizes accetta un elenco separato da virgole di query multimediali e larghezze delle immagini.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

In questo esempio, indichi al browser che in un viewport con una larghezza superiore a 66em, l'immagine deve essere visualizzata con una larghezza non superiore a un terzo dello schermo (ad esempio, all'interno di un layout a tre colonne).

Per larghezze della finestra comprese tra 44em e 66em, visualizza l'immagine a metà della larghezza dello schermo (come in un layout a due colonne).

Per qualsiasi elemento più stretto di 44em, visualizza l'immagine a tutta la larghezza dello schermo.

Ciò significa che l'immagine più grande non verrà necessariamente utilizzata per lo schermo più ampio. Una finestra del browser ampia che può visualizzare un layout a più colonne utilizza un'immagine che si adatta a una colonna, che potrebbe essere più piccola di un'immagine utilizzata per un layout a una sola colonna su uno schermo più stretto.

Descrittore della densità di pixel

Puoi anche utilizzare i descrittori per fornire una versione alternativa delle immagini da mostrare su display ad alta densità, in modo che le immagini rimangano nitide alle risoluzioni più elevate che forniscono.

Utilizza il descrittore di densità per descrivere la densità di pixel dell'immagine in relazione all'immagine nell'attributo src. Il descrittore di densità è un numero seguito dalla lettera x, ad esempio 1x o 2x.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Se small-image.png ha dimensioni di 300 x 200 pixel e medium-image.png ha dimensioni di 600 x 400 pixel, allora medium-image.png può avere 2x dopo di sé nell'elenco srcset.

Non devi utilizzare numeri interi. Se un'altra versione dell'immagine ha dimensioni di 450 x 300 pixel, puoi descriverla con 1.5x.

Immagini di presentazione

Le immagini in HTML sono contenuti. Per questo motivo, includi l'attributo alt con una descrizione dell'immagine per screen reader e motori di ricerca.

Se incorpori un'immagine decorativa, senza contenuti significativi, puoi utilizzare un attributo alt vuoto.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Devi sempre includere l'attributo alt, anche se è vuoto. Un attributo alt vuoto indica a uno screen reader che l'immagine è presentazionale. Un attributo alt mancante non fornisce queste informazioni.

Idealmente, le immagini di presentazione o decorative sono incluse con CSS anziché HTML. L'HTML è per la struttura. CSS è per la presentazione.

Immagini di sfondo

Utilizza la proprietà background-image in CSS per caricare le immagini di presentazione.

element {
  background-image: url(flourish.png);
}

Puoi specificare più immagini candidate utilizzando la funzione image-set per background-image.

La funzione image-set in CSS funziona in modo molto simile all'attributo srcset in HTML. Fornisci un elenco di immagini con un descrittore della densità di pixel per ciascuna.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Il browser sceglie l'immagine più appropriata per la densità dei pixel del dispositivo.

Quando aggiungi immagini al tuo sito, devi tenere conto di molti fattori, tra cui:

• Riservando lo spazio giusto per ogni immagine.
• Determinare il numero di taglie necessarie.
• Decidere se l'immagine è un contenuto o un elemento decorativo.

Vale la pena dedicare del tempo per ottenere le immagini giuste. Strategie di gestione delle immagini scadenti possono infastidire e frustrare gli utenti. Una buona strategia per le immagini rende il tuo sito veloce e nitido, indipendentemente dal dispositivo o dalla connessione di rete dell'utente.

Nel tuo toolkit è presente un altro elemento HTML che ti offre un maggiore controllo sulle tue immagini: l'elemento picture.

Mettiti alla prova

Metti alla prova le tue conoscenze sulle immagini.