Ci siamo passati tutti: hai dimenticato di ridimensionare un'immagine prima di aggiungerla al . L'immagine sembra corretta, ma sta sprecando il carico di lavoro degli utenti e danneggiare la pagina delle prestazioni.
Identificare immagini di dimensioni errate
Lighthouse consente di identificare facilmente le immagini di dimensioni errate. Esegui l' Controllo prestazioni (Lighthouse > Opzioni > Prestazioni) e cerca risultati del controllo Dimensioni corrette delle immagini. Il controllo elenca tutte le immagini devono essere ridimensionati.
Determinare le dimensioni corrette delle immagini
Il dimensionamento delle immagini può essere complicato in modo ingannevole. Per questo motivo, abbiamo fornito due approcci: il "buono" e il "migliore". Entrambi miglioreranno le prestazioni, ma "migliore" potrebbe richiedere più tempo per la comprensione e l'implementazione. Tuttavia, ti ricompenserà anche con maggiori miglioramenti delle prestazioni. La scelta migliore per sei quella che puoi implementare senza problemi.
Una breve nota sulle unità CSS
Esistono due tipi di unità CSS che consentono di specificare la dimensione degli elementi HTML: incluse le immagini:
- Unità assolute: gli elementi con stili applicati utilizzando unità assolute hanno sempre lo stesso formato visualizzato con le stesse dimensioni, indipendentemente dal dispositivo. Esempi di traffico valido, unità CSS assolute: px, cm, mm, in.
- Unità relative: gli elementi con stili applicati utilizzando unità relative verranno visualizzati in 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 = dimensione carattere 1,5 volte superiore).
Il "Buono" Approccio
Per le immagini con dimensioni basate su...
- Unità relative: ridimensiona l'immagine a una dimensione compatibile con tutti i dispositivi.
Potrebbe essere utile controllare i tuoi dati di analisi (ad es. Google Analytics) per vedere quali dimensioni di visualizzazione sono utilizzate più di frequente dai tuoi utenti. In alternativa, screensiz.es Fornisce informazioni sulla visualizzazione di molti dispositivi comuni. - Unità assolute: ridimensiona l'immagine in base alle dimensioni in cui viene visualizzata.
Il riquadro Elementi DevTools può essere utilizzato per determinare le dimensioni di un'immagine visualizzato in
Il "meglio" approccio
Per le immagini con dimensioni sia assolute che relative, utilizza srcset
e sizes
per pubblicare immagini diverse per densità di visualizzazione differenti.
Leggi la guida alle immagini adattabili.
"Compattezza visualizzazione" si riferisce al fatto che ogni display ha densità dei pixel. A parità di condizioni, un'elevata densità di pixel il display sarà più nitido di uno a bassa densità di pixel.
Di conseguenza sono necessarie più versioni dell'immagine se si desidera che gli utenti ottenere immagini sempre più nitide, a prescindere dalla densità dei pixel il proprio dispositivo.
Le tecniche per le immagini reattive lo rendono possibile poiché ti consentono di elencare più versioni immagine e che il dispositivo scelga l'immagine che funziona il miglior modo per farlo.
Un'immagine che funziona su tutti i dispositivi avrà dimensioni inutilmente grandi per su dispositivi più piccoli. Le tecniche per le immagini reattive, nello specifico srcset e dimensioni, consentono di specificare più versioni dell'immagine e il dispositivo può scegliere della dimensione più adatta.
Ridimensiona immagini
Indipendentemente dall'approccio scelto, potrebbe essere utile utilizzare ImageMagick per ridimensionare le immagini. ImageMagick è il più popolare a riga di comando per creare e modificare le 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 dell'originale:
convert flower.jpg -resize 25% flower_small.jpg
Ridimensiona l'immagine per adattarla in base a una dimensione compresa tra "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, può essere più pratico utilizzare una script o servizio per automatizzare il processo. Puoi scoprire di più in merito nel Guida alle immagini adattabili.
Evita variazioni del layout specificando le dimensioni
Anche se questa guida illustra le dimensioni delle immagini nel contesto della riduzione della quantità di byte 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 attributi width e height corretti in modo che il browser sappia quanto spazio da allocare nel layout dell'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 prima del caricamento. Ciò causerà variazioni di layout nel documento, il che può essere frustrante per gli utenti quando i contenuti si spostano dopo che hanno iniziato a consultarli. Questo può portare gli utenti a perdere il punto durante la lettura o a "perdersi" l'hit target previsto e finiscono per fare clic su qualcos'altro che non intendevano durante il caricamento pagina.
Un'alternativa all'utilizzo esplicito di larghezza e altezza è utilizzare la proprietà aspect-ratio CSS nell'immagine. Questo produce 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 ciò potrebbe comportare l'utilizzo di proporzioni diverse rispetto a quelle fornite nell'immagine, quindi ti consigliamo di usare un'impostazione object-fit per assicurarti che l'immagine non venga distorta in questa esplicita visualizzazione 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 averlo fatto. perdersi qualcosa.