Questa regola viene attivata quando PageSpeed Insights rileva che le immagini sulla pagina possono essere ottimizzate per ridurre le dimensioni dei file senza influire notevolmente sulla qualità visiva.
Panoramica
Le immagini spesso rappresentano la maggior parte dei byte scaricati in una pagina. Di conseguenza, l'ottimizzazione delle immagini può spesso generare alcuni dei maggiori risparmi in termini di byte e miglioramenti delle prestazioni: minore è il numero di byte che il browser deve scaricare, minore è la concorrenza per la larghezza di banda del client e più velocemente il browser può scaricare e visualizzare i contenuti sullo schermo.
Suggerimenti
Per trovare la strategia ottimale per il formato e l'ottimizzazione per gli asset immagine, è necessaria un'analisi approfondita su più dimensioni: tipo di dati da codificare, funzionalità del formato delle immagini, impostazioni di qualità, risoluzione e altro ancora. Inoltre, devi valutare se alcune immagini vengono pubblicate al meglio in formato vettoriale, se gli effetti desiderati possono essere ottenuti tramite CSS e come pubblicare asset con dimensioni adeguate per ciascun tipo di dispositivo.
Ottimizzazioni per tutti i tipi di immagini
- Segui le best practice per la pubblicazione di immagini adattabili
- Segui l'elenco di controllo per l'ottimizzazione delle immagini per le singole immagini
Ottimizzazioni per immagini GIF, PNG e JPEG
I formati GIF, PNG e JPEG rappresentano il 96% dell'intero traffico di immagini su Internet. Data la loro popolarità, PageSpeed Insights fornisce consigli specifici per l'ottimizzazione. Per praticità, puoi scaricare le immagini ottimizzate direttamente da PageSpeed Insights, che utilizza la libreria di ottimizzazione delle immagini disponibile su modpagespeed.com.
Puoi anche utilizzare strumenti come il programma binario di conversione realizzato da ImageMagick che possono applicare ottimizzazioni simili. Consulta le istruzioni di esempio riportate di seguito.
Se utilizzi strumenti di terze parti, tieni presente che la trasformazione potrebbe ingrandire le immagini, se le tue fossero già molto ben ottimizzate. In questo caso, utilizza gli originali.
GIF e PNG sono formati senza perdita di dati, in quanto il processo di compressione non apporta alcuna modifica visiva alle immagini. Per le immagini statiche, il formato PNG raggiunge un rapporto di compressione migliore con una qualità visiva migliore. Per le immagini animate, ti consigliamo di utilizzare l'elemento video anziché una GIF per ottenere una compressione migliore.
- Converti sempre il formato GIF in PNG, a meno che l'originale non sia animato o di dimensioni ridotte (meno di qualche centinaio di byte).
- Sia nel formato GIF che in PNG, rimuovi il canale alfa se tutti i pixel sono opachi.
Ad esempio, puoi utilizzare convert binario per ottimizzare le immagini GIF e PNG con il seguente comando (i parametri tra parentesi sono facoltativi):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG è un formato con perdita di dati. Il processo di compressione rimuove i dettagli visivi dell'immagine, ma il rapporto di compressione può essere 10 volte maggiore rispetto al formato GIF o PNG.
- Riduci la qualità a 85 se era superiore. Con una qualità superiore a 85, l'immagine si ingrandisce rapidamente, mentre il miglioramento visivo è minimo.
- Ridurre il campionamento della crominanza a 4:2:0, poiché il sistema visivo umano è meno sensibile ai colori rispetto alla luminanza.
- Utilizza il formato progressivo per le immagini superiori a 10.000 byte. Il formato JPEG progressivo di solito ha un rapporto di compressione più elevato rispetto al formato JPEG di base per immagini di grandi dimensioni e offre i vantaggi del rendering progressivo.
- Utilizza lo spazio colore in scala di grigi se l'immagine è in bianco e nero.
Ad esempio, puoi utilizzare convert binari per ottimizzare le immagini JPEG con il seguente comando (i parametri tra parentesi sono facoltativi):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
Feedback
Hai trovato utile questa pagina?