Immagini adattabili

Il testo sul Web va a capo automaticamente sul bordo dello schermo in modo che non si sovrapponga. È diverso nelle immagini. Le immagini hanno una dimensione intrinseca. Se un'immagine è più larga dello schermo, si sovrapporrà e verrà visualizzata una barra di scorrimento orizzontale.

Fortunatamente, puoi adottare delle misure in CSS per evitare che ciò accada.

Limita le immagini

Nel foglio di stile, puoi dichiarare che le immagini non dovrebbero mai essere visualizzate a dimensioni maggiori di quelle dell'elemento contenitore utilizzando max-inline-size.

Supporto dei browser

  • 57
  • 79
  • 41
  • 12.1

Fonte

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;
}

Una volta applicata questa regola, i browser ridimensionano automaticamente le immagini per adattarle allo schermo.

Due screenshot: il primo mostra un'immagine che si espande oltre la larghezza del browser; il secondo mostra la stessa immagine vincolata all'interno dell'area visibile del browser.

Se aggiungi un valore auto pari a block-size, le proporzioni delle immagini rimarranno costanti.

A volte le dimensioni di un'immagine potrebbero non essere sotto il tuo controllo, ad esempio se un'immagine viene aggiunta tramite un sistema di gestione dei contenuti. Se il tuo design richiede che le immagini abbiano proporzioni diverse da quelle reali dell'immagine, utilizza la proprietà aspect-ratio in CSS.

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

ma poi il browser potrebbe comprimere o estendere l'immagine per adattarla alle proporzioni preferite.

Profilo di un bel cane dall'aspetto felice con una palla in bocca, ma l'immagine schiacciata.

Per evitare che ciò accada, utilizza la proprietà object-fit.

Supporto dei browser

  • 32
  • 79
  • 36
  • 10

Fonte

Un valore object-fit pari a contain indica al browser di preservare le proporzioni dell'immagine, anche se questo significa lasciare uno spazio vuoto sopra e sotto.

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

Un valore object-fit pari a cover indica al browser di preservare le proporzioni dell'immagine, anche se ciò comporta il ritaglio dell'immagine in alto e in basso.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
Profilo di un bel cane dall'aspetto felice con una palla in bocca; c'è più spazio su entrambi i lati dell'immagine. Profilo di un bel cane dall'aspetto felice con una palla in bocca; l'immagine è stata ritagliata in alto e in basso.
La stessa immagine con due valori diversi per "object-fit". Il primo ha un valore "object-fit" di "contiene". Il secondo ha un valore "object-fit" di "cover".

Se il problema di ritaglio nella parte superiore e inferiore è uniforme, utilizza la proprietà CSS object-position per regolare la messa a fuoco del ritaglio.

Supporto dei browser

  • 32
  • 79
  • 36
  • 10

Fonte

Puoi assicurarti che i contenuti delle immagini più importanti siano ancora visibili.

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

Profilo di un bel cane dall'aspetto felice con una palla in bocca; l'immagine è stata ritagliata solo in basso.

Caricare le immagini

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

Suggerimenti per le dimensioni

Se conosci le dimensioni dell'immagine, devi includere gli attributi width e height. Anche se l'immagine viene visualizzata con dimensioni diverse (per effetto della regola max-inline-size: 100%), il browser conosce comunque il rapporto tra larghezza e altezza e può riservare la giusta quantità di spazio. Questo impedirà agli altri contenuti di spostarsi quando viene caricata l'immagine.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>
Il primo video mostra un layout senza dimensioni dell'immagine definite. Nota come il testo salta una volta caricate le immagini. Nel secondo video, sono state indicate le dimensioni dell'immagine. Lo spazio rimane disponibile per l'immagine in modo che, una volta caricata, il testo non salti da una parte all'altra.

Caricamento dei suggerimenti in corso...

Utilizza l'attributo loading per indicare al browser se ritardare il caricamento dell'immagine finché non si trova nell'area visibile o nelle sue vicinanze. Per le immagini below the fold, utilizza il valore lazy. Il browser non carica immagini lente finché l'utente non ha fatto scorrere la pagina fino a quando l'immagine sta per essere visualizzata. 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 deve essere utilizzato loading. Se il tuo sito applica automaticamente l'attributo loading="lazy", spesso puoi impostare l'attributo eager (che è il valore predefinito) per impedirne l'applicazione:

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

Priorità recupero

Per le immagini importanti, come l'immagine LCP, puoi dare ulteriore priorità al caricamento utilizzando Priorità di recupero 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 indichi al browser di recuperare l'immagine immediatamente e con la massima priorità, anziché attendere il completamento del layout da parte del browser quando le immagini vengono recuperate normalmente.

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

Suggerimenti di precaricamento

Alcune immagini potrebbero non essere disponibili nel codice HTML iniziale, se sono state aggiunte tramite JavaScript o come immagine di sfondo in CSS. Puoi anche utilizzare il precaricamento per consentire il recupero anticipato di queste immagini importanti. Puoi combinare questo valore con l'attributo fetchpriority per le immagini davvero importanti:

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

Anche in questo caso, questo deve essere usato con moderazione per evitare di sostituire troppo l'euristica di priorità dei browser, che potrebbe portare a un peggioramento delle prestazioni.

Il precaricamento delle immagini adattabili basato su srcset (descritto di seguito) tramite gli attributi imagesrcset e imagesizes è più avanzato ed è supportato in alcuni browser, ma non in tutti:

Escludendo href di riserva, puoi assicurarti che i browser che non supportano questa funzionalità non precaricano l'immagine errata.

Il precaricamento basato su diversi formati delle immagini in base al supporto del browser di queste immagini non è attualmente supportato e potrebbe comportare download aggiuntivi.

L'ideale è evitare il precaricamento dove possibile e fare in modo che l'immagine sia disponibile nel codice HTML iniziale, per evitare la ripetizione del codice e consentire l'accesso all'intera gamma di opzioni supportate dal browser.

Decodifica delle immagini

C'è anche un attributo decoding che puoi aggiungere agli elementi img. Puoi indicare al browser che l'immagine può essere decodificata in modo asincrono. Il browser può quindi dare priorità all'elaborazione di altri contenuti.

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

Puoi utilizzare il valore sync se l'immagine stessa è l'elemento più importante a cui dare la priorità.

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

L'attributo decoding non cambia la velocità di decodifica dell'immagine, ma si limita a stabilire se il browser attende la decodifica dell'immagine prima di visualizzare altri contenuti.

Nella maggior parte dei casi, questa operazione avrà un impatto minimo, ma in alcuni casi potrebbe consentire una visualizzazione leggermente più veloce dell'immagine o dei contenuti. Ad esempio, per un documento di grandi dimensioni con molti elementi che richiedono tempo per il rendering e con immagini di grandi dimensioni che richiedono un po' di tempo per la decodifica, l'impostazione di sync su immagini importanti comunica al browser di attendere l'immagine ed eseguire il rendering di entrambe contemporaneamente. In alternativa, l'impostazione async può consentire la visualizzazione più rapida dei contenuti senza attendere la decodifica dell'immagine.

Tuttavia, l'opzione migliore è in genere provare a evitare dimensioni del DOM eccessive e assicurarsi che vengano utilizzate immagini adattabili per ridurre i tempi di decodifica, il che significa che l'attributo di decodifica avrà scarso effetto.

Immagini adattabili con srcset

Grazie alla dichiarazione max-inline-size: 100%, le tue immagini non usciranno mai dai loro contenitori. Tuttavia, non ci sono problemi anche se si ha un'immagine di grandi dimensioni che si restringe per adattarsi. Se un utente utilizza un dispositivo con schermo piccolo su una rete a bassa larghezza di banda, scaricherà immagini inutilmente grandi.

Se crei più versioni della stessa immagine di dimensioni diverse, puoi comunicarle al browser utilizzando l'attributo srcset.

Descrittore di larghezza

Puoi inserire un elenco di valori separati da virgole. Ogni valore deve essere l'URL di un'immagine seguito da uno spazio seguito da alcuni metadati relativi all'immagine. Questi metadati sono chiamati descrittore.

In questo esempio, i metadati descrivono la larghezza di ogni immagine che utilizza l'unità w. Un w corrisponde a 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 non sostituisce l'attributo src. Invece, l'attributo srcset completa l'attributo src. Devi comunque avere un attributo src valido, ma ora il browser può sostituirlo con una delle opzioni elencate nell'attributo srcset.

Il browser non scarica le immagini più grandi, a meno che non siano necessarie. Ciò consente di risparmiare larghezza di banda.

Dimensioni

Se utilizzi il descrittore di larghezza, devi utilizzare anche l'attributo sizes per fornire ulteriori informazioni al browser. Indica al browser le dimensioni di visualizzazione dell'immagine in base alle diverse condizioni. Queste condizioni sono specificate in una query supporti.

L'attributo sizes utilizza un elenco separato da virgole di query supporti 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, stai dicendo al browser che sopra una larghezza dell'area visibile pari a 66em di visualizzare l'immagine non più larga di un terzo dello schermo (ad esempio, all'interno di un layout a tre colonne).

Per larghezze dell'area visibile comprese tra 44em e 66em, mostra l'immagine a metà della larghezza dello schermo (con un layout a due colonne).

Per tutti gli elementi al di sotto di 44em, visualizza l'immagine a larghezza intera dello schermo.

Ciò significa che l'immagine più grande non verrà necessariamente utilizzata per lo schermo più ampio. In una finestra del browser larga in grado di visualizzare un layout a più colonne verrà utilizzata un'immagine che rientra in una colonna. L'immagine potrebbe essere più piccola di un'immagine utilizzata per un layout a una colonna su uno schermo più stretto.

Descrittore della densità di pixel

Esiste un'altra situazione in cui potresti voler fornire più versioni della stessa immagine.

Alcuni dispositivi hanno display ad alta densità. Su un display a doppia densità puoi inserire due pixel di informazioni nello spazio di un pixel. In questo modo le immagini appaiono nitide su questi tipi di display.

Due versioni della stessa immagine di un bel cane felice con una palla in bocca: un&#39;immagine nitida e l&#39;altra sfocata.

Utilizza il descrittore della densità per descrivere la densità dei pixel dell'immagine in relazione all'immagine nell'attributo src. Il descrittore della densità è un numero seguito dalla lettera x: 1x, 2x e così via.

<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 una dimensione di 300 x 200 pixel e medium-image.png è di 600 x 400 pixel, allora medium-image.png può avere una dimensione successiva di 2x nell'elenco srcset.

Non è necessario 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. Ecco perché fornisci sempre un attributo alt con una descrizione dell'immagine per gli screen reader e i motori di ricerca.

Se incorpori un'immagine che è puramente un aspetto grafico senza contenuti significativi, utilizza un attributo alt vuoto.

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

Devi comunque includere l'attributo alt. Un attributo alt mancante non corrisponde a un attributo alt vuoto. Un attributo alt vuoto comunica a uno screen reader che questa immagine è una presentazione.

Idealmente, le immagini di presentazione o decorative non dovrebbero essere presenti nel codice HTML. HTML è per la struttura. CSS è destinato alla 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 candidati utilizzando la funzione image-set per background-image.

La funzione image-set in CSS è molto simile all'attributo srcset nel codice HTML. Fornisci un elenco di immagini con un descrittore di densità dei pixel per ciascuna.

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

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

Quando aggiungi immagini al tuo sito, devi tenere in considerazione molti fattori:

Riservando lo spazio giusto per ogni immagine. Capire di quante dimensioni hai bisogno. Decidere se l'immagine deve contenere contenuti o elementi decorativi.

Vale la pena dedicare tempo alla creazione di immagini corrette. Le strategie per le immagini di scarsa qualità possono causare frustrazione e seccature per gli utenti. Una buona strategia per le immagini rende il tuo sito conciso e nitido, indipendentemente dal dispositivo o dalla connessione di rete dell'utente.

Il toolkit include un altro elemento HTML che ti consente di esercitare un maggiore controllo sulle immagini: l'elemento picture.

Verifica la tua comprensione

Verifica la tua conoscenza delle immagini

Affinché le immagini si adattino all'area visibile, devono essere aggiunti degli stili.

Vero
Le immagini senza contenimento saranno grandi quanto le loro dimensioni naturali.
falso
Gli stili sono obbligatori.

Quando l'altezza e la larghezza di un'immagine assumono proporzioni non naturali, quali stili possono consentire di adattare l'immagine a queste proporzioni?

object-fit
Specifica in che modo l'immagine si adatta a parole chiave come contain e cover.
image-fit
Questa proprietà non esiste, l'ho inventata.
fit-image
Questa proprietà non esiste, l'ho inventata.
aspect-ratio
Ciò potrebbe causare o risolvere proporzioni non naturali delle immagini.

L'aggiunta di height e width alle immagini impedisce al CSS di assegnare uno stile diverso.

Vero
Considerali più come suggerimenti che regole.
falso
CSS offre numerose opzioni dinamiche per il dimensionamento delle immagini, anche se altezza e larghezza sono in linea nel tag.

L'attributo srcset non _______ l'attributo src, ma lo _______.

completare, sostituire
srcset non sostituisce affatto l'attributo src.
sostituire, completa
Fornisce al browser opzioni aggiuntive tra cui scegliere, se possibile.

alt mancante su un'immagine è uguale a un alt vuoto.

Vero
Un attributo alt vuoto comunica a uno screen reader che questa immagine è di presentazione
falso
alt mancante indica nulla a uno screen reader.