Capita a tutti: ti sei dimenticato di fare lo scale down di un'immagine prima di aggiungerla alla pagina. L'immagine sembra a posto, ma spreca i dati degli utenti e danneggia il rendimento della pagina.
Identificare le immagini con dimensioni errate
Lighthouse semplifica l'identificazione delle immagini con dimensioni errate. Esegui il controllo del rendimento (Lighthouse > Opzioni > Rendimento) e cerca i risultati del controllo Immagini con dimensioni corrette. Il controllo elenca tutte le immagini di cui è necessario ridimensionare le dimensioni.
Determinare le dimensioni corrette dell'immagine
Il ridimensionamento delle immagini può essere ingannevolmente complicato. Per questo motivo, abbiamo fornito due approcci: "buono" e "migliore". Entrambi migliorano il rendimento, ma l'approccio "migliore" potrebbe richiedere un po' più di tempo per essere compreso e implementato. Tuttavia, ti ricompenserà anche con miglioramenti più significativi del rendimento. La scelta migliore per te è quella che ti senti a tuo agio nell'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 utilizzano 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 utilizzano 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 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 con cui viene visualizzata.
Il riquadro Elementi degli Strumenti per sviluppatori può essere utilizzato per determinare le dimensioni con cui viene visualizzata un'immagine.
L'approccio "migliore"
Per le immagini con dimensioni sia assolute che relative, utilizza srcset
e sizes
attributi per pubblicare immagini diverse con densità di visualizzazione diverse.
Leggi la guida sulle immagini adattabili.
La "densità di visualizzazione" si riferisce al fatto che le diverse visualizzazioni hanno densità di pixel diverse. A parità di condizioni, una visualizzazione con densità di pixel elevata apparirà più nitida di una con densità di pixel bassa.
Di conseguenza, sono necessarie più versioni dell'immagine se vuoi che gli utenti vedano le immagini più nitide possibili, indipendentemente dalla densità di pixel del loro dispositivo.
Le tecniche per le immagini adattabili lo rendono possibile consentendoti di elencare più versioni dell'immagine 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 per le immagini adattabili, in particolare srcset e sizes, ti consentono di specificare più versioni dell'immagine e al dispositivo di scegliere le dimensioni più adatte.
Ridimensionare le immagini
Indipendentemente dall'approccio scelto, potrebbe essere utile utilizzare ImageMagick per ridimensionare le immagini. ImageMagick è lo strumento da riga di comando più diffuso 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 dell'originale:
convert flower.jpg -resize 25% flower_small.jpg
Scala l'immagine in modo che si adatti 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. Puoi scoprire di più nella guida Immagini adattabili.
Evitare 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 la prenotazione dello 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 corretti 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 sa quanto spazio occuperà l'immagine finché non viene caricata. Ciò causerà cambiamenti di layout nel documento, che possono essere frustranti per gli utenti quando i contenuti si spostano dopo che hanno iniziato a utilizzarli. Di conseguenza, gli utenti potrebbero perdere la posizione durante la lettura o "mancare" il target di clic previsto e finire per fare clic su qualcos'altro che non intendevano durante il caricamento della pagina.
Un'alternativa alla fornitura esplicita della larghezza e dell'altezza è l'utilizzo della proprietà CSS aspect-ratio sull'immagine. Questo ha un effetto simile sulle dimensioni di un elemento rispetto agli attributi width e height, nel senso che il contenitore manterrà proporzioni coerenti. Tuttavia, la differenza è che potrebbe essere utilizzata una proporzione diversa da quella fornita nell'immagine, quindi probabilmente ti consigliamo di 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
Dopo aver ridimensionato tutte le immagini, esegui di nuovo Lighthouse per verificare di non aver dimenticato nulla.