Ottimizzare foto e immagini per l’e-commerce. Strumenti utili | ExpoitalyOnline

Ottimizzare foto e immagini per l’e-commerce. Strumenti utili

Ottimizzare foto e immagini per l’e-commerce. Strumenti utili

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.

 

Walmart si dedica efficacemente ad ottimizzare le immagini per l'ecommerce

Walmart si dedica efficacemente ad ottimizzare le immagini per l’ecommerce

 

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.

Anche Hot Topic si dedica efficacemente ad ottimizzare le immagini per l'ecommerce: solo 45KB per una immagine abbastanza grande

Anche Hot Topic si dedica efficacemente ad ottimizzare le immagini per l’ecommerce: solo 45KB per una immagine abbastanza grande

 

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.

PopFunk si propone di ottimizzare le immagini per l'ecommerce: ma sono troppo pesanti

PopFunk si propone di ottimizzare le immagini per l’ecommerce: ma sono troppo pesanti

 

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.

Walmart and Hot Topic do a good job of optimizing product images, as shown in this table.  Popfunk is less effective at optimizing images. (Width and height measurements are pixels.)

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.

Strumenti da usare online:

Strumenti scaricabili:

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.

Here the example image is in Photoshop CC 2015.

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.

The new image export feature, which replaced Save for Web, can be opened via the menu or a keyboard shortcut.

Photoshop aprirà una finestra di dialogo con delle opzioni per tipologia di file, in alcuni casi anche per qualità dell’immagine e risoluzione.

The export dialog has relatively few setting, which makes it easy to use.

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).

The exported image was still of good quality and small enough for relatively fast loading.

Script di elaborazione foto

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:

Questo articolo è una traduzione libera dell’originale.

photocredits: freedigitalphotos.

Francesco Salassa

Francesco Salassa

Vivo nel senese con tre gatti ma sono originario della Val Grande (per chi non lo sapesse, è l’area più selvaggia d’Europa). Il magnifico mondo dei freelance mi ha aperto le sue porte nel 2009, quando ho cominciato a collaborare con un giornale locale. Ora, anche volendo, non potrei più uscirne - ma forse è un bene.


Tag assegnati a questo articolo:
ecommerce

Articoli correlati

Creare annunci video che vendono. Le strategie migliori

Internet e soprattutto il mondo mobile premiano chi sa creare annunci video che vendono: il multimediale è uno degli elementi di

Qual’è il migliore social network per gli e-commerce?

Facebook, Twitter, LinkedIn, Pinterest, Yelp e molti altri: ci sono dozzine di piattaforme social su cui la vostra azienda potrebbe

Come pubblicizzare il vostro ecommerce con le recensioni clienti

Le recensioni dei clienti di un ecommerce o di un sito aziendale sono una forza inespressa. Si usano pochissimo e