Può capitare a tutti: hai dimenticato di ridurre le dimensioni di un'immagine prima di aggiungerla alla pagina. L'immagine sembra a posto, ma sta sprecando i dati degli utenti e peggiorando il rendimento della pagina.
Identificare le immagini con dimensioni errate
Lighthouse consente di identificare facilmente le immagini con dimensioni errate. Esegui il controllo del rendimento (Lighthouse > Opzioni > Rendimento) e cerca i risultati del controllo Dimensioni delle immagini adeguate. Il controllo elenca tutte 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 ti senti a tuo agio 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à 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 stilizzati utilizzando unità relative verranno visualizzati con dimensioni diverse, 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 funzioni su tutti i dispositivi.
Ti consigliamo di controllare i dati di analisi (ad es. Google Analytics) per scoprire quali dimensioni dei display vengono utilizzate di solito dai tuoi utenti. In alternativa, screensiz.es fornisce informazioni sui display di molti dispositivi comuni. - Unità di misura assolute: ridimensiona l'immagine in base alle dimensioni in cui viene visualizzata.
Il riquadro Elementi di DevTools può essere utilizzato per determinare le dimensioni 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 a densità di visualizzazione diverse.
Leggi la guida alle immagini adattabili.
Per "densità del display" si intende il fatto che i diversi display 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.
Ridimensionare le immagini
Indipendentemente dall'approccio scelto, potresti trovare utile utilizzare ImageMagick per ridimensionare le immagini. ImageMagick è lo strumento a riga di comando più popolare per la creazione e la modifica di 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 devi ridimensionare molte immagini, potresti trovare più pratico 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 costante. 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.