Che cos’è l’ottimizzazione delle immagini?
L’ottimizzazione delle immagini è il processo di modifica delle immagini in modo che si carichino più velocemente e possano essere comprese dai robot.
La parte più importante è l’ottimizzazione della velocità. Le immagini ad alta risoluzione hanno dimensioni di file elevate, il che le fa caricare lentamente.
L’ottimizzazione delle immagini è il processo di riduzione di queste dimensioni di file attraverso metodi come cambiare il formato del file, ridimensionare e comprimere le immagini, mantenendo al meglio la qualità dell’immagine.
Perché la compressione delle immagini è importante? La compressione delle immagini è il processo utilizzato per ridurre le dimensioni del file delle immagini senza ridimensionare l’immagine.
Esistono due tipi di compressione:
- Con perdita di dati: di solito comporta dimensioni di file inferiori poiché rimuove dati dalle immagini per renderle più piccole. Questo di solito comporta una leggera perdita di qualità dell’immagine, anche se con il giusto livello di compressione non dovrebbe essere eccessivamente evidente. Lo svantaggio principale è che non può essere invertita, quindi conserva un backup dell’immagine originale.
- Senza perdita di dati: può essere completamente invertita poiché nulla viene rimosso. Lo svantaggio sono dimensioni di file generalmente più grandi, poiché non c’è molto che si può fare senza eliminare dati dall’immagine, ma la qualità sarà migliore.
Queste non sono piccole riduzioni delle dimensioni dei file, sono riduzioni massicce.
Formati di immagine diversi
Esistono molti tipi di immagini che si incontrano online, ma i 3 formati più comuni sono:
- JPEG: un formato di compressione con perdita di dati che di solito comporta immagini di qualità inferiore, con il vantaggio di dimensioni di file significativamente inferiori rispetto al PNG. Non può essere usato per immagini trasparenti.
- PNG: un formato di compressione senza perdita di dati ottimo per immagini di alta risoluzione e trasparenti come loghi ed elementi importanti del sito. Lo svantaggio sono dimensioni di file molto più grandi del tipico JPEG, non consigliato per la maggior parte delle immagini.
- WebP: un formato di file moderno sviluppato da Google per dimensioni di file inferiori (sia compressione con e senza perdita di dati) e supporto per sfondi trasparenti. Le immagini WebP senza perdita sono del 26% più piccole rispetto ai PNG. Le immagini WebP con perdita sono più piccole del 25-34% rispetto alle immagini JPEG comparabili.
In breve, di solito si consigliano i formati di immagine WebP o JPEG per le dimensioni di file più piccole.
Dimensionamento delle immagini su Shopify
Un altro fattore importante per le dimensioni dei file di immagine e i tempi di caricamento della pagina sono le dimensioni letterali dell’immagine. Se hai un’immagine di dimensioni eccessive, stai caricando inutilmente un’immagine enorme solo per ridurla nella pagina (il che può apparire sfocata su piccoli dispositivi come risultato di ciò).
In termini di dimensione massima, Shopify consente fino a 4472 x 4472 pixel o 20 MB di dimensione del file, ma questo non è consigliato. Shopify stessa consiglia 2048 x 2048 pixel per immagini di prodotti quadrate, anche se questo dipenderà dal tuo tema e dalla risoluzione desiderata.
Il punto è che le dimensioni dell’immagine faranno una grande differenza per le dimensioni del file e la qualità, sia troppo grandi che troppo piccole saranno problematiche, quindi prova a dimensionarle per adattarsi perfettamente (non più di 2x) alle dimensioni esatte in cui verranno mostrate sul tuo sito web.
5 app più utilizzate per ottimizzazione le immagini su shopify
Per semplificare, ci sono diverse app Shopify che possono comprimere e ottimizzare automaticamente tutte le tue immagini. Eccone 5 delle più utilizzate:
Tutte le app sopra citate sono gratuite ma con un estenzione delle migliori funzionalità a pagamento.
Ottimizzazione SEO delle immagini su Shopify
E’ necessario precisare che ci sono alcuni fattori seo da considerare riguardo l’ottimizzazione delle immagini.
Nome dei file immagine
Il nome dei file relativi alle immagini (Spesso le fotocamere assegnano nomi simili a questi IMG_1031.jpg). E’ buona pratica rinominare questi file prima ancora di caricarli sul sito web, utilizzando il nome dell’oggetto rappresentato, quindi utilizzando le keyword che meglio rappresentano l’immagine. In questo modo anche i motori di ricerca possono comprendere facilmente il contenuto dell’immagine.
Esempio: il file che si chiama IMG_1031.jpg che riguarda la scheda prodotto di una maglia gialla a manica corta, potresti rinominarlo in “maglia-gialla-manica-corta-marca-polo“.
Testo alternativo e titolo dell’immagine su Shopify
Il testo alternativo è la descrizione per i robot di cosa sia l’immagine o per gli utenti se l’immagine non riesce a caricarsi.Dovresti spiegare l’immagine in dettaglio qui, il che aumenta la copertura a livello di pagina di un argomento per i motori di ricerca, oltre a supportare potenziali utenti con disabilità visive.
Quindi, piuttosto di usare la keyword “maglia gialla”, il tuo testo alternativo dell’immagine potrebbe essere “Maglia Gialla Polo a manica corta“.
Lo stessa cosa va fatta sul titolo dell’immagine. Entrambi vanno gestiti con un semplice codice:
<img src="maglia-gialla-manica-corta-marca-polo.jpg" alt="Maglia Gialla Polo a manica corta" title="Maglia Gialla Polo a manica corta"/>Come fare su Shopify:
- Dal pannello di controllo del tuo shop vai su Prodotti > Tutti i prodotti
- Clicca il nome del prodotto relativo all’immagine che vuoi modificare
- Dalla pagina dettaglio prodotto, clicca un’immagine per vedere l’anteprima
- Clicca su Aggiungi ALT text.
- Scrivi il tuo alt test e clicca su Salva ALT text.
Come ottimizzare le immagini per il web, in breve
- Ridimensiona le tue immagini in base alle dimensioni in cui verranno mostrate sul tuo sito web
- Scegli il formato di file giusto
- Comprimi le immagini a dimensioni di file più piccole
- Assegna nomi descrittivi alle tue immagini
- Ottimizza gli attributi alt delle immagini
- Usa le sitemap delle immagini
- Carica le immagini con il lazy load (Procedura utilizzate finché le immagini non diventano visibili sullo schermo. Ciò ridurrà notevolmente i tempi di caricamento sulle pagine delle collezioni e può anche essere d’aiuto per i prodotti con diverse immagini della galleria).
Immagine di Diggity Marketing from Pixabay
