Dimensionare Correttamente le Immagini
L'errore più comune con le immagini sul web, cosa costa ai tuoi visitatori e la soluzione che richiede un solo lotto di lavoro.
Misura la larghezza massima in cui l'immagine viene visualizzata, raddoppiala per gli schermi ad alta densità e ridimensiona la tua libreria a quel valore. Servire una fotografia da 4000 pixel in uno spazio da 800 pixel significa che il browser scarica circa 25 volte più dati di pixel di quanti possa effettivamente visualizzarne, per poi scartare il resto.
Su una connessione mobile il visitatore paga per tutto questo, in termini di tempo e dati. Dimensionare correttamente le immagini è di solito la singola riduzione di peso della pagina più significativa disponibile per un sito, e richiede un solo lotto di lavoro anziché un intero restyling.
Perché le immagini sovradimensionate costano così tanto
La dimensione del file scala con il numero di pixel, quindi dimezzare la larghezza e l'altezza rimuove circa il 75 percento dei dati. La relazione è quadratica anziché lineare, motivo per cui lo spreco cresce rapidamente.
| Dimensione caricata | Visualizzata a | Dati pixel sprecati | File tipico |
|---|---|---|---|
| 4000 x 3000 | 800 x 600 | 96 percento | 4.2 MB contro 180 KB |
| 2400 x 1600 | 1200 x 800 | 75 percento | 1.1 MB contro 290 KB |
| 1600 x 1200 | 800 x 600 | 75 percento | 520 KB contro 140 KB |
| 1200 x 900 | 1200 x 900 | 0 percento | 310 KB, dimensionata correttamente |
La prima riga rappresenta il caso comune sui siti in cui gli editor caricano le immagini direttamente da una fotocamera. Il browser scarica 4.2 MB, riduce le dimensioni e visualizza l'equivalente di un file da 180 KB.
Come misurare la dimensione reale di visualizzazione
Fai clic con il tasto destro sull'immagine nella tua pagina live, scegli Ispeziona e leggi le dimensioni visualizzate anziché quelle intrinseche. I browser mostrano entrambi i valori, e il divario tra di essi rappresenta lo spreco.
Verifica il caso più ampio anziché quello tipico. Un'immagine all'interno della colonna di un articolo potrebbe essere visualizzata a 700 pixel su desktop e a 380 su un telefono, quindi 700 è il numero che conta. Fai il test con la finestra del browser più ampia che i tuoi visitatori utilizzano realisticamente, poiché un banner a tutta larghezza cresce con la viewport e richiede un calcolo diverso.
La regola del raddoppio per schermi ad alta densità
Moltiplica la larghezza di visualizzazione per 2 e fermati lì, perché gli schermi oltre tale densità non mostrano alcun miglioramento percepibile. Un'immagine visualizzata a 700 pixel dovrebbe essere esportata a 1400.
Triplicare la densità viene talvolta suggerito ma è raramente giustificato. La differenza tra una densità di 2 e 3 volte è impercettibile a una normale distanza di visione, mentre il file cresce di oltre la metà. Comprimere maggiormente a una densità di 2 volte produce un risultato migliore rispetto a una compressione leggera a 3 volte, poiché i pixel extra nascondono la compressione.
Larghezze di visualizzazione comuni per il ridimensionamento
- Immagine del corpo dell'articolo: visualizzata a circa 700 px, esporta a 1400 px.
- Hero a tutta larghezza: visualizzata fino a 1920 px, esporta a 1920 px e comprimi maggiormente.
- Elemento a mezza larghezza: visualizzato a circa 600 px, esporta a 1200 px.
- Miniatura della griglia prodotti: visualizzata a circa 300 px, esporta a 600 px.
- Foto dell'autore o del profilo: visualizzata a circa 80 px, esporta a 160 px.
- Logo nell'intestazione: visualizzato a circa 180 px, esporta a 360 px o usa grafica vettoriale.
Perché le immagini a tutta larghezza fanno eccezione
Un banner a tutta larghezza non ha una dimensione di visualizzazione fissa, quindi limitalo a 1920 pixel e comprimilo maggiormente anziché raddoppiare. Raddoppiare un'immagine a tutta larghezza a 3840 pixel produce un file che nessuna pagina può giustificare.
I banner vengono solitamente visualizzati a distanza e contengono meno dettagli fini rispetto a una fotografia di prodotto, il che significa che una compressione aggressiva è meno visibile. Un banner da 1920 pixel con qualità 70 in WebP di solito pesa meno di 200 KB e appare corretto su ogni schermo, mentre la versione da 3840 pixel non offre alcun vantaggio visibile a fronte di un peso 4 volte superiore.
Come sistemare un'intera libreria
Per ridimensionare correttamente un sito esistente, segui questi 6 passaggi.
- Elenca gli spazi per le immagini nel tuo design, che di solito corrispondono a 4 o 6 dimensioni distinte anziché a dozzine.
- Misura la larghezza di visualizzazione di ciascuno spazio utilizzando l'ispettore del browser su una pagina live.
- Raddoppia ogni larghezza per ottenere la dimensione di esportazione.
- Suddividi la libreria in cartelle in base allo spazio di destinazione, poiché un'operazione in batch applica un'unica dimensione a tutti i file contenuti.
- Ridimensiona ogni cartella alla sua larghezza target, quindi comprimi e converti nello stesso passaggio.
- Sostituisci i file mantenendo gli stessi nomi in modo che le pagine esistenti continuino a funzionare.
La suddivisione in cartelle è il passaggio che trasforma questo processo in un lavoro in batch. La maggior parte dei siti utilizza molte meno dimensioni di immagine distinte di quanto si pensi, e il raggruppamento per spazio elimina la necessità di gestire i file singolarmente.
Immagini responsive e l'attributo srcset
Usa srcset per offrire diverse dimensioni e lasciare che sia il browser a scegliere quella corretta per ciascun dispositivo. In questo modo, un telefono scaricherà un file da 400 pixel mentre un computer desktop scaricherà un file da 1400 pixel dallo stesso codice.
Genera 3 larghezze per immagine, comunemente 400, 800 e 1600 pixel, ed elencale con le relative larghezze in pixel in modo che il browser possa scegliere. La maggior parte dei sistemi di gestione dei contenuti produce questo risultato automaticamente al momento del caricamento, quindi verifica cosa fa già la tua piattaforma. Laddove lo faccia, caricare un originale dimensionato correttamente migliora comunque ogni variante generata.
Ridimensiona sempre prima di comprimere
Ridimensionare prima significa che la compressione ha meno lavoro da fare, consentendo alla qualità di rimanere alta e al file di restare piccolo. Comprimere prima e ridimensionare dopo scarta dettagli che poi andrai a perdere nuovamente.
L'ordine influisce anche sull'aspetto del risultato finale. Un'immagine compressa a dimensione intera presenta artefatti che diventano più visibili quando l'immagine viene ridotta, poiché gli artefatti scalano con essa. Ridimensionare prima produce una sorgente più pulita per l'encoder e un risultato notevolmente migliore a parità di peso del file.
Cosa comporta questo per la velocità della pagina
Dimensionare correttamente le immagini rimuove in genere dal 60 al 90 percento del peso delle immagini su un sito che non lo ha mai fatto prima. Il miglioramento è maggiore di qualsiasi cambio di formato e solitamente superiore a tutte le altre ottimizzazioni combinate.
L'effetto si concentra sui visitatori da dispositivi mobili, dove le connessioni sono più lente e i dati costano. Il Largest Contentful Paint migliora direttamente, poiché questa metrica è normalmente determinata da un'unica grande immagine. Superare l'audit "Dimensiona correttamente le immagini" in Lighthouse spesso risolve 2 o 3 avvisi correlati contemporaneamente.
Non ingrandire mai un'immagine per adattarla
L'ingrandimento aggiunge pixel che la fotocamera non ha mai catturato, rendendo il risultato sfocato e aumentando il peso del file senza alcun beneficio. Ridurre le dimensioni è sempre sicuro, mentre l'ingrandimento è l'unica operazione che peggiora sistematicamente l'aspetto visivo.
Se un'immagine sorgente è più piccola dello spazio che deve riempire, le opzioni più corrette sono utilizzarla alla sua dimensione naturale, ritagliare il layout attorno ad essa o sostituire l'immagine. Ingrandire una fotografia da 600 pixel a 1600 pixel produce un file sfocato con un peso 4 volte superiore all'originale, fallendo contemporaneamente sia sul piano della qualità che su quello della velocità.
Controllare una pagina per immagini sovradimensionate
Apri gli strumenti per sviluppatori, passa alla scheda Rete, filtra per immagini e ricarica la pagina. L'elenco mostra ogni immagine con la sua dimensione trasferita, ordinata a partire dalla più grande.
Qualsiasi singola immagine superiore a 500 KB merita di essere esaminata, e qualsiasi pagina in cui le immagini superano complessivamente i 2 MB presenta un problema. Passa il mouse sopra un'immagine nel pannello Elementi per vedere le sue dimensioni intrinseche e quelle visualizzate affiancate. Un grande divario tra i due numeri è la definizione stessa di un'immagine non dimensionata correttamente, ed è visibile in pochi secondi.
Ridimensionare una libreria in un unico lotto
Imposta la larghezza target una sola volta e applicala a tutti i file in una cartella, anziché ridimensionare le immagini singolarmente. Una libreria di diverse centinaia di immagini si ridimensiona in pochi minuti quando il lavoro viene eseguito in batch.
Trascina fino a 500 file contemporaneamente, o direttamente un archivio ZIP, e imposta la larghezza, il formato e l'obiettivo di compressione per l'intero set. Tutto viene eseguito all'interno del tuo browser sul tuo processore, quindi i siti dei clienti, le risorse di staging e le gallerie non pubblicate non raggiungono mai un server. Nulla viene caricato online, il che significa che il ridimensionamento di un'intera libreria avviene senza che un singolo file attraversi la rete.