Pubblica immagini con dimensioni corrette

Katie Hempenius
Katie Hempenius

Ci siamo passati tutti: avevi dimenticato di ridimensionare un'immagine prima di aggiungerla alla pagina. L'immagine sembra buona, ma spreca i dati degli utenti e influisce negativamente sulle prestazioni della pagina.

Identifica le immagini di dimensioni errate

Lighthouse consente di identificare facilmente le immagini di dimensioni errate. Esegui il controllo delle prestazioni (Lighthouse > Opzioni > Prestazioni) e cerca i risultati del controllo Immagini di dimensioni adeguate. Nel controllo vengono elencate le immagini che devono essere ridimensionate.

Determinare le dimensioni corrette delle immagini

Le dimensioni delle immagini possono essere apparentemente complicate. Per questo motivo, abbiamo proposto due approcci: "Buono" e "Migliore". Entrambi miglioreranno le prestazioni, ma l'approccio "migliore" potrebbe richiedere un po' più di tempo per la comprensione e l'implementazione. Tuttavia, ti ricompenserà anche con miglioramenti delle prestazioni maggiori. La scelta migliore per te è quella che sei disposto a implementare.

Una breve nota sulle unità CSS

Esistono due tipi di unità CSS per specificare le dimensioni degli elementi HTML, incluse le immagini:

  • Unità assolute: gli elementi con stili applicati utilizzando unità assolute verranno sempre visualizzati con le stesse dimensioni, indipendentemente dal dispositivo. Esempi di unità CSS assolute valide: px, cm, mm, in.
  • Unità relative: gli elementi definiti utilizzando unità relative verranno visualizzati con dimensioni diverse, a seconda della lunghezza relativa specificata. Esempi di unità CSS relative valide: %, vw (1vw = 1% della larghezza dell'area visibile), em (1,5 em = 1,5 volte la dimensione del carattere).

L'approccio "buono"

Per immagini con dimensioni basate su...

  • Unità relative: ridimensiona l'immagine a una dimensione adatta a tutti i dispositivi.

Potrebbe essere utile controllare i dati di analisi (ad es. Google Analytics) per capire quali dimensioni di visualizzazione vengono comunemente utilizzate dagli utenti. In alternativa, screensiz.es fornisce informazioni sulle visualizzazioni di molti dispositivi comuni. - Unità assolute: ridimensiona l'immagine in modo che corrisponda alle dimensioni di visualizzazione.

Il riquadro Elementi DevTools può essere utilizzato per determinare le dimensioni di un'immagine.

Riquadro dell'elemento DevTools

L'approccio "migliore"

Per le immagini con dimensioni sia assoluta che relativa, utilizza gli attributi srcset e sizes per pubblicare immagini diverse con densità di visualizzazione diverse. Leggi la guida sulle immagini adattabili.

"Densità dello schermo" si riferisce al fatto che display diversi hanno densità di pixel differenti. A parità di altri fattori, un display con un'alta densità di pixel apparirà più nitida rispetto a un display a bassa densità.

Di conseguenza, sono necessarie più versioni di immagini se vuoi che gli utenti vedano le possibili immagini più nitide, a prescindere dalla densità dei pixel del dispositivo.

Le tecniche per le immagini adattabili rendono possibile tutto ciò, permettendoti di elencare più versioni dell'immagine e affinché il dispositivo possa scegliere l'immagine più adatta alle sue esigenze.

Un'immagine che funziona su tutti i dispositivi sarà inutilmente grande per i dispositivi più piccoli. Le tecniche per immagini adattabili, in particolare srcset e size, consentono di specificare più versioni delle immagini e per il dispositivo di scegliere la dimensione più adatta.

Ridimensionamento delle immagini

A prescindere dall'approccio scelto, potrebbe essere utile utilizzare ImageMagick per ridimensionare le immagini. ImageMagick è lo strumento a riga di comando più usato per creare e modificare le immagini. La maggior parte delle persone può ridimensionare le immagini molto più rapidamente quando si utilizza l'interfaccia a riga di comando rispetto a un editor di immagini basato su GUI.

Ridimensiona l'immagine con le dimensioni dell'originale del 25%:

convert flower.jpg -resize 25% flower_small.jpg

Scala l'immagine per adattarla a una dimensione massima di "200 px di larghezza per 100 px di altezza":

# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg

# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg

Se ridimensionerai molte immagini, potresti trovare più pratico utilizzare uno script o un servizio per automatizzare il processo. Per saperne di più, consulta la guida alle immagini adattabili.

Specifica le dimensioni per evitare variazioni del layout

Anche se questa guida illustra le dimensioni delle immagini nell'ambito della riduzione della quantità di byte inutili scaricati, è importante tenere presente che riservare lo spazio corretto per le immagini nel layout è un altro componente fondamentale per ridurre al minimo la metrica Cumulative Layout Shift di una pagina. Quando pubblichi immagini in HTML, assicurati di utilizzare gli attributi width e height appropriati per consentire al browser di sapere quanto spazio assegnare nel layout per l'immagine:

<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">

Senza questi attributi o le dimensioni CSS equivalenti, il browser non ha idea di quanto spazio possa occupare l'immagine fino al suo caricamento. Ciò causerà variazioni del layout nel documento, che possono essere frustranti per gli utenti quando si spostano i contenuti dopo che hanno iniziato a consumarli. Ciò può comportare la perdita del punto durante la lettura da parte degli utenti o la perdita dell'obiettivo di hit desiderato che fa clic su qualcos'altro durante il caricamento della pagina.

In alternativa, rispetto a fornire la larghezza e l'altezza in modo esplicito, puoi utilizzare la proprietà aspect-ratio CSS nell'immagine. Questo effetto sulle dimensioni di un elemento ha un effetto simile a quello degli attributi width e height, nel senso che il contenitore manterrà proporzioni coerenti. Tuttavia, la differenza è che ciò potrebbe comportare l'utilizzo di proporzioni diverse rispetto all'immagine fornita, pertanto ti consigliamo di usare un'impostazione object-fit per assicurarti che l'immagine non sia distorta in questa visualizzazione esplicita a 16/9:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

Verifica

Dopo aver ridimensionato tutte le immagini, esegui nuovamente Lighthouse per verificare di non aver perso nulla.