Il testo sul web va a capo automaticamente al bordo dello schermo in modo che non si sovrapponga. Le immagini, invece, hanno una dimensione intrinseca. Se un'immagine è più larga dello schermo, si espande e l'utente deve scorrere in orizzontale per vederla tutta.
Fortunatamente, CSS ti offre gli strumenti necessari per evitare che ciò accada.
Limita le immagini
Nel foglio di stile, puoi utilizzare max-inline-size per dichiarare che le immagini non possono mai essere visualizzate a una dimensione 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;
}
Quando questa regola è attiva, i browser fanno automaticamente lo scale down delle immagini per adattarle allo schermo.
Se aggiungi un valore block-size pari a auto, il browser mantiene le proporzioni delle immagini durante il processo di ridimensionamento.
A volte, le dimensioni di un'immagine vengono impostate da un sistema di gestione dei contenuti (CMS) o da un altro sistema di pubblicazione dei contenuti. Se il tuo design richiede proporzioni diverse
da quelle predefinite 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, questo spesso significa che il browser deve comprimere o estendere l'immagine per adattarla allo spazio previsto.
Per evitare comprimi e stretching, utilizza la proprietà object-fit.
Un valore object-fit pari a contain indica al browser di preservare le proporzioni dell'immagine, lasciando uno 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 pari a 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à posizione oggetto. In questo modo viene regolato il focus del ritaglio, in modo da 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;
}
object-position per ritagliare
solo un lato dell'immagine.Pubblicazione delle 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 il dimensionamento
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 riconosce comunque il rapporto larghezza-altezza e può riservare la giusta quantità di spazio. In questo modo, gli altri tuoi contenuti
non 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'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 abbastanza verso il basso da far sì che l'immagine stia 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 utilizzare loading. Se per il tuo sito viene applicato automaticamente l'attributo loading="lazy", in genere 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à recupero
Per 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 subito l'immagine e ad alta priorità, anziché 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à di un'altra risorsa, ad esempio uno script o un file del carattere. Imposta fetchpriority="high" su un'immagine solo se è davvero vitale.
Suggerimenti per il precaricamento
È preferibile evitare il precaricamento quando possibile includendo tutte le immagini nel file HTML iniziale. Tuttavia, alcune immagini potrebbero non essere disponibili, ad esempio quelle aggiunte da JavaScript o un'immagine di sfondo CSS.
Puoi utilizzare il precaricamento per fare in modo che il browser recuperi in anticipo queste immagini importanti. Per le immagini davvero importanti, puoi combinare questo 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 sostituire troppo spesso l'euristica di priorità del browser. Un uso eccessivo di queste best practice può peggiorare le prestazioni.
Alcuni browser supportano il precaricamento delle immagini adattabili in base a srcset mediante 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">
Escludendo l'elemento di riserva href, puoi assicurarti che i browser che non supportano srcset precaricano comunque l'immagine corretta.
Non puoi precaricare immagini in formati diversi in base al supporto di determinati formati da parte del browser. Questo tentativo può causare download aggiuntivi che sprecano i dati degli utenti.
Decodifica delle immagini
C'è anche un attributo decoding che puoi aggiungere agli elementi img. Puoi comunicare al browser che l'immagine può essere decodificata in modo asincrono, in modo che possa 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 è il contenuto 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. Determina solo se il browser attende l'esecuzione della decodifica dell'immagine prima di visualizzare altri contenuti.
Nella maggior parte dei casi questo non ha un impatto significativo, ma a volte può consentire al browser di visualizzare l'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 immagini di grandi dimensioni che richiedono molto tempo per la decodifica, l'impostazione di sync su immagini importanti indica al browser di attendere l'immagine ed eseguire il rendering di entrambe contemporaneamente. In alternativa, puoi impostare async per consentire al browser di visualizzare i contenuti più velocemente e senza attendere la decodifica dell'immagine.
Tuttavia, in genere l'opzione migliore consiste nel cercare di evitare dimensioni del DOM eccessive e utilizzare immagini adattabili per ridurre i tempi di decodifica, anziché utilizzare decoding.
Immagini adattabili con srcset
Grazie a questa dichiarazione max-inline-size: 100%, le immagini non possono uscire dai rispettivi container. Tuttavia, se un utente ha uno schermo di piccole dimensioni e una rete a bassa larghezza di banda, è in grado di scaricare immagini delle stesse dimensioni degli utenti con schermi più grandi
perdere dati.
Per risolvere il problema, aggiungi più versioni della stessa immagine di dimensioni diverse e utilizza l'attributo srcset per indicare al browser che esistono queste dimensioni e quando utilizzarle.
Descrittore 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 all'immagine, chiamati descriptor.
In questo esempio, i metadati descrivono la larghezza di ogni immagine utilizzando l'unità w. 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 avere un attributo src valido, ma il browser può sostituirne
il valore con una delle opzioni elencate in 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 l'attributo sizes per fornire al browser ulteriori informazioni. Questo valore indica al browser le dimensioni
previste dell'immagine in condizioni diverse. Queste condizioni sono specificate in una query supporti.
L'attributo sizes accetta 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 indicando 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 (ad esempio in un layout a tre colonne).
Per larghezze dell'area visibile comprese tra 44em e 66em, mostra l'immagine a metà della larghezza dello schermo (come in un layout a due colonne).
Per gli elementi più stretti 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ù grande. Una finestra del browser ampia in grado di visualizzare un layout a più colonne utilizza un'immagine che si adatta a una singola colonna, che potrebbe essere più piccola di un'immagine utilizzata per un layout a singola 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à per mantenere le immagini nitide alle risoluzioni più alte fornite.
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, 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 è di 600 x 400 pixel, allora medium-image.png può contenere 2x nell'elenco srcset.
Non è necessario usare 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 nel codice 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 è rappresentativa. Un attributo alt mancante non fornisce questa informazione.
Idealmente, le immagini di presentazione o decorative siano incluse nel CSS anziché in HTML. HTML è per la struttura. CSS è per la presentazione.
Immagini di sfondo
Utilizza la proprietà background-image in CSS per caricare 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 funziona in modo molto simile all'attributo srcset in HTML.
Fornisci un elenco di immagini con un descrittore di 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 in base alla densità dei pixel del dispositivo.
Quando aggiungi immagini al tuo sito, devi tenere in considerazione molti fattori, tra cui:
- Riservare lo spazio giusto per ogni immagine.
- Capire quante taglie ti servono.
- Decidere se l'immagine è contenuto o decorativa.
Vale la pena dedicare tempo a creare immagini corrette. Strategie per le immagini di scarsa qualità possono essere fastidiose e infastidire gli utenti. Una buona strategia per le immagini rende il sito conciso e nitido, indipendentemente dal dispositivo o dalla connessione di rete dell'utente.
Nel toolkit è presente un altro elemento HTML per offrirti un maggiore controllo sulle immagini: l'elemento picture.
Verifica le tue conoscenze
Verifica la tua conoscenza delle immagini.
Devi aggiungere degli stili affinché le immagini si adattino all'area visibile.
Quando l'altezza e la larghezza di un'immagine sono state convertite in proporzioni non naturali, quali stili possono aiutarti a adattare l'immagine a queste proporzioni?
object-fitcontain e cover.image-fitfit-imageaspect-ratioL'inserimento di height e width nelle immagini impedisce a CSS di modificarne uno stile diverso.
L'attributo srcset non _______ l'attributo src, ma _______.
srcset sicuramente non sostituisce l'attributo src.Un elemento alt mancante in un'immagine è uguale a un elemento alt vuoto.
alt vuoto indica a uno screen reader che questa immagine è di presentazione.alt mancante segnala nulla a uno screen reader.