È capitato a tutti: hai dimenticato di fare lo scale down di un'immagine prima di aggiungerla alla pagina. L'immagine sembra corretta, ma spreca i dati degli utenti e influisce negativamente sulle prestazioni della pagina.
Identifica le immagini con dimensioni errate
Lighthouse semplifica l'identificazione delle immagini di dimensioni errate. Esegui il controllo del rendimento (Lighthouse > Opzioni > Rendimento) e cerca i risultati del controllo Dimensiona correttamente le immagini. Il controllo elenca tutte le immagini che devono essere ridimensionate.
Determina le dimensioni corrette dell'immagine
Il dimensionamento delle immagini può essere ingannevolmente complicato. 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 ricompenserà anche con maggiori miglioramenti delle prestazioni. La scelta migliore per te è quella che ti senti di 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 stile che utilizza 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 con stile che utilizza unità relative verranno visualizzati con dimensioni variabili, 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 le immagini con dimensioni basate su…
- Unità relative: ridimensiona l'immagine in modo che funzioni su tutti i dispositivi.
Potrebbe essere utile controllare i dati di analisi (ad es. Google Analytics) per vedere quali dimensioni di visualizzazione sono di uso comune tra i tuoi utenti. In alternativa, screensiz.es fornisce informazioni sui display di molti dispositivi comuni. - Unità assolute: ridimensiona l'immagine in modo che corrisponda alle dimensioni con cui viene visualizzata.
Il riquadro Elementi di 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.
"Densità di visualizzazione" si riferisce al fatto che display diversi hanno densità di pixel diverse. A parità di condizioni, un display ad alta densità di pixel apparirà più nitido di uno a bassa densità di pixel.
Di conseguenza, sono necessarie più versioni dell'immagine se vuoi che gli utenti visualizzino le immagini più nitide possibili, indipendentemente dalla densità di pixel del loro dispositivo.
Le tecniche per le immagini adattive lo rendono possibile consentendoti di elencare più versioni immagine e al dispositivo di scegliere quella più adatta.
Un'immagine che funziona su tutti i dispositivi sarà inutilmente grande per i dispositivi più piccoli. Le tecniche per le immagini adattabili, in particolare srcset e sizes, consentono di specificare più versioni immagine e di scegliere la dimensione più adatta al dispositivo.
Ridimensiona immagini
Indipendentemente dall'approccio scelto, potrebbe essere 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 l'interfaccia a riga di comando 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
Scala l'immagine per adattarla a "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, potrebbe essere più comodo utilizzare uno script o un servizio per automatizzare il processo. Per saperne di più, consulta la guida alle immagini adattabili.
Evita i cambiamenti di layout specificando le dimensioni
Sebbene questa guida tratti le dimensioni delle immagini nel contesto della riduzione della quantità di byte non necessari scaricati, è importante notare 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 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 il dimensionamento CSS equivalente, il browser non ha idea di quanto spazio occuperà l'immagine finché 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ò far sì che gli utenti perdano il segno durante la lettura o "manchino" il bersaglio previsto e finiscano per fare clic su qualcos'altro che non volevano durante il caricamento della pagina.
Un'alternativa all'indicazione esplicita di larghezza e altezza consiste nell'utilizzare la proprietà CSS aspect-ratio sull'immagine. Questo ha un effetto sulle dimensioni di un elemento 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 a quelle fornite per l'immagine, quindi probabilmente vorrai utilizzare un'impostazione object-fit per assicurarti che l'immagine non venga distorta in questa visualizzazione esplicita 16/9:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Verifica
Una volta ridimensionate tutte le immagini, esegui di nuovo Lighthouse per verificare di non aver dimenticato nulla.