Può capitare a tutti: hai dimenticato di ridurre le dimensioni di un'immagine prima di aggiungerla alla pagina. L'immagine sembra corretta, ma spreca i dati degli utenti e peggiora le prestazioni della pagina.
Identificare le immagini con dimensioni errate
Lighthouse consente di identificare facilmente le immagini con dimensioni errate. Esegui il controllo delle prestazioni (Lighthouse > Opzioni > Prestazioni) e cerca i risultati del controllo Dimensioni corrette delle immagini. Il controllo elenca le immagini che devono essere ridimensionate.
Determinare le dimensioni corrette delle immagini
Le dimensioni delle immagini possono essere ingannevolmente complicate. Per questo motivo, abbiamo fornito due approcci: "buono" e "migliore". Entrambi miglioreranno il rendimento, ma l'approccio "migliore" potrebbe richiedere un po' più di tempo per essere compreso e implementato. Tuttavia, ti offrirà anche maggiori miglioramenti del rendimento. La scelta migliore per te è quella che puoi implementare senza problemi.
Una breve nota sulle unità CSS
Esistono due tipi di unità CSS per specificare le dimensioni degli elementi HTML, incluse le immagini:
- Unità di misura assolute: gli elementi stilizzati utilizzando unità di misura assolute verranno sempre visualizzati con le stesse dimensioni, indipendentemente dal dispositivo. Esempi di unità CSS absolute valide: px, cm, mm, in.
- Unità relative: gli elementi con stili applicati utilizzando unità relative verranno visualizzati con dimensioni variabili, a seconda della lunghezza relativa specificata. Esempi di unità CSS relative valide: %, vw (1 vw = 1% della larghezza della visualizzazione), em (1,5 em = 1,5 volte le dimensioni dei caratteri).
L'approccio "Buono"
Per le immagini con dimensioni basate su...
- Unità relative: ridimensiona l'immagine in modo che sia adatta a tutti i dispositivi.
Ti consigliamo di controllare i dati di analisi (ad es. Google Analytics) per scoprire quali dimensioni di visualizzazione vengono comunemente utilizzate dagli utenti. In alternativa, screensiz.es fornisce informazioni sulla visualizzazione di molti dispositivi comuni. - Unità di misura assolute: ridimensiona l'immagine in base alle dimensioni in cui viene visualizzata.
Il riquadro Elementi DevTools può essere utilizzato per determinare le dimensioni di visualizzazione di un'immagine.
L'approccio "Migliore"
Per le immagini con dimensioni sia assolute che relative, utilizza gli attributi srcset
e sizes
per pubblicare immagini diverse per densità di visualizzazione diverse.
Leggi la guida alle immagini adattabili.
Per "densità del display" si intende il fatto che i display diversi hanno diverse densità di pixel. A parità di condizioni, un display con una densità di pixel elevata sarà più nitido di un display con una densità di pixel bassa.
Di conseguenza, sono necessarie più versioni di immagini se vuoi che gli utenti visualizzano le immagini più nitide possibili, indipendentemente dalla densità di pixel del loro dispositivo.
Le tecniche di immagini adattabili lo rendono possibile consentendoti di elencare più versioni di immagini e al dispositivo di scegliere l'immagine più adatta.
Un'immagine che funziona su tutti i dispositivi sarà inutilmente grande per i dispositivi più piccoli. Le tecniche di immagini responsive, in particolare srcset e sizes, ti consentono di specificare più versioni di immagini e di consentire al dispositivo di scegliere la dimensione più adatta.
Ridimensiona immagini
Indipendentemente dall'approccio scelto, potresti trovare 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 utilizzando la CLI rispetto a un editor di immagini basato su GUI.
Ridimensiona l'immagine al 25% delle dimensioni originali:
convert flower.jpg -resize 25% flower_small.jpg
Ridimensiona l'immagine in modo che rientri nelle dimensioni "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 intendi ridimensionare molte immagini, potrebbe essere più conveniente utilizzare uno script o un servizio per automatizzare il processo. Scopri di più nella guida Immagini responsive.
Evita variazioni di layout specificando le dimensioni
Sebbene questa guida descriva le dimensioni delle immagini nel contesto della riduzione della quantità di byte scaricati non necessari, è importante notare che la riserva dello spazio corretto per le immagini nel layout è un altro componente fondamentale per ridurre al minimo la metrica Spostamento cumulativo del layout di una pagina. Quando pubblichi immagini in HTML, assicurati di utilizzare gli attributi width
e height
appropriati in modo che il browser sappia quanto spazio allocare 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 occuperà l'immagine fino a quando non viene caricata. Ciò causerà variazioni del layout nel documento, il che può essere frustrante per gli utenti quando i contenuti si spostano dopo che hanno iniziato a utilizzarli. Ciò può comportare che gli utenti perdano il punto in cui si trovano durante la lettura o che "sbaglino" il target di hit previsto e finiscano per fare clic su qualcos'altro che non volevano durante il caricamento della pagina.
Un'alternativa per specificare la larghezza e l'altezza in modo esplicito è utilizzare la proprietà aspect-ratio
CSS sull'immagine. Questo ha un effetto simile sulle dimensioni di un elemento rispetto agli attributi width
e height
, nel senso che il contenitore manterrà un'area proporzionale coerente. Tuttavia, la differenza è che questo potrebbe comportare l'utilizzo di proporzioni diverse rispetto a quelle dell'immagine fornita, quindi ti consigliamo di utilizzare un'impostazione object-fit
per assicurarti che l'immagine non sia distorta in questa visualizzazione 16/9 esplicita:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Verifica
Dopo aver ridimensionato tutte le immagini, esegui di nuovo Lighthouse per verificare di non aver dimenticato nulla.