Ottimizzare immagini: 8 consigli per il tuo sito web (2024)

Le tecniche di ottimizzazione immagini più avanzate per evitare che il sito web sia lento e per aumentare il traffico organico del tuo negozio online.

In un mondo in cui i clienti si aspettano risultati immediati, un sito ecommerce che si carica rapidamente è fondamentale. In questo contesto, le immagini giuste possono aiutare a migliorare i tempi di caricamento e le conversioni.

Sebbene la qualità delle immagini sia importante per garantire tassi di conversione elevati, l'ottimizzazione è essenziale per migliorare l’esperienza utente e la strategia SEO del tuo negozio online. Se impari a ottimizzare le immagini, puoi ottenere vantaggi notevoli. Ad esempio, migliori il tuo branding e puoi attirare gli acquirenti che navigano tra le immagini di Google.

Che cos'è l'ottimizzazione delle immagini?

L'ottimizzazione delle immagini garantisce che le tue immagini siano visualizzate in modo perfetto su desktop e dispositivi mobile e che non ostacolino le prestazioni del sito web. Comporta la modifica del formato, delle dimensioni e della risoluzione dell'immagine per un determinato dispositivo, senza però compromettere la qualità.

Ci sono tre elementi principali che giocano un ruolo cruciale:

1. Il formato del file immagine
2. Le dimensioni dell'immagine (altezza e larghezza)
3. La risoluzione dello schermo

Perché ottimizzare le immagini?

Le immagini sono fondamentali per una buona esperienza di acquisto online. I clienti non acquisteranno i tuoi prodotti senza vederli, e i dati rivelano che, in media, le immagini non ottimizzate rappresentano poco meno del 38% del peso totale di una pagina web su dispositivo mobile.

L'ottimizzazione delle immagini aiuta a ridurre il peso della tua pagina ed è un principio alla base di un buon design web per un sito ecommerce, con i seguenti vantaggi:

Equilibrio tra velocità e qualità

L'ottimizzazione delle immagini per il web e i dispositivi mobili serve a bilanciare velocità e qualità. Nell’ecommerce, è importante presentare immagini che vengono visualizzate in modo ottimale, in quanto danno vita a una migliore esperienza di navigazione per gli acquirenti.

Google rivela che la velocità del sito è uno dei segnali usati dal suo algoritmo come fattore di ranking per le pagine. Una pagina lenta significa che i motori di ricerca scansionano meno pagine con il loro budget per il crawling, il che può influire negativamente sul tuo posizionamento.

Miglioramento delle prestazioni nelle ricerche

Le immagini ottimizzate aiutano sia i lettori che i motori di ricerca a comprendere meglio il tuo sito web e a far vedere i tuoi contenuti online. Dei dati recenti mostrano che il 18% delle query di ricerca su Google restituisce delle immagini.

L'ottimizzazione delle immagini può contribuire al loro posizionamento in alto nei risultati di ricerca immagini di Google, contribuendo ad aumentare il traffico del tuo sito web e aiutandoti a creare il tuo brand.

Come ottimizzare le immagini per il web

1. Usa nomi concisi e diretti per i file immagine

È molto facile caricare immagini sul tuo sito web e mantenere i nomi dei file predefiniti assegnati dalla tua fotocamera. Ma quando si tratta di SEO delle immagini, è importante usare parole chiave pertinenti e rilevanti per aiutare la tua pagina web a posizionarsi in alto nei risultati di ricerca.

Creare nomi di file descrittivi e ricchi di parole chiave è fondamentale per l'ottimizzazione delle immagini. I motori di ricerca non esaminano solo il testo sulla tua pagina web, ma anche i nomi dei file delle tue immagini.

Prendiamo, ad esempio, questa immagine:

Potresti usare il nome generico che la tua fotocamera ha assegnato all'immagine (ad es., DCMIMAGE10.jpg). Tuttavia, sarebbe molto meglio nominare il file “Ford-Mustang-LX-Rossa-2012.jpg”.

Pensa al modo in cui i tuoi clienti cercano i prodotti sul tuo sito web. Quali schemi di denominazione usano quando fanno le loro ricerche? Nell'esempio qui sopra, chi cerca un’auto potrebbe usare termini come:

• Ford Mustang LX rossa 2012
• 2012 Ford Mustang LX rossa
• Ford Mustang LX 2012 rossa

Guarda i dati di analisi del tuo sito web per vedere quali parole chiave usano i tuoi clienti per trovarti. Determina quali sono i modelli più comuni per le loro ricerche e applica questa formula al tuo processo di denominazione dei file immagine.

Se non vuoi analizzare i dati in modo così approfondito, usa comunque delle parole chiave pertinenti e utili quando nomini le tue immagini (cioè, cerca di usare nomi descrittivi).

Dare un nome strategico ai file delle immagini sul tuo sito può sicuramente migliorare la tua SEO on page e aiutare le tue pagine e immagini a posizionarsi più in alto tra i risultati dei motori di ricerca (SERP).

2. Ottimizza attentamente i tuoi attributi alt

L’attributo alt è il testo alternativo fornito al posto delle immagini quando un browser non riesce a farle visualizzare correttamente e vengono anche usate per l'accessibilità web. Comunque, anche quando l'immagine viene visualizzata correttamente, se ci passi sopra con il mouse, puoi leggere il testo dell'attributo alt (a seconda delle impostazioni del tuo browser).

Il testo alternativo aggiunge anche valore al tuo sito web dal punto di vista della SEO. Aggiungere alle immagini sul tuo sito web degli attributi alt appropriati che includano parole chiave pertinenti può aiutarti a posizionarti meglio nei risultati di ricerca. Anzi, è possibile che gli attributi alt siano il modo migliore per far apparire i tuoi prodotti di ecommerce tra i risultati di ricerca web e immagini di Google.

La priorità numero uno quando si tratta di ottimizzare le immagini è scrivere l'attributo alt per ogni immagine di prodotto sul tuo sito.

Ecco alcune semplici regole per i testi alternativi:

• Descrivi le tue immagini in un linguaggio semplice, proprio come hai fatto per i nomi dei file immagine.
• Se vendi prodotti con numeri di modello o numeri di serie, includili nei tuoi attributi alt.
• Non riempire i tuoi attributi alt di parole chiave (ad esempio, alt="compra ora auto ford mustang muscle in saldo a buon prezzo").
• Non usare attributi alt per le immagini a scopo decorativo. I motori di ricerca potrebbero penalizzarti per un tentativo di ottimizzazione eccessiva.

Infine, fai un controllo, di tanto in tanto. Visualizza il codice sorgente delle tue pagine web e controlla se i tuoi attributi alt sono presenti e ancora pertinenti. Ti sorprenderà renderti conto di cosa può sfuggirti quando ti muovi a una velocità imprenditoriale.

3. Scegli bene le dimensioni delle immagini e le angolazioni dei prodotti

È pratica comune mostrare più angolazioni di ogni prodotto. Tornando all'esempio della Ford Mustang, non dovresti mostrare solo una parte dell'auto, soprattutto se stessi cercando di venderla. Sarebbe nel tuo interesse fornire scatti di varie parti:

• L'interno
• Il retro (soprattutto l’alettone)
• Le ruote
• Il motore (dopotutto, è una Mustang)

Il modo migliore per capitalizzare queste foto aggiuntive è compilare i tuoi attributi alt, creandone di unici per ogni scatto del prodotto:

• Ford-Mustang-LX-Rossa-2012-Interno-in-Pelle.jpg -> usando l'attributo alt="Ford Mustang LX rossa 2012 interno in pelle"
• Ford-Mustang-LX-Rossa-2012-Vista-Retro-Alettone.jpg -> usando l'attributo alt di: alt="Ford Mustang LX rossa 2012 vista retro con alettone"

La chiave qui è aggiungere al tuo attributo alt delle descrizioni di base affinché i potenziali acquirenti arrivino sul tuo sito web. Se fai questo lavoro extra, Google ti ricompenserà con più visitatori.

4. Ridimensiona le tue immagini

Per assicurarti che vengano visualizzate bene su tutti i dispositivi, specialmente su quelli mobili e con schermi ad alta risoluzione, devi gestire sapientemente le immagini sul tuo sito web.

Per i display ad alta densità di pixel, che in un dato spazio fisico racchiudono più pixel rispetto a quelli tradizionali, hai bisogno di un'immagine dalle dimensioni almeno doppie perché appaia nitida. Per fare un esempio in contesto, se il tuo sito web ha uno slot per le immagini di 200 pixel x 200 pixel, per mantenere la nitidezza su un display ad alta risoluzione hai bisogno di un'immagine di 400 pixel x 400 pixel. Adesso quasi tutti i telefoni cellulari hanno risoluzioni dello schermo raddoppiate o superiori.

Il modo più semplice per ottenere i risultati desiderati è usare una rete di distribuzione dei contenuti, o CDN. Una CDN alleggerisce il lavoro di ridimensionamento delle immagini e propone il miglior formato immagine per il dispositivo dell'utente. Migliora anche la velocità di caricamento del file stesso, perché ha posizioni del server più vicine all'utente finale.

💡Nota: se sei un commerciante Shopify, il tuo tema Shopify usa la nostra CDN per le immagini.

5. Scegli il formato immagine giusto

Il formato dell'immagine è uno degli aspetti più importanti da scegliere correttamente per il tuo sito web. Alcuni formati di file sono di qualità superiore rispetto ad altri, e alcuni occupano più spazio di altri, il che influisce sul tempo di caricamento del tuo sito.

Per cominciare, ci sono due principali tipi di formati immagine: raster e vettoriali.

Le immagini vettoriali si basano su formule matematiche. Quando hai bisogno di elementi grafici scalabili in diverse dimensioni senza che se ne comprometta la qualità, opta per elementi vettoriali. Il formato di immagine vettoriale più comune è il file Scalable Vector Graphics (SVG). È una scelta ideale per loghi, icone e altri elementi grafici semplici per cui hai bisogno di chiarezza e nitidezza, indipendentemente dalle dimensioni.

Le immagini raster sono composte da pixel che possono dare vita a immagini altamente dettagliate, come nel caso delle fotografie. Più pixel contiene un'immagine, maggiore sarà la sua risoluzione.

Nel tempo, sono stati scritti codec più aggiornati e ottimizzati per le immagini raster. Ad esempio, il GIF era una versione iniziale di un codec immagine per il web, ma la qualità era scarsa perché la tecnica di compressione mediava i pixel vicini. Le tecniche più recenti cercano di codificare e comprimere in modi più difficili da rilevare per l'occhio umano. Questo significa che possiamo offrire immagini di qualità superiore con dimensioni di file più piccole quando optiamo per formati immagine più recenti. Quelli più comunemente usati oggi sul web sono i seguenti:

• JPG: un formato di immagine ampiamente usato per le foto. Usa la compressione lossy per ridurre le dimensioni del file, ma sacrifica una parte della qualità.
• PNG: un formato popolare tra i web designer, perché adatto agli elementi grafici con sfondi trasparenti. Quando compresso, questo tipo di file mantiene tutti i suoi dati originali, il che lo rende ottimo per gli elementi grafici su un sito web.
• WEBP: un formato moderno creato per il web. Supporta sia la compressione lossy che quella lossless, offrendo dimensioni di file più piccole rispetto ai formati JPG e PNG e mantenendo una qualità simile o migliore.
• AVIF: il formato immagine più recente, che comprime bene le immagini con una minor perdita di qualità.

Non tutti i browser supportano tutte le versioni, ed è qui che una CDN per immagini può tornare utile, perché può selezionare automaticamente il miglior formato per un particolare browser e convertire la tua immagine originale. Se non usi una CDN con questa capacità, dovrai usare l’elemento <picture> nel tuo HTML.

💡Nota: la CDN di Shopify rileva automaticamente quali formati di file sono supportati da un browser e invia l'opzione migliore. Ad esempio, può convertire le immagini in WebP o AVIF, dove supportati, e inviare immagini PNG o JPEG come alternativa per i browser più obsoleti.

6. Usa le sitemap per immagini

Se il tuo sito usa gallerie Javascript, immagini pop-up o altri metodi "appariscenti" per migliorare l'esperienza di acquisto complessiva, le sitemap per immagini aiuteranno le tue immagini a farsi notare da Google.

I web crawler non possono scansionare le immagini che non indicate specificamente nel codice sorgente della pagina web. Quindi, per far sapere ai crawler delle immagini non indicizzate, devi indicarne la posizione in un’apposita sitemap.

Puoi inserire la seguente stringa nel tuo file robots.txt, indicando il percorso della tua sitemap:

Sitemap: http://esempio.com/posizione_sitemap.xml

Oppure puoi inviare la sitemap a Google usando la Search Console. Google offre molte linee guida per la pubblicazione delle immagini, che puoi usare per aiutare il tuo sito web a posizionarsi più in alto nella SERP. Inoltre, puoi usare le sitemap di Google per fornire al motore di ricerca ulteriori informazioni sulle immagini sul tuo sito web, aiutando Google a trovare più immagini di quante ne troverebbe da solo.

In qualità di commerciante Shopify, riceverai una sitemap generata automaticamente che include le tue immagini di prodotto. Questo significa che le immagini sulle tue pagine prodotto e qualsiasi altra immagine importante usata nel tuo blog o nelle gallerie possono essere “scoperte” dai motori di ricerca attraverso la tua sitemap. Ciò aumenta le possibilità che le tue immagini appaiano nei risultati di ricerca e portino più traffico al tuo sito web.

Shopify aggiorna automaticamente la sitemap ogni volta che vengono aggiunti nuovi prodotti o pagine, o quando vengono rimossi quelli esistenti, quindi non devi mai creare o aggiornare manualmente la tua sitemap.

7. Usa una buona rete di distribuzione dei contenuti (CDN) per le immagini

Le CDN specializzate per le immagini offrono delle funzionalità di trasformazione grazie alle quali devi soltanto caricare un'immagine di alta qualità, poi saranno loro a ridimensionarla, riformattarla e memorizzarla nella cache in base a ogni richiesta. Con la CDN per immagini di Shopify, la dimensione del file viene ottimizzata automaticamente quando carichi la tua immagine. Il cambiamento nella qualità del file non è percepibile a occhio nudo, ma migliorerà il tempo di caricamento della pagina. Inoltre, la CDN rileva automaticamente quali formati di file sono supportati dal lato client e offre l’editing dinamico, che ti consente di ritagliare e trasformare la tua immagine senza perdere il file originale.

8. Testa le tue immagini

L'intero scopo di ottimizzare le immagini è quello di avere un ulteriore strumento per aumentare il tuo fatturato. Abbiamo parlato di ridurre le dimensioni dei file e di far indicizzare le immagini dai motori di ricerca, ma cosa dire dei test per vedere quali immagini convertono più clienti?

• Testa il numero di immagini di prodotto per pagina. Dato che i tempi di caricamento rappresentano un problema per alcuni siti ecommerce senza hosting, potresti scoprire che una riduzione del numero di immagini su una pagina aumenterà i tassi di clic e le vendite. È anche possibile che fornire molte immagini per pagina migliori l'esperienza utente e porti a più vendite. L'unico modo per scoprirlo è condurre un test.
• Testa quali angolazioni preferiscono i tuoi clienti. Potresti vedere un aumento della fidelizzazione dei clienti fornendo loro gli elementi visivi che vogliono vedere. Un ottimo modo per capirlo è di condurre un sondaggio tra i tuoi clienti per chiedergli cosa gli sia piaciuto di più nel momento in cui hanno visualizzato i tuoi scatti di prodotto. Parlare con i tuoi clienti e sottoporli a sondaggi è una buona abitudine da adottare in generale. Comunque, verifica con dei test.
• Testa quante inserzioni di prodotto dovresti avere sulle pagine di categoria. Sono 10, 20 o 100 prodotti? Testa il numero di inserzioni di prodotto sulle pagine di categoria per vedere cosa funziona meglio per i tuoi clienti.

Strumenti per l'ottimizzazione delle immagini

Ora che conosci alcune delle best practice per l'ottimizzazione delle immagini, diamo un'occhiata ad alcuni strumenti e plug-in dedicati che puoi usare per il tuo sito web.

Ricorda: se sei su Shopify o usi una CDN per immagini specializzata, non hai bisogno di usare questi strumenti. L'unica eccezione è SVGOMG: la maggior parte delle CDN per immagini non offre ottimizzazioni per i file SVG.

Squoosh

Squoosh è un'app web facile da usare per la compressione delle immagini. Basta trascinare e rilasciare la tua immagine nello strumento e scegliere uno dei formati immagine ottimizzati, come JPEG XL, WEBP, PNG o altri.

TinyPNG

TinyPNG è un altro popolare strumento di ottimizzazione delle immagini sul web. Usa tecniche di compressione lossy intelligenti per ridurre la dimensione dei file immagine per la tua pagina web (WEBP) e per i file JPEG e PNG.

Puoi ridurre le dimensioni delle immagini per le tue app o il tuo negozio, oltre a ridurre le immagini animate. Comunque, non si concentra solo sulla compressione delle immagini, ma offre anche l’integrazione API e strumenti per sviluppatori per integrare TinyPNG in soluzioni software personalizzate.

L'API di TinyPNG ridimensiona automaticamente le immagini per le miniature, rimuovendo eventuali parti non necessarie e aggiungendo più sfondo. Se gestisci il tuo sito web su WordPress, è disponibile come plug-in.

SVGOMG

SVGOMG è un altro semplice strumento di ottimizzazione delle immagini. Offre diverse opzioni per migliorare la qualità e ridurre le dimensioni dei tuoi file SVG. Per iniziare, basta caricare o copiare il codice sorgente del tuo SVG. Puoi giocare con i vari controlli e comandi e creare un'immagine identica, ma con un peso inferiore rispetto all'originale.

Mantieni la funzionalità delle immagini ottimizzandole

Ottimizzare le tue immagini è essenziale per gestire un'attività online di successo. Non solo migliora l'aspetto dei tuoi prodotti, ma aiuta anche a creare un'esperienza di acquisto fluida e a farti trovare online.

Una piattaforma ecommerce come Shopify propone automaticamente le tue immagini agli utenti nel miglior formato possibile, così puoi aumentare le vendite e far crescere la tua attività online.

Ottimizzare immagini: domande frequenti 

Come posso ottimizzare un'immagine senza perdere qualità?

Il modo migliore per ottimizzare un'immagine senza perdere qualità è caricare l'immagine delle dimensioni giuste con il formato giusto per una determinata situazione. Per generare i tuoi file con la scrittura corretta del codice HTML, puoi usare strumenti manuali come quelli elencati in questo articolo  e poi caricarli perché il browser li faccia visualizzare. Oppure, puoi usare una CDN per immagini specializzata come quella di Shopify per convertire e proporre automaticamente delle immagini di alta qualità su qualsiasi dispositivo.

Qual è il miglior ottimizzatore d'immagini?

Squoosh e TinyPNG sono alcuni dei migliori strumenti di ottimizzazione delle immagini disponibili. Entrambi sono basati sul web e offrono un’ampia gamma di opzioni di formato, come immagini JPG e PNG. Se hai un SVG più complesso, usa SVGOMG per renderlo più piccolo.

Devo ottimizzare le mie immagini su Shopify?

Non è necessario ottimizzare le immagini prima di caricarle. Se lo fai, a volte questo può risultare in un'immagine di scarsa qualità che si traduce in conversioni più basse e in un maggior numero di resi. La CDN di Shopify comprime automaticamente le immagini con la qualità migliore per l'ecommerce. Per sfruttare automaticamente molte funzionalità delle immagini reattive, il codice del tuo tema dovrebbe essere scritto usando gli oggetti Liquid image_url e image_tag.