Le immagini in un e-commerce sono uno degli elementi che può fare davvero la differenza. La gente vuole vedere il prodotto per comprarlo e non solo in categorie merceologiche dove la visualizzazione dell’articolo da comprare è scontato come nel caso dell’abbigliamento, ma anche per prodotti più virtuali come un software.
Ottimizzare foto e immagini per l’e-commerce. Strumenti utili
I responsabili di un e-commerce possono ottimizzare le immagini per vendere di più, ma devono al tempo stesso evitare che questo rallenti le pagine. Prima di parlare di come ottimizzare foto e immagini per l’ecommerce, consideriamo un momento le funzioni dell’immagine. Un’immagine, nell’ecommerce, serve a veicolare l’idea del valore e dell’utilità del prodotto, a ispirare i consumatori a comprarlo, ma deve farlo con una velocità di caricamento sufficientemente elevata. Il problema quindi è creare immagini grandi e attraenti che occupino poco spazio.
Guardiamo ad esempio il caso di Walmart, azienda che è riuscita a combinare questi due aspetti. L’immagine della maglietta “Juniors Wonder Woman” che vediamo sotto ha delle dimensioni di 450 x 450 pixel ma pesa solo 12 KB: un risultato straordinario per un’immagine così grande.
VUOI UN ESPERTO A TUA DISPOSIZIONE PER
SISTEMARE LE TUE FOTO? CONTATTACI
Un altro esempio, sempre della stessa maglietta, è quello presente sul sito Hot Topic, dove vediamo un’immagine grande abbastanza da vendere molto bene il prodotto (443 x 598 pixel) ma sufficientemente piccola (45 KB) da non appesantire il caricamento della pagina.
Giusto per fare un confronto: una maglietta “Wonder Woman” sul sito Popfunk ha dimensioni di 1000 x 1000 pixel e pesa 1.3 MB. Una bella differenza.
Anche se l’immagine di Popfunk non è eccessivamente pesante, vista la qualità della fotografia, dimostra quanto Walmart e Hot Topic riescano a ottimizzare le loro immagini: il primo riesce a ottenere addirittura 16.000 pixel per KB.
Ci sono degli strumenti per ottimizzare foto o immagini per l’ecommerce: strumenti di compressione, di manipolazione delle foto, software come Adobe Photoshop CC 2015 o script in linguaggio PHP, Python o simili.
Strumenti di compressione immagini per ecommerce
Alcuni sono a pagamento, altri gratuiti; alcuni vanno scaricati sul pc, altri si possono usare online. Eccone alcuni.
VUOI UN ESPERTO A TUA DISPOSIZIONE PER
SISTEMARE LE TUE FOTO? CONTATTACI
Strumenti da usare online:
- TinyPNG
- PunyPNG
- JPEG Reducer
- JPEG Optimizer
- Online Image Optimizer
- Shrink Pictures
- Compress Now
- Image Optimizer
- Compress JPEG
- Compressor.io
- Optimizilla
- Compress PNG
- Kraken.io
- Online WebP Converter
Strumenti scaricabili:
- Trimage (Linux, OS X, Windows)
- JPEGmini (Linux server, OS X, Windows)
- Radical Image Optimization Tool (RIOT) (Windows)
- PNG Gauntlet (Windows)
- ImageOptim (OS X)
- PNGOUT (Windows)
- iResize (OS X)
Software di modifica immagine
Adobe Photoshop CC 2015 è l’attuale cavallo di razza per quanto riguarda la manipolazione delle fotografie e la generazione di immagini per web designers. In passato, per ottimizzare foto comprimendole per il web, veniva usato lo strumento “Salva per il web”: è ancora possibile usarlo, ma il nuovo generatore lavora decisamente meglio, preparando le immagini per l’utilizzo sul web e producendo file ancora più leggeri a parità di compressione.
Ecco, come esempio, le immagini di Anthony Delanoix (SnapStock.io). Ipotizziamo che quella sotto sia l’immagine di vendita di una maglietta estiva da donna.
L’immagine originale pesava 2.53 MB, era larga 3.744 pixel e alta 5.616 pixel, 240 pixel per pollice. L’ho rimpicciolita per adattarla alle esigenze di un sito ecommerce, facendola diventare 500 x 750, 72 pixel per pollice.
Per ottimizzarla con Photoshop CC 2015, andate su File > Export > Export As oppure usate le scorciatoie da tastiera ctrl + alt + shift + w su un Windows o cmd + opt + shift + w su un OS X.
Photoshop aprirà una finestra di dialogo con delle opzioni per tipologia di file, in alcuni casi anche per qualità dell’immagine e risoluzione.
Impostando il tipo di immagine su JPEG e la qualità sul 75% ho potuto esportare l’immagine a 31.7 KB (circa 11.829 pixel per KB).
Script di elaborazione foto
VUOI UN ESPERTO A TUA DISPOSIZIONE PER
SISTEMARE LE TUE FOTO? CONTATTACI
Usare uno script è il modo più efficiente ed efficace per ottimizzare foto, rendendo le immagini veloci da scaricare senza intaccarne la qualità. Quasi tutti i linguaggi di programmazione offrono qualche tipo di elaborazione immagini, tipicamente sotto forma di libreria: di solito non sono script o librerie difficili da usare e danno risultati grandiosi, ma richiedono comunque delle conoscenze di web development.
Per esempio, una combinazione particolarmente facile da usare è il Laravel PHP Framework insieme all’Intervention Image library, che lavora con la libreria GD o ImageMagick. Di seguito trovate qualche esempio di libreria di elaborazione immagini utilizzabile con la maggior parte dei linguaggi di programmazione: ognuna di esse offre la documentazione di riferimento.
PHP:
Python:
Ruby:
Node.js:
