Immagini: ottimizzazione e velocità di caricamento delle pagine Web

Uno dei criteri fondamentali da tenere in considerazione nello sviluppo di un sito web è il tempo di caricamento. Diverse ricerche hanno dimostrato come, nel corso degli ultimi anni, la pazienza dell'utente si sia progressivamente ridotta al crescere delle connessioni veloci: oggi il navigatore attende dai 3 ai 6 secondi per approfittare del contenuto ricercato, prima di abbandonare la pagina e rivolgersi alla concorrenza. E' quindi necessario ottimizzare tutti gli elementi della pagina, partendo dai più pesanti: le immagini. Ma quanto si risparmia ottimizzando una fotografia, in termini di caricamento dal server?

A questa domanda non vi è una risposta univoca, poiché moltissimi sono i fattori in gioco: oltre al peso delle immagini, si deve considerare la performance del server a cui si fa affidamento, la sua posizione geografica, la latenza, il traffico massimo supportato e molto altro ancora. Detto questo è possibile comunque trovare una buona approssimazione.

Ottimizzazione: tra peso e qualità

Uno dei dilemmi principali dell'ottimizzazione delle immagini è il trade off tra necessità di compressione e resa qualitativa degli scatti. Si è soliti pensare, infatti, che al crescere della compressione si riduca conseguentemente la qualità della foto. In realtà sono molti i fronti su cui si può intervenire senza andare ad alterare l'effetto visivo che si vorrà raggiungere.

Innanzitutto, le principali fotografie commerciali - si pensi ai servizi stock - sono ricche di metadati che, oltre a non essere immediatamente visibili agli utenti, ne aumentando sensibilmente il peso.

È quindi utile rimuovere le informazioni exif non necessarie, così come altri dettagli non rilevanti: si pensi, ad esempio, alle fotografie con parecchie righe di didascalia incorporata. Successivamente, si può cercare di giocare sul formato: JPG e PNG rappresentano una soluzione di preferenza rispetto a formati non compressi, mentre il nuovo HEIF permette addirittura riduzioni del 50% di peso mantenendo la medesima qualità visiva di partenza.

Ancora, si potrà agire scegliendo sempre la giusta risoluzione per i dispositivi di destinazione, regolando anche i DPI, nonché effettuando ritagli strategici. Se queste operazioni non fossero sufficienti, si potranno effettuare delle prove con i normali photoeditor: aumentare il fattore di compressione di un 10-20% può garantire una peso nettamente inferiore del file, con alterazioni praticamente impercettibili sulla qualità.

Quanto si risparmia?

Di recente, ElegantThemes ha provato a realizzare due siti identici da tre pagine ciascuno, ovviamente ospitati sul medesimo server, uno con fotografie non compresse e l'altro invece con immagini ottimizzate.

Per questa operazione sono stati scelti i formati JPG e PNG e, considerato si tratti di un'installazione WordPress, anche il plugin Smush: quest'ultimo permette di ridurre sensibilmente il peso delle proprie immagini senza grandi compromessi sulla resa visiva.

Ricorrendo ad appositi strumenti per il calcolo delle performance e i tempi di caricamento, come PingDom Tools, è stata quindi misurato il tempo di caricamento. Prendendo come riferimento l'homepage, ovvero la pagina che maggiormente risente della fuga di utenti per estesi tempi d'attesa, la versione non ottimizzata pesa 1.3 mega, contro gli 1 di quella compressa.

Una differenza non enorme, eppure capace di garantire tempistiche interessanti: rispettivamente 2.84 e 2.15 secondi. Sebbene possa sembrare un risultato poco schiacciante, in realtà si deve considerare una lunga lista di fattori. Innanzitutto, quando si hanno a disposizione dai 3 ai 6 secondi massimi, ogni decimo recuperato è certamente essenziale. Ancora, quella usata è una pagina di test, ma di norma le homepage sono ben più caricare: si può ipotizzare, di conseguenza, un recupero anche nell'ordine del secondo.