Come ottimizzare le immagini del tuo eCommerce per un sito web più veloce del vento

Sapevi che uno degli aspetti che gli utenti apprezzano di più in un negozio online è la velocità di caricamento? Per fare questo, ottimizza le tue immagini!

Non c’è niente di più frustrante che cliccare su un sito e vedere che impiega molto tempo a caricarsi. Infatti, se ci vuole più di un secondo, la cosa più normale è che il cliente vada alla concorrenza).

Come possiamo migliorare la nostra velocità in modo semplice?

Iniziando a ottimizzare le immagini di tutti i nostri e-commerce.

Le fotografie sono uno dei file che “pesano di più” e sono i più difficili da gestire per il server. Ecco perché più le immagini sono leggere… meglio è per la velocità, i clienti e le vendite 😉

Preparati che oggi metteremo una “forbice virtuale” a tutte le tue foto in modo che il tuo e-commerce si carichi alla velocità della luce.

3, 2, 1… Tempo!

Perché è importante ottimizzare le immagini del tuo negozio online

In questo post abbiamo già parlato dell’importanza di fare foto di qualità dei tuoi prodotti. E non dimenticate che molte volte queste immagini sono quelle che fanno comprare o meno una persona.

Ma qui sorge un problema.

Caricare molte foto di qualità sul nostro sito significa saturare il nostro server e rallentare il suo tempo di caricamento. Da qui l’importanza di ottimizzare tutte le foto che carichiamo sul nostro negozio.

Ma vediamo tutti i vantaggi uno per uno:

• Velocità di caricamento: la velocità con cui il tuo e-commerce si carica ha un impatto brutale sull’esperienza dell’utente, e quindi, sulle vendite. Amazon sostiene che per ogni decimo di secondo che si migliora la velocità del proprio sito web, il reddito aumenta dell’1%.
• Posizionamento web: se sei preoccupato per il SEO del tuo e-commerce (e dovresti esserlo), dovresti ottimizzare le immagini perché, come abbiamo visto prima, influenzano direttamente la velocità di caricamento (uno dei criteri che l’algoritmo di Google valuta).
• Ottimizzazione del consumo di risorse: immagini più leggere significano meno spazio occupato sul tuo hosting.
• Più conversione: un utente soddisfatto compra di più, ovvio, no? (ricorda quell’1% di Amazon).

Come puoi vedere, sono molti i vantaggi di prendersi cura delle immagini. Ora dobbiamo solo vedere come farlo.

Come ottimizzare un’immagine in Photoshop prima di caricarla sul tuo negozio online

Il primo passo per ottimizzare un’immagine è quello di regolarla alla sua dimensione ideale. Non preoccuparti, il processo è molto semplice.

1. Misure

La prima cosa da fare è conoscere le misure esatte del tuo modello. All’interno di WooCommerce, vai a “Impostazioni/Prodotti/Display”.

Lì vedrai le dimensioni predefinite delle immagini. Se l’immagine del prodotto è di 600×600 pixel, caricare un’immagine più grande non farà altro che occupare spazio inutile e rallentare il sito web.

2. Qual è il “peso ideale”?

L’obiettivo è trovare l’equilibrio tra una foto di qualità e un peso ragionevole. Meno di 70 KB è l’ideale, ma se questo non è possibile, allora non più di 100 KB sono sufficienti.

3. Il formato giusto

Per le immagini con trasparenze o screenshot usa il formato PNG; per tutte le altre immagini usa JPG.

4. Ritaglio e ridimensionamento in Photoshop

Per spiegare il processo in modo più semplice, ti lasciamo un video dove vedrai come fare le regolazioni di base in Photoshop. Per esempio, il ridimensionamento dell’immagine e il “salva per il web”.

Come alternativa a Photoshop puoi usare lo strumento onlinePixlr (è una versione ridotta di Photoshop). Un’altra opzione è Gimp, un programma di fotoritocco open source.

E se sei un utente Mac… il tuo strumento è ImageOptim, un’applicazione nativa di MacOS se non vuoi lottare con un editor di foto.

 5. Ridimensionare le immagini direttamente in WordPress

Se hai caricato un’immagine troppo grande, puoi ridimensionarla in WordPress.

Sotto “Media/Libreria”, clicca sull’immagine e clicca su modifica. Qui puoi ridimensionare o ritagliare al rapporto di aspetto che preferisci (noi raccomandiamo il quadrato).

È facile e veloce, ma ha un inconveniente; quello che fa WordPress è creare una nuova immagine con le dimensioni che gli hai detto. Questo significa che avrai un’immagine pesante e una copia più leggera.

Se non cancelli la prima immagine, la velocità di caricamento non migliorerà.

Come ottimizzare ulteriormente le immagini senza perdere qualità

Ci sono molte pagine per ridurre le dimensioni delle foto senza perdere qualità. Eccone alcuni:

1. Webresizer

Non solo permette di ridimensionare le immagini online, ma anche di fare alcune edizioni di base di colore, luce, ecc.

All’interno delle stesse misure, si vanta di ridurre il peso del 68%.

2. TinyPNG

Uno dei programmi gratuiti più popolari per comprimere le immagini. Permette di ottimizzare diverse immagini in una volta, 20 in totale fino a 5 Mb ciascuna.

Funziona minimizzando il numero di colori necessari per rendere il cambiamento impercettibile all’occhio umano. Se devi lavorare con molte immagini alla volta, questo è il tuo strumento.

3. Compressor.io

Anche se non permette un’ottimizzazione massiccia, il suo limite è di 10 MB per foto. Un’altra caratteristica utile è che permette di salvare il file ottimizzato direttamente su Google Drive.

Questi strumenti online sono molto utili e veloci, ma se hai una conoscenza minima di fotoritocco, il risultato di farlo manualmente è più completo.

Plugin per ottimizzare le immagini in WordPress e migliorare la velocità di caricamento

Questi sono i plugin che ci piacciono di più per ottimizzare le immagini in un e-commerce e altri per migliorare la velocità.

1. WPSmush

Plugin 100% gratuito per comprimere e ridimensionare tutte le immagini del tuo sito web.

È facile da usare e permette di lavorare su tutte le immagini di WordPress, come qualsiasi tema o plugin.

2. EWWW Image Optimizer

Un altro plugin gratuito. Permette di ottimizzare tutte le immagini in una volta sola e distingue l’ottimizzazione per formato: JPG o PNG.

3. Lazy Load

Con Lazy load le immagini non vengono caricate finché non appaiono sullo schermo.

Immagina di avere una pagina o un post con una foto molto pesante alla fine. Con questo plugin si caricherà solo se l’utente ci arriva (quindi la pagina si caricherà più velocemente).

4. Imsanity

La differenza principale tra questo plugin e i precedenti è che è specializzato nell’ottimizzazione di massa.

5. Plugins di cache

Due dei plugin gratuiti più popolari sono:

• W3 Total Cache.
• WP Super Cache.

A pagamento, ma forse il più consigliato, c’è WP Rocket.

Plugin per ottimizzare le immagini in Prestashop

Uno dei vantaggi di Prestashop è che puoi attivare direttamente la cache. Da “Parametri avanzati/prestazioni” avrai accesso alla configurazione di Smarty per comprimere, compilare e cache senza bisogno di moduli extra.

Oltre a questo, con questi plugin otterrai una velocità extra:

1. Resmush

Permette immagini fino a 5 Mb in JPG, PNG e GIF e in un paio di clic avrai tutte le immagini del tuo negozio ottimizzate.

Se ti piace questo strumento ma usi WordPress, c’è anche un plugin para este CMS.

2. PrestaSpeed

Se vuoi investire in uno strumento più completo, PrestaSpeed è disponibile per meno di 50€.

Oltre all’ottimizzazione delle immagini, accelera la velocità di caricamento pulendo il database dalle informazioni che non sono più utili. Per esempio, vecchi ordini o carrelli abbandonati.

Inoltre, con questo modulo (dopo l’ottimizzazione), è possibile accedere all’immagine precedente o includere uno scroll infinito per mostrare solo ciò che è necessario.

Come ottimizzare le immagini in WordPress per il SEO

Quando si parla di ottimizzazione delle immagini, si può anche dare un approccio SEO. Puoi modificare le tue foto in modo che ti diano anche una spinta nel SEO.

1. Dai un nome alle tue foto descrivendole: un file chiamato IMG_1234 non dà a Google alcun indizio sul contenuto dell’immagine.
2. Usa il tag “alt”: questo tag si trova nelle opzioni dell’immagine e appare come “testo alternativo”. Non mettere sempre la stessa parola chiave, tieni presente che questi testi aiutano le persone che usano assistenti di lettura.

Solo con queste 2 azioni, otterrai che le tue schede prodotto (o categoria)guadagnino posizioni nel motore di ricerca.

Vuoi sapere se le immagini del tuo e-commerce sono sufficientemente ottimizzate?

Per scoprirlo, useremo uno strumento gratuito che Google stesso offre, PageSpeed.

Devi solo inserire l’url e otterrai una nota della velocità del web.

Ma non ci fermeremo qui. Se guardi un po’ di più, c’è una sezione “Possibili ottimizzazioni”. Se vedi “Ottimizza immagini” lì, allora hai del lavoro da fare. 😉

Un altro strumento che può essere molto utile è il Speed Test de Pingdom.

Una volta applicati i consigli di questo articolo, misurate la velocità di caricamento e confrontatela con quella ottenuta prima delle ottimizzazioni.

Inizia a ottimizzare le immagini del tuo negozio online ora!

In questo articolo, hai tutto il necessario per iniziare a ridurre e ottimizzare le tue immagini in modo che il tuo negozio online si carichi il più velocemente possibile.

Ora tutto quello che devi fare è iniziare.

Non ne hai proprio voglia?

Sicuramente ricordare quell’1% di entrate in più che guadagna Amazon per ogni decimo di secondo risparmiato ti motiva ad iniziare.

Forza e coraggio! Occupati di quelle immagini!