Ottimizzare le immagini negli e-Commerce per migliorare la User Experience

In un e-Commerce, alle immagini è affidato il compito essenziale di veicolare la percezione del prodotto che, diversamente da quanto avviene in un negozio fisico, in un sito di vendita online si dà indirettamente in termini informativi e puramente visivi.

Nel successo di un e-Commerce è essenziale curare con molta attenzione la qualità della rappresentazione iconografica di un prodotto, e la prima condizione è disporre di immagini chiare, ben contrastate, e soprattutto in risoluzione ottimale.

Ma una migliore risoluzione delle immagini comporta un aggravio di peso di queste, che ha ricadute significative in termini di caricamento della pagina e quindi di User Experience.

Proviamo quindi ad approfondire alcuni strumenti utili per verificare e ottimizzare il rapporto qualità/peso delle immagini.

GTmetrix

Cominciamo con questo utilissimo tool online, che unisce strumenti di analisi di Google, Yahoo! e Mozilla.

Inserendo l’URL del sito di cui vogliamo procedere all’analisi, GTmetrix restituirà un report che include l’incidenza delle immagini sui tempi di caricamento e suggerimenti per una loro migliore compressione.

Immagini raster

Per comprimere immagini raster si può ricorrere a due metodi: lossy e lossless.

Il sistema lossy permette una maggiore compressione con conseguente perdita di qualità, attraverso un rapporto riduzione peso/perdita di qualità personalizzabile. Il miglior rapporto andrà quindi valutato caso per caso, e il risultato verificato sulla singola immagine a cui viene applicato.

Il sistema lossless, invece, non compromette la qualità originale dell’immagine, quindi può essere applicato anche in modo seriale a più immagini, ma il livello di compressione non permette di raggiungere la stessa riduzione di peso che si ottiene con il sistema lossy.

Immagini vettoriali

Ci riferiamo a web font e immagini in formato SVG che risultano già particolarmente leggere e scalabili senza perdita di risoluzione.

I suggerimenti per migliorarne le prestazioni sono:

• comprimere le immagini vettoriali lato server, ad esempio mediante mod_deflate di Apache.
• ottimizzare i file SVG eliminando eventuali elementi in eccesso, ad esempio tramite verifica in appositi editor, tipo http://petercollingridge.appspot.com/svg-editor.