Immagini adattabili

Il testo sul Web si posiziona automaticamente sul bordo dello schermo in modo che dell'overflow. Le immagini, invece, hanno una dimensione intrinseca. Se un'immagine viene rispetto allo schermo, l'immagine straripa e l'utente deve scorrere in orizzontale per vederli tutti.

Fortunatamente, il CSS offre gli strumenti per evitare che questo accada.

Limita le immagini

Nel foglio di stile, puoi utilizzare max-inline-size per dichiarare che le immagini non possono mai essere visualizzate a dimensioni superiori a contenente l'elemento.

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

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

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

Con questa regola attiva, i browser fanno automaticamente lo scale down delle immagini per adattarle al schermo.

L'aggiunta di una block-size auto significa che il browser conserva le immagini proporzioni corrispondenti le ridimensiona.

A volte, le dimensioni di un'immagine vengono impostate da un sistema di gestione dei contenuti (CMS) oppure in un altro sistema di distribuzione dei contenuti. Se il tuo design richiede proporzioni diverse da quella predefinita del CMS, puoi utilizzare aspect-ratio per preservare il design del sito:

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

Purtroppo, questo spesso significa che il browser deve schiacciare o allungare l'immagine per adattarlo allo spazio previsto.

Per evitare schiacciamenti e allungamenti, utilizza la Proprietà object-fit.

Un valore object-fit di contain indica al browser di conservare il valore proporzioni e, se necessario, lascia uno spazio vuoto attorno all'immagine.

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 conservare il valore e ritagliare l'immagine, se necessario.

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

di Gemini Advanced.

.

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

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

Pubblicare le immagini

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

Suggerimenti per le dimensioni

Se conosci le dimensioni dell'immagine, includi sempre width e height attributi. Anche se l'immagine viene visualizzata con dimensioni diverse a causa max-inline-size regola, il browser continua a conoscere il rapporto larghezza-altezza e riserva la giusta quantità di spazio. In questo modo, gli altri contenuti che saltano durante il caricamento dell'immagine.

<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'elemento dell'immagine finché non si trova all'interno o vicino all'area visibile. Per le immagini below the fold, utilizza un valore di lazy. Il browser non caricherà le immagini lazy finché l'utente non ha fatto scorrere lontano abbastanza in modo che l'immagine stia per apparire. Se l'utente non ha mai scorre, l'immagine non si carica mai.

<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 genera applica l'attributo loading="lazy", solitamente puoi impostare loading sul valore predefinito di 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 ulteriormente assegna la priorità al caricamento utilizzando la priorità di recupero imposta l'attributo fetchpriority su high:

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

Questo indica al browser di recuperare subito l'immagine e, con una priorità elevata, invece di attendere che il browser abbia terminato il layout e recuperi le immagini normalmente.

Tuttavia, quando chiedi al browser di dare la priorità al download di una risorsa, ad esempio un'immagine, il browser deve ridurre la priorità a un'altra risorsa, come uno script o del tipo di carattere. Imposta fetchpriority="high" su un'immagine solo se è veramente vitale.

Suggerimenti per il precaricamento

L'ideale è evitare il precaricamento ogni volta che è possibile includendo tutte le immagini nella il file HTML iniziale. Tuttavia, alcune immagini, ad esempio le immagini, potrebbero non essere disponibili aggiunta da JavaScript o da un'immagine di sfondo CSS.

Puoi usare il precaricamento per far sì che il browser recuperi queste immagini importanti prima che nel tempo. Per le immagini davvero importanti, puoi combinare questo precaricamento con Attributo fetchpriority:

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

Anche in questo caso, utilizza questi attributi con parsimonia per evitare di eseguire l'override del parametro dell'euristica di prioritizzazione troppo spesso. Un loro uso eccessivo può influire sulle prestazioni la degradazione dei dati.

Alcuni browser supportano il precaricamento di immagini adattabili basato su 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 href di riserva, puoi assicurarti che i browser senza srcset supporterà comunque a precaricare l'immagine corretta.

Non puoi precaricare immagini in formati diversi in base al supporto del browser di determinati formati. Questo tentativo può portare a download aggiuntivi che sprecano e i dati di Google Cloud.

Decodifica dell'immagine

Esiste anche un attributo decoding che puoi aggiungere agli elementi img. Puoi capire al browser in cui l'immagine può essere decodificata in modo asincrono, in modo che possa assegnare la priorità durante l'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 contenuti 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 modifica la velocità di decodifica dell'immagine. Interessa solo se il browser attende che la decodifica dell'immagine avvenga prima durante il rendering di altri contenuti.

Nella maggior parte dei casi questo non ha un grande impatto, ma a volte può far sì che browser visualizza la tua immagine o altri contenuti leggermente più velocemente. Ad esempio, per un documento di grandi dimensioni con molti elementi che richiedono tempo per il rendering e con la decodifica di immagini richiede molto tempo, l'impostazione di sync su immagini importanti indica il browser deve attendere l'immagine ed eseguire il rendering di entrambi contemporaneamente. In alternativa, puoi impostare async per consentire al browser di visualizzare i contenuti più velocemente e senza in attesa della decodifica dell'immagine.

Tuttavia, l'opzione migliore è di solito evitare dimensioni DOM eccessive e usa immagini adattabili per ridurre i tempi di decodifica, invece di usare decoding.

Immagini adattabili con srcset

Grazie alla dichiarazione max-inline-size: 100%, le tue immagini non possono suddividersi dei loro container. Tuttavia, se un utente ha uno schermo piccolo e una larghezza di banda ridotta rete, consentendo il download di immagini delle stesse dimensioni degli utenti con schermi più grandi spreca i dati.

Per risolvere il problema, aggiungi più versioni della stessa immagine con dimensioni diverse. e utilizza la srcset per indicare al browser queste dimensioni e quando utilizzarle.

Descrittore di larghezza

Puoi definire un valore srcset utilizzando un elenco di valori separati da virgole. Ogni valore l'URL di un'immagine, seguito da uno spazio e da alcuni metadati relativi dell'immagine, chiamato descriptor.

In questo esempio, i metadati descrivono la larghezza di ogni immagine utilizzando il parametro w unità. Un w è la 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 completa l'attributo src anziché sostituirlo. Devi comunque disporre di un attributo src valido, ma il browser può sostituirne l'attributo con una delle opzioni elencate nella tabella srcset. Per risparmiare larghezza di banda, il browser scarica l'immagine più grande solo se necessario.

Dimensioni

Se utilizzi il descrittore di larghezza, devi utilizzare anche sizes per fornire al browser maggiori informazioni. Questo indica al browser le dimensioni ti aspetti che l'immagine venga visualizzata in condizioni diverse. Quelli vengono specificate in una query supporti.

L'attributo sizes accetta un elenco separato da virgole di query supporti e immagini con una larghezza di banda.

<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'area visibile con larghezza superiore a 66em, l'immagine dovrebbe essere visualizzata non più larga di un terzo dello schermo (all'interno di un layout a tre colonne, ad esempio).

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

Per qualsiasi elemento più stretto di 44em, visualizza l'immagine fino alla larghezza massima del schermo.

Ciò significa che l'immagine più grande non verrà necessariamente utilizzata per schermo. Un'ampia finestra del browser in grado di visualizzare un layout a più colonne utilizza una che rientra in una singola colonna, che potrebbe essere più piccola di un'immagine utilizzata per layout a colonna singola su uno schermo più stretto.

Descrittore di densità pixel

Puoi utilizzare i descrittori anche per fornire una versione alternativa delle immagini a vengono visualizzati su display ad alta densità, per garantire immagini nitide le risoluzioni che forniscono.

Utilizza il descrittore di densità per descrivere la densità dei pixel dell'immagine in in relazione all'immagine nell'attributo src. Il descrittore di densità è un numero seguita dalla lettera x, come in 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 una dimensione di 300 x 200 pixel e medium-image.png è 600 x 400 pixel, dopodiché medium-image.png può avere 2x nell'intervallo Elenco srcset.

Non è necessario utilizzare numeri interi. Se un'altra versione dell'immagine ha il formato 450 by È di 300 pixel, per descriverlo 1.5x.

Immagini della presentazione

Le immagini nel codice HTML sono contenuti. Ecco perché includi l'attributo alt con una descrizione dell'immagine per screen reader e motori di ricerca.

Se incorpori un'immagine decorativa, senza alcun significato puoi usare 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 è rappresentativo. Un attributo alt mancante non fornisce queste informazioni.

Idealmente, le immagini di presentazione o decorative sono incluse nel CSS anziché HTML. Il codice 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 candidati utilizzando image-set per background-image.

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

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.

Ci sono molti fattori da considerare quando aggiungi immagini al tuo sito, tra cui:

• Riservare lo spazio giusto per ogni immagine.
• Capire di quante dimensioni hai bisogno.
• La scelta del contenuto dell'immagine o decorativa.

Vale la pena dedicare del tempo a creare le immagini giuste. Strategie per le immagini scadenti possono irritare e frustrare gli utenti. Una buona strategia per le immagini dà spazio al tuo sito conciso e nitido, indipendentemente dal dispositivo o dalla connessione di rete dell'utente.

Il toolkit include un altro elemento HTML che ti offre un maggiore controllo immagini: l'elemento picture.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di immagini.