Dicono che un’immagine valga più di mille parole, il che rende le immagini estremamente importanti nell’ecommerce. Senza la possibilità per il cliente di toccare e ispezionare un prodotto, le immagini diventano il principale mezzo per comprendere il colore, la qualità e la storia del prodotto.
È quindi scontato dire che le tue immagini devono essere ad alta risoluzione e nitide. Tuttavia, ciò ha un costo. Le immagini di grande dimensione e ad alta definizione possono avere dimensioni di file enormi. Mettine alcune sul tuo sito e l’esperienza veloce di navigazione del tuo negozio online potrebbe finire per sembrare più simile a nuotare nel melassa. Non solo ciò causerà l’abbandono dei visitatori, ma col tempo anche Google se ne accorgerà, e ciò può influire sulla tua SEO.
Nell’ecommerce, è fondamentale trovare un buon equilibrio tra la qualità dell’immagine e la dimensione del file dell’immagine quando salvi un’immagine per il tuo sito. In questo post ti mostreremo come fare esattamente questo.
Se sei solito scattare una foto del prodotto e caricarla direttamente nel tuo negozio, questa guida è per te. Se non hai alcuna conoscenza formale o processo per salvare immagini con la dimensione del file in mente, questa guida è per te. Se il tuo sito ha tonnellate di immagini e le cose sembrano lente, questa guida è per te. Se non hai ancora iniziato a costruire il tuo negozio online, questa guida è soprattutto per te.
Pronto a ottimizzare le tue immagini?
Forse potrebbero interessarti anche:
Opzioni di Tipi di File Immagine
Esistono tre principali tipi di file che dovremmo considerare per salvare immagini ottimizzate per il web: GIF, JPG e PNG. Ogni tipo di file ha i propri punti di forza e di debolezza ed è molto importante conoscerli e tenerli a mente quando si salva un’immagine.
Operare con i JPG
I JPG (conosciuti anche come JPEG) sono il tipo di file più diffuso per le immagini sul web. I JPG sono perfetti per fotografie o immagini complesse che contengono molti colori, ombre, sfumature o disegni complessi. I JPG gestiscono bene queste tipologie di immagini perché dispongono di una vasta gamma di colori.
I JPG possono anche essere salvati in alta qualità, bassa qualità o qualsiasi livello intermedio. Questo ti permette di regolare e salvare l’immagine esattamente come desideri, bilanciando la qualità e le dimensioni del file.
Esempio per Imprenditori E-commerce: I JPEG sono il formato di file più popolare online e vengono comunemente utilizzati per le immagini dei prodotti, le fotografie e le immagini/banner eroi della homepage.
Operare con i PNG
I PNG sono un altro formato di file popolare online. In Adobe Photoshop, avrai l’opzione di salvare i PNG come PNG-8 o PNG-24.
- Il PNG-8 ha una gamma di colori molto limitata di 256 colori. Anche se la dimensione dell’immagine è minore, questa non sarà una buona opzione per immagini complesse e fotografie.
- Il PNG-24 fornisce un’immagine di qualità molto superiore, ma a costo di una dimensione del file maggiore.
Il punto più importante è che i PNG possono gestire la trasparenza. Questa è una delle principali differenze tra PNG e JPEG.
Esempio per Imprenditori E-commerce: I PNG vengono solitamente utilizzati per i loghi perché sono di alta qualità e possono gestire la trasparenza. Questo funziona bene per i loghi perché quasi sempre richiedono trasparenza, probabilmente vuoi che sia di alta qualità e perché i loghi sono una piccola parte del tuo sito in generale, quindi la dimensione del file rimane piccola.
Operare con i GIF
I GIF erano più popolari molti anni fa, ma sono ancora un’opzione per piccole dimensioni di immagine dove sono necessari solo pochi colori. Allo stesso modo del PNG-8, i file GIF sono limitati a soli 256 colori. Per questo motivo, i GIF non dovrebbero mai essere utilizzati per le foto dei prodotti.
Esempio per Imprenditori E-commerce: I GIF possono essere utilizzati per i loghi, ma a causa dei loro colori limitati, non sono così popolari per la maggior parte degli usi nell’e-commerce.
Forse potrebbero interessarti anche:
Salvataggio corretto delle immagini
Come ci si potrebbe aspettare, le immagini di grandi dimensioni impiegano più tempo a caricarsi. Quando diciamo grandi, ci riferiamo alla dimensione del file piuttosto che alle dimensioni di un’immagine, cioè il valore in KB, MB, GB ecc. Considerando che il 47% degli utenti si aspetta che una pagina web si carichi in meno di 2 secondi, e il 40% abbandonerà una pagina che impiega più di 3 secondi per caricarsi, è importante che le tue immagini siano abbastanza piccole da garantire un sito veloce.
Ci sono tre cose che puoi fare per ottimizzare correttamente le tue immagini per il tuo negozio online:
Salva le dimensioni corrette
Devi aprire l’immagine in Photoshop e visualizzarla al 100%. Ciò ti consente di vedere l’immagine esattamente nelle dimensioni in cui sarà visualizzata su un monitor di computer quando salvi l’immagine per il web.
Salva le immagini per il web
È possibile ridurre la dimensione del file senza ridurre significativamente la qualità delle tue immagini. Il nostro metodo preferito per ridurre la dimensione del file senza ridurre significativamente la qualità dell’immagine è utilizzare la funzione “Salva per Web” di Photoshop. Apri la tua immagine in Photoshop e vai su File > Esporta > Salva per Web (Legacy)… Apparirà una finestra che ti permetterà di scegliere la qualità della tua esportazione. Abbiamo scoperto che una qualità di 60 è la migliore perché riduce la dimensione del file a meno di un megabyte e non c’è una differenza notevole nella qualità.
Comprimi le immagini per il web
Le applicazioni di compressione delle immagini sono il modo più semplice per ridurre la dimensione del file delle immagini. Questi tipi di strumenti rimuovono i dati nascosti nel file immagine come profili colore aggiuntivi e metadati (come la geolocalizzazione di dove è stata scattata la fotografia) che non sono necessari. Questi strumenti offrono un modo rapido e semplice per ridurre la dimensione dei file senza perdere qualità dell’immagine.
App e servizi di compressione delle immagini
Forse potrebbero interessarti anche:
Salvare un’immagine per il web: Esempio passo per passo
Iniziamo immaginando di essere Stiff Salt (un negozio online vero e proprio gestito da un amico e sviluppatore Shopify) e vogliamo cambiare l’immagine in evidenza sul nostro negozio online.
Allestiamo una scena, rendiamo il nostro sale assolutamente incredibile e scattiamo una foto con una fotocamera DSLR. Ottimo, abbiamo la nostra foto. Che meraviglia!
Ma… la dimensione del file è ENORME! 14,6 MB per l’esattezza. E le dimensioni della foto sono 5184 × 3456 pixel. Questa è completamente inutilizzabile adesso. È letteralmente abbastanza grande da stampare un poster di dimensioni cinematografiche. A 14,6 MB, questa immagine richiederebbe molto tempo per caricarsi sul computer di un visitatore. Questo non va bene.
È ora di mettersi al lavoro e ridurre le dimensioni dell’immagine e la dimensione del file – significativamente.
Ricorda, stiamo per fare tre cose all’immagine.
- Ridurre le dimensioni dell’immagine: Queste sono le dimensioni della fotografia
- Salvare l’immagine in modo appropriato per ridurre la dimensione del file: Questa è la dimensione del file e quanto spazio occupa sul disco rigido del tuo computer e/o sul tuo server web
- Comprimere il file dell’immagine: Per eliminare qualsiasi dato nascosto aggiuntivo che occupa spazio
Ridurre le dimensioni dell’immagine
A seconda del programma che decidi di utilizzare, e della tua preferenza personale, puoi:
- Ridurre le dimensioni dell’immagine prima di salvarla
- Ridurre le dimensioni dell’immagine mentre salvi l’immagine
- Salvare l’immagine, poi ridurre le dimensioni dell’immagine
Per semplificare le cose, riduciamo prima le dimensioni dell’immagine. Per fare questo, apriamo l’immagine in Photoshop (puoi usare qualsiasi programma di immagini con cui ti senti più a tuo agio).
Per capire quale dimensione, abbiamo guardato la dimensione dell’immagine della homepage suggerita dal tema. Era 1600 x 800 pixel (ricorda che l’originale era 5184 × 3456 pixel).
In Photoshop, selezioniamo Immagine > Dimensioni immagine.
Ok, abbiamo ridotto le dimensioni (dimensioni) dell’immagine a qualcosa di più appropriato e consigliato dallo sviluppatore del tema.
Salva l’immagine in modo appropriato (Salva per il Web)
In Photoshop, c’è un comando specifico chiamato “Salva per il Web” che ottimizza il file dell’immagine per la visualizzazione online. Questo è importante poiché il normale comando “Salva” può finire per creare dimensioni di file 2-3 volte più grandi del comando “Salva per il Web”.
Nella casella “Salva per il Web”, dobbiamo fare alcune selezioni.
- Tipo di immagine: Il tipo di file influenzerà la qualità e le dimensioni del file di output
- Qualità dell’immagine: Questo è importante e può influenzare notevolmente la dimensione finale del file
- Dimensioni: Abbiamo già fatto questo nel primo passaggio, quindi non c’è bisogno di farlo di nuovo, ma se non l’abbiamo fatto nel primo passaggio, potremmo semplicemente cambiare le dimensioni dell’immagine qui
Basandoci su ciò che abbiamo appreso all’inizio di questo post, sappiamo che JPEG è il miglior tipo di file per le fotografie o qualsiasi immagine con molti colori e complessità. Selezioneremo JPEG.
Per la qualità dell’immagine, hai una scala che puoi selezionare con 5 preset che vanno da Massimo a Basso. Diamo un’occhiata alla dimensione finale del file di output di ciascuno dei livelli di qualità (queste informazioni sono visualizzate nell’angolo in basso della finestra di salvataggio dell’immagine):
- Massimo: 1.38 MB
- Molto alto: 611 KB
- Alto: 339 KB
- Medio: 152 KB
- Basso: 86k
Puoi vedere che per ogni livello di qualità che abbassi, la dimensione dell’immagine si riduce di quasi la metà. In generale, abbiamo scoperto che Alto è la migliore impostazione per la maggior parte delle immagini. A questo livello, è praticamente impossibile per l’occhio umano vedere qualsiasi degradazione della qualità dell’immagine, e la dimensione del file è quasi 4 volte più piccola di se dovessimo semplicemente selezionare il massimo.
Se l’immagine è un’immagine estremamente importante con molti dettagli, potresti voler selezionare un livello più alto e salvare a Molto Alto.
In sostanza, salvare per il web è un atto di equilibrio – devi bilanciare la qualità della grafica e la dimensione del file del media per soddisfare le tue esigenze personali.
CONSIGLIO PRO: Come regola generale, ci piace che le nostre foto di prodotto siano al massimo 80-150 KB, e per le grandi immagini eroe della homepage siano al massimo di 250-350 KB. Questi sono buoni numeri di riferimento per cui dovresti puntare anche tu.
Comprimere le immagini per il Web
Se hai usato Adobe Photoshop, avrà già fatto un ottimo lavoro nel ridurre le dimensioni dell’immagine, tuttavia, puoi ancora probabilmente ridurre di un altro 5-10% le dimensioni dell’immagine utilizzando un’app di compressione come ImageOptim e/o ShortPixel.
ImageOptim è anche il modo più facile per ridurre rapidamente le dimensioni del file dell’immagine se hai utilizzato un altro programma per salvare le tue immagini che non è buono come Photoshop.
Dopo aver trascinato ciascuno dei file del passaggio precedente in ImageOptim, siamo stati in grado di ridurre ulteriormente le dimensioni dell’immagine di un altro 5%. Non è molto, ma ancora, queste erano già ottimizzate con Photoshop. In ogni caso, ogni KB conta.
Forse potrebbero interessarti anche:
Conclusione
Riassumendo, la nostra foto era enormemente grande quando abbiamo iniziato. Tuttavia, con pochi semplici passaggi, abbiamo ridotto le dimensioni della foto da 5184 × 3456 a 1600 x 800. In questo modo, la foto si adatta perfettamente alla nostra homepage e, allo stesso tempo, l’abbiamo ridotta da un ingombro di 14.4MB, che poteva causare il crash del computer, a un molto più ragionevole 336KB.
Salvare le immagini adeguatamente per il web è un passo importante da apprendere presto e da attuare religiosamente. Anche se risparmi solo il 10-20% su ogni immagine, nel tempo, man mano che il tuo negozio e il tuo sito web crescono, ogni piccolo KB può sommarsi a notevoli risparmi. Questo porterà a un’esperienza molto più piacevole per i tuoi visitatori, clienti e Google.
