Ottimizzare le immagini per il web e le prestazioni

Ottimizza il tuo sito

Se ottimizzi il tuo sito, si carica più in fretta. Dato che a molte persone piacciono i siti veloci, motori di ricerca come Google hanno iniziato a misurare la velocità delle pagine per decidere la posizione del tuo sito nei risultati di ricerca.

Dimensione media di una pagina

Anche se molti web designer si concentrano prima di tutto su HTML e script, la maggior parte del peso di un sito medio è fatta di immagini (Fonte HttpArchive, peso delle pagine, settembre 2018).

Un'ottimizzazione efficace delle immagini può quindi avere effetti incredibili sulla velocità del tuo sito.

Che cos'è l'ottimizzazione delle immagini?

Un'immagine digitale è come una scacchiera, un rettangolo di 8x8 quadrati bianchi e neri. Se salvassi la scacchiera senza compressione, dovresti annotare il colore di ogni quadrato singolarmente (“il quadrato uno è bianco, il due è nero, il tre è bianco, il cinque è nero, ecc.”). Servirebbero 64 righe per descrivere l'intera scacchiera: sarebbe preciso, ma non molto efficiente.

Ottimizzare un'immagine significa trovare modi più efficienti per descriverne i colori. Potresti descrivere l'intera scacchiera in una sola riga di testo: “alterna nero e bianco, comincia con il bianco”, o in modo ancora più efficiente: “ripeti bianco, nero”. Con le immagini digitali si chiama compressione: l'algoritmo cerca di individuare sequenze di colori che si ripetono.

Ci sono diversi algoritmi, ognuno con i suoi punti di forza e le sue debolezze. Alcuni funzionano meglio con le foto (con milioni di colori), altri con immagini con molti meno colori diversi (come una slide di PowerPoint). Scegliere l'algoritmo giusto è il tuo primo aumento di prestazioni.

Formati di immagine comuni

• JPG è un tipo di file immagine molto diffuso, con una compressione efficace per le immagini con tanti colori diversi, come le foto. Questo formato esiste dal 1992 ed è supportato quasi ovunque.
• GIF è un altro vecchio tipo di file immagine, sviluppato nel 1987. È popolare perché supporta le animazioni. Tecnicamente è molto limitato: solo 256 colori diversi per immagine.
• PNG è stato sviluppato nel 1994 per sostituire il GIF, per via delle polemiche sull'algoritmo di compressione del GIF. È popolare perché quasi tutti i dispositivi lo supportano e perché il PNG gestisce milioni di colori, trasparenza compresa. Permette una compressione senza perdita, che garantisce testi e linee nitidi, ed è quindi perfetto per grafici e loghi.

Di recente Google (webP) e Apple (HEIF) hanno introdotto nuovi formati di immagine che offrono una compressione ancora migliore di JPG, GIF e PNG. Ma questi formati non sono ancora molto diffusi.

Scegliere il formato giusto

Il formato migliore per la tua immagine dipende dal suo contenuto reale. Non esiste una regola universale che stabilisca il formato migliore per una data immagine. Il consiglio è di provare da solo e vedere che cosa succede alla dimensione del file se salvi l'immagine in formati diversi. Molti programmi desktop ti permettono di scegliere il formato quando selezioni “Salva con nome”.

Puoi iniziare con JPG per le foto e PNG per le immagini con meno colori, come un logo, una grafica o una slide di PowerPoint. Formati come il JPG offrono diverse impostazioni di qualità della compressione che influiscono sulla qualità dell'immagine e sulla dimensione del file. Un'impostazione di qualità più bassa riduce la qualità dell'immagine a favore di un file più piccolo: prova a trovare il giusto equilibrio tra qualità e dimensione.

Compressione con perdita e senza perdita

Gli algoritmi di compressione che sacrificano qualità in cambio di un file più piccolo si chiamano algoritmi di compressione con perdita (lossy). Gli algoritmi che mantengono la qualità originale dell'immagine si chiamano invece algoritmi di compressione senza perdita (lossless).

Come ottimizzare le immagini

Una volta che hai la tua immagine JPG o PNG, puoi ottimizzarla scegliendo le impostazioni giuste per l'algoritmo di compressione. Non preoccuparti, non devi farlo a mano: puoi usare un software di ottimizzazione automatica per trovare le impostazioni di compressione ideali per una data immagine.

Ottimizzare le immagini JPG

Se usi Photoshop puoi usare la funzione integrata Salva per il Web per ottenere un'immagine JPG ottimizzata in modo ragionevole.

In alternativa puoi usare un'utilità da riga di comando come jpegoptim. Questo strumento riduce i file JPG ottimizzando le tabelle di Huffman interne, migliorando di fatto le prestazioni dell'algoritmo di compressione. In media puoi aspettarti un miglioramento del 10-15% senza perdita di qualità dell'immagine.

Un altro modo di ottimizzare le immagini JPG è usare un ottimizzatore online, come TinyJPG o ImageOptim.

Se usi WordPress, puoi prendere in considerazione un plugin che ottimizzi le immagini al posto tuo, come Imagify di xtremerain.

Ottimizzare le immagini PNG

I file PNG si possono ottimizzare con Photoshop usando la funzione Salva per il Web. Per ottimizzare ancora meglio i tuoi file PNG puoi usare un'app specializzata, come ImageAlpha per Mac o PNGGauntlet per Windows.

Per i file PNG esistono anche ottimizzatori online, come TinyPNG e Compressor.io.

In alternativa puoi usare programmi da riga di comando come optipng, pngcrush o pngquant. Vale la pena approfondire un po' questi strumenti per PNG.

Confronto tra optipng, pngcrush e pngquant

Per il mio lavoro di sviluppatore web integro l'ottimizzazione delle immagini nei sistemi di gestione dei contenuti, così che i miei clienti abbiano le loro immagini ottimizzate in automatico. Con la crescita significativa del numero di clienti ho avuto problemi di prestazioni.

Per guadagnare prestazioni ho deciso di mettere alla prova optipng, pngcrush e pngquant. Speravo di trovare una buona ottimizzazione delle immagini con meno potenza di calcolo del server. Questo avrebbe migliorato le prestazioni per i miei clienti.

PACE-CME

Uno di questi clienti è PACE-CME, un sito con risorse di formazione cardiovascolare per i medici. Questo sito contiene migliaia di slide di PowerPoint salvate come file PNG.

Per testare le prestazioni ho usato un'immagine di prova speciale, più grande e più pesante di una tipica slide di PowerPoint. È un'immagine ad alta risoluzione con contenuti misti, composta in parte da foto, testo e tinte unite.

Metodo

Ho fatto i test su un server Intel XEON quad-core con 8GB di RAM. Per ogni strumento di ottimizzazione PNG ho usato sia le impostazioni più estreme (per vedere che cosa riesce a fare con la dimensione del file), sia quelle predefinite (per vedere quanto sono più veloci le impostazioni predefinite e come si confronta il risultato con le migliori impostazioni di compressione).

Risultati

• immagine di prova originale 2897KB
• optipng estremo (-o7): 2510KB in 2 minuti e 36 secondi / predefinito: 2536KB in 4,9 secondi
• pngcrush estremo (-brute): 2510KB in 1 minuto e 42 secondi / predefinito: 2531KB in 9,2 secondi
• pngquant estremo (-s 1): 744KB in 5,2 secondi / predefinito: 746KB in 4,2 secondi

Le prestazioni di pngquant sono incredibili: è molto più veloce e ottiene anche file molto più piccoli. Non è magia, però: usa un algoritmo di compressione diverso, con perdita. Questo significa che le immagini ottimizzate con pngquant perdono un po' di qualità. Le ho confrontate da vicino e non ho notato la differenza.

Conclusione

Ottimizzare le immagini per il web e per le prestazioni è davvero importante. Come hanno mostrato i miei test, scegliere l'algoritmo giusto può fare tutta la differenza.

Per me ha significato scegliere pngquant, ma la tua decisione può essere diversa a seconda del tipo di immagini che vuoi ottimizzare.

Il punto chiave di questo articolo è quindi: prenditi cura delle immagini. Il tuo sito sarà molto più veloce, e a chi non piace un sito veloce?