Siti Web ricchi di immagini: consigli per l'ottimizzazione

Nonostante le tendenze del momento impongano siti web sempre più minimali, per un trend ormai consolidato, è innegabile come da qualche anno il ricorso alle immagini sia fortemente cresciuto su tutto il Web. Si tratti di semplici portfolio, di magazine, di portali di e-Commerce e molto altro ancora, capita spesso di dover amministrare un gran numero di fotografie. Per quanto possano rendere l'aspetto del sito più gradevole, però, vi è un importante effetto collaterale: aumentando il peso del sito, ne rallentano anche il caricamento. Un fatto da tenere in debito conto considerando come, da una recente indagine KissMetrics, a ogni secondo aggiuntivo nel tempo di caricamento si ha una perdita del 7% del tasso di conversione. Quali sono, di conseguenza, i consigli per ottimizzare il ricorso alle immagini?

Naturalmente, non vi è una ricetta che possa funzionare per qualsiasi tipo di progettazione, poiché molto dipende dal design del proprio sito e dagli scopi che si desidera raggiungere. Tuttavia, vi sono delle pratiche da prendere certamente in considerazione.

Prima del caricamento

L'ottimizzazione parte prima dello stesso caricamento delle immagini sul server, affinché si possa limitare il peso delle stesse e contenere i tempi d'attesa per l'utente. Innanzitutto, è necessario scegliere formati compressi - JPG e PNG fra i tanti - affinché la dimensione del file non risulti eccessiva.

Ancora, è bene lavorare sulla qualità di questa compressione, scegliendo una via di mezzo che garantisca un aspetto privo di disturbi ma un peso leggero, nonché gestire tutte le informazioni meta dei file per eliminare quelle in eccesso.

Fatto molto importante, come facile intuire, è ritagliare o ridimensionare le immagini esattamente alla dimensione in pixel necessaria: una pratica molto diffusa, ma poco efficace, è quella di caricare le immagini ad altissima risoluzione sul server, per poi rimpicciolirle tramite codice. Questa misura, in realtà, non fa altro che mostrare il file originale in un riquadro più piccolo, ma il peso totale rimarrà invariato.

Sfruttare i CSS

Il secondo passo per ridurre i tempi di caricamento è lavorare in modo sapiente sui CSS, ovvero i fogli di stile, del proprio sito. Una delle soluzioni più note è quella delle sprites, ovvero delle collezioni di immagini raggruppate in un unico file.

Così come riporta WebDesignerDepot, un esempio perfetto proviene dal Guardian, nella sua pagina dedicata gli ultimi Mondiali di Calcio: anziché caricare un'immagine per ogni singolo giocatore di ogni squadra, il sito ha optato per un unico collage, le cui porzioni vengono poi mostrate agli utenti tramite lo stesso foglio di stile.

Questo riduce tantissimo i tempi di caricamento e, basandosi su un unico file, fa apparire tutte le porzioni dello sprite nello stesso istante.

Lazy Loading

Una tecnica abbastanza recente, e sempre più utilizzata, è quella del lazy loading, letteralmente del "caricamento pigro". Tramite appositi script, si può fare in modo che vengano caricate unicamente le immagini presenti nella porzione visibile della finestra del browser attiva, posticipando l'apparizione delle successive solo quando l'utente effettua lo scrolling.

Scegliendo questa opzione, non solo si ridurrà il monte di traffico dati per l'utente dall'apertura del sito, ma i tempi saranno notevolmente ridotti, poiché verrà richiesto al server di caricare unicamente i file davvero necessari.

Prima lo scheletro

Una tecnica, anch'essa relativamente recente, si basa invece sul tempo d'attesa percepito dall'utente, pur non cambiando quello effettivo del sito. Di norma, il navigatore è portato ad abbandonare un portale non appena vede apparire rotelle o girandole di loading, barre di caricamento e molto altro. L'attenzione dell'utente, infatti, deve essere catturata entro sei secondi.

Grazie a vari script, è possibile definire un'ordine di caricamento, facendo in modo che lo scheletro del sito - box, sezioni e via dicendo - appaia immediatamente, mentre le immagini giungono dopo pochissimi secondi. Così facendo, l'attenzione dell'utente verrà mantenuta elevata, poiché può materialmente testimoniare il caricamento stesso del sito.

Gallerie

In caso il proprio progetto includa molte gallerie, anche di notevoli dimensioni, il consiglio è quello più classico: fare ricorso alle thumbnail. Pensare di poter caricare tutte le immagini nella griglia a piena risoluzione è un vero suicidio, poiché ciò porterà a un evidente rallentamento delle performance. Preferendo le miniature, invece, la velocità della pagina verrà preservata.