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
.
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.
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.
Per evitare che ciò accada, utilizza la proprietà object-fit
.
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;
}
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.
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;
}
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"
>
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.
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.
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
contain
e cover
.image-fit
fit-image
aspect-ratio
L'aggiunta di height
e width
alle immagini impedisce al CSS di assegnare uno stile diverso.
L'attributo srcset
non _______ l'attributo src
, ma lo _______.
srcset
non sostituisce affatto l'attributo src
.alt
mancante su un'immagine è uguale a un alt
vuoto.
alt
vuoto comunica a uno screen reader che questa immagine è di presentazionealt
mancante indica nulla a uno screen reader.