Perché è importante ottimizzare le immagini?
Ormai è chiaro: una delle principali conseguenze di un e-commerce che non si carica a una velocità adeguata a causa della risoluzione e delle dimensioni delle tue immagini è che i visitatori abbandonano la pagina. Come abbiamo detto più di una volta, gli utenti non sono disposti ad aspettare sapendo che ci sono altri siti in grado di offrire gli stessi contenuti più velocemente. Un sito lento a caricarsi è sinonimo di una frequenza di rimbalzo molto alta. Inoltre, le reti 3G e 4G di uno smartphone non si avvicinano nemmeno lontanamente alla velocità della banda larga di casa. Considerando questo e il fatto che sempre più utenti navigano da dispositivi mobili, è fondamentale non trascurare la velocità di caricamento delle immagini del tuo negozio. Ma non finisce qui. Anche il gigante di Internet tiene molto in considerazione la velocità di caricamento di un sito ai fini del posizionamento SEO. Come puoi immaginare, Google ha a disposizione un tempo limitato per scansionare il tuo sito. Questo significa che più il tuo negozio è veloce ad aprirsi, più pagine del tuo e-commerce Google potrà scansionare e, di conseguenza, maggiori saranno le possibilità di comparire tra i primi risultati del suo motore di ricerca. Ma partiamo dall'inizio…Che qualità devono avere le immagini?
Come ti stiamo raccontando, le immagini sono un elemento fondamentale per qualsiasi negozio online. Per questo vogliamo che tu conosca anche i parametri da tenere presenti quando si tratta di scegliere e ottimizzare le immagini del tuo sito.Risoluzione
Innanzitutto bisogna capire che salvare un'immagine da pubblicare su Internet non è come salvarla per la stampa. Sono due modi di visualizzare un'immagine su supporti molto diversi: uno schermo e la carta. Per questo la cosa più importante è verificare con un programma di fotoritocco (come Photoshop, Illustrator o GIMP) che la risoluzione sia di 72 ppi (pixel per pollice). Più alto è questo valore, maggiore è la qualità. Per mostrarla su un sito web, 72 ppi sono più che sufficienti, mentre per stamparla, per esempio su un manifesto, ne servirebbero circa 300.Formato
Di sicuro, al momento di salvare un'immagine, ti saranno comparsi diversi formati e ti sarà sorta qualche domanda: pesa di più il PNG o il JPG? Per questo è importante sapere a cosa serve ciascun formato, perché alcuni possono essere più utili per ottimizzare le immagini. Dietro ognuno c'è un mondo, ma non preoccuparti: ti diamo le informazioni essenziali per capire quando usare l'uno o l'altro:- JPG: È il formato universale per le fotografie, perché è quello che le comprime meglio senza alterarne i toni né i colori originali. È quindi perfetto per immagini ricche di dettagli. Inoltre puoi regolare la qualità da 0 a 100. Per esempio, se salvi con qualità 80 noterai a malapena la differenza di nitidezza, ma vedrai eccome quella di peso: l'immagine occuperà circa il 30% in meno.
- PNG: Permette di conservare le trasparenze, e per questo è il formato migliore per le immagini di brand, come loghi o grafiche a tinte piatte. Il suo grande vantaggio è che perde poca qualità durante la compressione. Ma c'è differenza tra PNG 8 e PNG 24? La differenza tra i due formati è che il PNG 8 memorizza al massimo 256 colori, mentre il 24 arriva a 16 milioni di colori. Ti consigliamo di usare il PNG 8 solo per immagini che non richiedono trasparenze e hanno pochi colori.
- GIF: Usa questo formato solo quando le tue immagini contengono un'animazione. Tieni presente che non si comprime con una buona qualità, perché le animazioni includono diversi fotogrammi, cioè contengono più di un'immagine.
- WEBP: questo formato, sviluppato da Google qualche anno fa, offre immagini di alta qualità ma più leggere rispetto ad altri formati come PNG o JPG. Per questo, dato che ottimizza enormemente il peso delle immagini senza sacrificarne la qualità, è un formato ideale per i siti web.
Dimensioni
Di solito si tende a salvare l'immagine nelle dimensioni predefinite, o addirittura in grande, pensando che così si vedrà meglio sul sito. Ma avrai notato che la qualità e nitidezza delle tue immagini dipendono soprattutto dalla risoluzione e dal formato con cui le esporti. Quindi lascia perdere l'idea di salvare le immagini in grande: aumenterebbero di peso in modo considerevole e del tutto inutile, se poi sulla pagina vengono mostrate molto più piccole. Per questo ti consigliamo di esportare tutte le immagini nella dimensione reale in cui verranno mostrate sul sito, cioè con le dimensioni che usi nel tuo PrestaShop. Se un'immagine deve occupare uno spazio di 50 px x 70 px, ridimensionala a quella misura. Così ridurrai notevolmente il peso delle tue foto senza perdere qualità né ottenere immagini sgranate. Che senso ha avere un'immagine più grande se i tuoi utenti la vedranno ridotta?Che dimensioni usare per le foto dei prodotti?
In Aspetto > Impostazioni immagini del tuo PrestaShop puoi filtrare per prodotti e vedere le dimensioni di tutte le immagini prodotto del tuo negozio.
Così, per esempio, se l'immagine prodotto più grande che hai è di 1000 px x 1000 px, per quel tipo dovrai usare immagini con quelle stesse dimensioni. Se in quel caso usi un'immagine più piccola, risulterà sgranata. In altre parole, dovrai adattare ogni immagine al formato o alle dimensioni che hai impostato. Per quanto riguarda il peso di queste immagini, è consigliabile che non superino i 100 KB, altrimenti rallenteranno il caricamento del tuo e-commerce.
Strumenti per ottimizzare le immagini
Ecco una serie di buone pratiche e strumenti che renderanno il tuo negozio online molto più veloce. Se il tuo negozio è già online, la prima cosa da fare è controllare la velocità di caricamento. Ti consigliamo di analizzarla con PageSpeed. È semplicissimo: basta inserire il tuo URL, cliccare su «Analizza» e compariranno i risultati, suddivisi in diagnostica e opportunità. Inoltre, cliccando sulle frecce a destra vedrai come correggere questi errori.
Ora non resta che ridurre il peso di quelle immagini e sostituirle, quindi salvale sul tuo computer. Una volta salvate tutte, usa uno strumento per comprimere le immagini. Noi ti mostriamo Compresspng e Compressjpg, ma puoi usarne uno qualsiasi, perché funzionano in modo molto simile e sono piuttosto intuitivi. Per prima cosa, carica le immagini su Compresspng o Compressjpg a seconda del formato, cliccando su Upload Files. In base al numero e al peso delle immagini, la compressione richiederà più o meno tempo. Al termine, scaricale da Download ZIP. Ecco le tue immagini compresse! Ora non devi far altro che ricaricarle sul tuo sito.
E se invece vuoi caricare nuove immagini sul sito, basta esportarle nel formato giusto e con una risoluzione di 72 ppi da un programma di fotoritocco. In Photoshop e GIMP devi salvarle con Salva per web. Si aprirà una finestra in cui potrai scegliere il formato: scegli quello più adatto in base a quanto ti abbiamo spiegato prima. Puoi anche controllare e modificare la risoluzione in Immagine > Dimensione immagine.
In sintesi:
Modulo PrestaShop per ottimizzare le immagini
Come abbiamo detto all'inizio dell'articolo, migliorare la velocità di caricamento non è un vantaggio solo per l'utente che naviga con calma nel nostro negozio PrestaShop. Google, sempre affamato di siti di qualità, dà così tanta importanza al tempo di apertura di un e-commerce che, se si carica a una velocità accettabile, lo farà comparire nelle prime posizioni. E cosa significa? Che se hai un negozio online fantastico, ma ce l'ha anche il tuo concorrente e in più si carica più velocemente, Google posizionerà il suo davanti al tuo nei risultati di ricerca. Sai già che offrire comodità, trasparenza e sicurezza è la base di qualsiasi negozio digitale. Lo sai, certo, e comprendiamo anche le difficoltà che comporta. Per questo, con l'obiettivo di presentarti tutte le alternative per migliorare la velocità di caricamento, ti proponiamo la più comoda ed efficace. Il Modulo PrestaShop per ottimizzare le immagini firmato Línea Gráfica è l'aiuto che ti serve per trasformare il tuo negozio PrestaShop in un vero peso piuma. Questo modulo riduce il peso delle immagini del tuo sito senza perdita di qualità, grazie a un sistema intuitivo e facilissimo da usare:- Scegli la percentuale di riduzione che desideri per i file JPG e JPEG.
- Seleziona il livello di riduzione da applicare ai file PNG.
- Seleziona le immagini del negozio che non vuoi comprimere. Un logo, per esempio.
Scopri il modulo per comprimere le immagini!
Se cercavi una spinta rapida per migliorare la velocità e il posizionamento del tuo sito, l'hai trovata. Verificare i risultati in tempi record e offrire un'esperienza migliore non è mai stato così semplice! E se dopo tutto questo non sai ancora come migliorare la velocità di caricamento in PrestaShop, niente paura: abbiamo preparato la guida definitiva passo dopo passo!E tu, usi altri strumenti per ottimizzare le tue immagini? In Línea Gráfica siamo esperti di marketing digitale e Partner Platinum PrestaShop: se hai bisogno di una mano per posizionare il tuo negozio, non devi far altro che contattarci.