Se c’è una cosa che può rendere un sito web più attraente e coinvolgente, sono le immagini. Tuttavia, caricare immagini di alta qualità può rallentare notevolmente il tempo di caricamento del sito, influendo negativamente sulla user experience e sull’ottimizzazione SEO. Ma non temete, ci sono modi per ottimizzare le foto senza perdere in qualità! In questo articolo, vi spiegheremo come ottimizzare le foto per il web, riducendo il tempo di caricamento e migliorando la user experience dei visitatori.
Innanzitutto, è importante scegliere il formato giusto per le immagini: JPEG per le fotografie, PNG per le immagini con sfondo trasparente e GIF per le animazioni. Una volta scelto il formato, è possibile ridurre il peso dell’immagine senza perdere in qualità, utilizzando strumenti di compressione come TinyPNG o Compressor.io.
Un’altra opzione è quella di ridimensionare le immagini prima di caricarle sul sito, in modo da evitare che il browser debba ridimensionarle in fase di caricamento. Si consiglia di ridimensionare le immagini alla dimensione effettiva in cui verranno visualizzate sul sito.
Inoltre, è possibile utilizzare plugin per WordPress come Smush o EWWW Image Optimizer per ottimizzare automaticamente le immagini durante il caricamento sul sito.
Infine, è importante inserire le parole chiave nel nome del file e nell’attributo “alt” dell’immagine, in modo da migliorare l’ottimizzazione SEO. Questo permetterà ai motori di ricerca di indicizzare le immagini e di aumentare la visibilità del sito.
Ora che avete gli strumenti giusti, non c’è più scusa per non ottimizzare le immagini del vostro sito web. Con un po’ di attenzione e cura, potrete migliorare notevolmente la user experience dei visitatori e l’ottimizzazione SEO del vostro sito.
Ottimizzare immagini per un sito web
Gestisci o sei proprietario di un e-commerce e ti stai chiedendo come ottimizzare una foto? Dicono che un’immagine valga più di mille parole, motivo per cui le immagini sono così importanti nell’e-commerce. Senza che il cliente sia in grado di prendere, toccare e ispezionare un prodotto, si affida molto alle immagini per comprendere il colore, la qualità e la storia del prodotto.
Quindi è ovvio che le tue immagini devono essere ad alta risoluzione e nitide. Ma questo ha un prezzo. Le immagini grandi e ad alta definizione possono avere file di dimensioni enormi. Metti alcune di queste foto sul tuo sito e l’esperienza di navigazione peggiorerà drasticamente, con un caricamento della pagina molto lenta, e la logica conseguenza è che l’utente abbandonerà il tuo negozio online . Questo non solo farà rimbalzare i visitatori ma, col tempo, anche Google se ne accorgerà e questo può influire sulla tua SEO.
Nell’e-commerce, è fondamentale trovare un buon equilibrio tra qualità dell’immagine e dimensione del file immagine. Ti mostrerò come ottimizzare immagini per il tuo sito web.
Se sei noto per scattare una foto di un prodotto e caricarla direttamente nel tuo negozio, questo tutorial è per te. Se il tuo sito ha tonnellate di immagini e le cose sembrano lente, questo tutorial è per te. Se non hai ancora iniziato a costruire il tuo negozio online, questo tutorial è fatto apposta per te.
Pronto per ottimizzare le tue immagini?
Ottimizzare foto: Tipo di file
Ci sono tre tipi di file principali su cui vorremmo concentrarci per salvare immagini ottimizzate per il web: GIF, JPG e PNG. Ogni tipo di file ha i suoi punti di forza e di debolezza ed è molto importante conoscerli e tenerli a mente quando si salva un’immagine.
Lavorare con file JPG
I file con estensione JPG (noti anche come JPEG) sono il tipo di file più popolare per le immagini sul Web. I JPG sono perfetti per fotografie o immagini complesse contenenti molti colori, ombre e sfumature. I JPG gestiscono bene questo tipo di immagini perché i JPG hanno un’enorme tavola di colori con cui lavorare.
I JPG possono anche essere salvati in alta qualità, bassa qualità o in una posizione intermedia. Ciò consente di regolare e salvare l’immagine esattamente come si desidera, bilanciando qualità e dimensione del file.
Lavorare con file PNG
I PNG sono un altro formato di file popolare online. In Adobe Photoshop, avrai la possibilità di salvare i PNG come PNG-8 o PNG-24.
PNG-8 ha una tavolozza di colori molto limitata di 256 colori. Sebbene la dimensione dell’immagine sia più piccola, questa non sarà una buona opzione per immagini e fotografie complesse.
Ancora più importante, i PNG possono gestire la trasparenza. Questo è uno dei maggiori punti di differenziazione tra PNG e JPEG.
Lavorare con le GIF
Le GIF erano più popolari molti anni fa, ma sono ancora un’opzione per immagini di piccole dimensioni in cui sono necessari solo pochi colori. Proprio come PNG-8, i file GIF sono limitati a soli 256 colori. Per questo motivo, le GIF non dovrebbero mai essere utilizzate per le foto dei prodotti.
Ottimizzare foto: Salvare le immagini correttamente
Come ci si può aspettare, il caricamento di immagini di grandi dimensioni richiede più tempo. Quando diciamo grande, ci riferiamo alla dimensione del file piuttosto che alle dimensioni di un’immagine, cioè il valore in KB, MB, GB ecc. Visto che il 47% degli utenti si aspetta che una pagina web si carichi in meno di 2 secondi e 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 immagini per il web
Devi aprire l’immagine in Photoshop e visualizzarla al 100%. Ciò consente di visualizzare l’immagine nella dimensione esatta in cui verrà visualizzata sul monitor di un computer quando si salva l’immagine per il web.
È possibile ridurre le dimensioni del file senza ridurre significativamente la qualità delle immagini. Il mio metodo preferito per ridurre le dimensioni 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à di esportazione.
Comprimi le immagini
Le app 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 del luogo in cui è stata scattata la fotografia) che non sono necessari. Questi strumenti forniscono un modo rapido e semplice per ridurre le dimensioni dei file senza perdere la qualità dell’immagine.
Salvataggio di un’immagine per il Web: esempio di ottimizzazione foto
Immaginiamo di dover caricare una foto sul nostro e-commerce, ad esempio vogliamo vendere del sale online, scattiamo una bella foto con una macchinetta fotografica digitale.
La foto è venuta benissimo ma la dimensione del file è ENORME! 14,6 MB per l’esattezza. E le dimensioni della foto sono 5184 × 3456 pixel. Questa immagine richiederebbe molto tempo per essere caricata sul computer di un visitatore, perché è troppo grande, il file pesa troppo e questo non va bene.
È ora di mettersi al lavoro e ridurre le dimensioni dell’immagine e del file in modo significativo.
Ricorda, faremo tre cose all’immagine.
- Riduci dimensione immagine: queste sono le dimensioni della fotografia dimensions
- Salva 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
- Comprimi file immagine: per eliminare eventuali dati nascosti aggiuntivi che occupano spazio
Riduci le dimensioni dell’immagine
A seconda del programma che decidi di utilizzare e delle preferenze personali, puoi:
- Riduci le dimensioni dell’immagine prima di salvare
- Riduci le dimensioni dell’immagine durante il salvataggio dell’immagine
- Salva l’immagine, quindi riduci le dimensioni dell’immagine
Per semplificare le cose, ridurremo prima le dimensioni dell’immagine. Per fare ciò, apriremo l’immagine in Photoshop (puoi usare qualsiasi programma di immagine con cui ti senti più a tuo agio).
Per capire quale dimensione, abbiamo esaminato la dimensione dell’immagine della home page suggerita dal tema WordPress che stai utilizzando. Era 1600 x 800 pixel (ricorda che l’originale era 5184 × 3456 pixel).
In Photoshop, selezioneremo Immagine> Dimensione immagine.
Ok, abbiamo ridotto le dimensioni (dimensioni) dell’immagine a qualcosa di più appropriato e consigliato dallo sviluppatore del tema.
Salva le immagini in modo appropriato
In Photoshop , c’è un comando specifico chiamato “Salva per Web” che ottimizza il file immagine per la visualizzazione online. Questo è importante in quanto il normale comando “Salva” può finire per creare file di dimensioni 2-3 volte maggiori rispetto al comando “Salva per Web”.
Nella casella “Salva per Web”, dobbiamo effettuare alcune selezioni.
- Tipo di immagine: il tipo di file influenzerà la qualità e la dimensione del file di output
- Qualità dell’immagine: questo è importante e può influenzare pesantemente la dimensione finale del file
- Dimensioni: l’ abbiamo già fatto nel primo passaggio, quindi non è necessario farlo di nuovo, ma se non lo avessimo fatto nel primo passaggio, potremmo semplicemente modificare le dimensioni dell’immagine qui
Sulla base di ciò che abbiamo appreso all’inizio di questo post, sappiamo che JPEG è il miglior tipo di file per fotografie o qualsiasi immagine con molti colori e complessità. Selezioneremo JPEG.
Per la qualità dell’immagine, hai una scala che puoi selezionare con 5 preimpostazioni che vanno da Massimo a Basso. Diamo un’occhiata alla dimensione finale del file di output di ciascuno dei livelli di qualità (questa informazione viene visualizzata nell’angolo inferiore della finestra di salvataggio dell’immagine):
- Massimo: 1,38 MB
- Molto alto: 611 KB
- Alta: 339 KB
- Medio: 152 KB
- Basso: 86 k
Puoi vedere che per ogni livello di qualità che scendi, la dimensione dell’immagine si riduce di quasi la metà. In generale, abbiamo scoperto che Alta è l’impostazione migliore per la maggior parte delle immagini. A questo livello, è quasi impossibile per l’occhio umano vedere qualsiasi degrado nella qualità dell’immagine e la dimensione del file è quasi 4 volte più piccola rispetto a se dovessimo selezionare solo 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 bilanciamento: è necessario bilanciare la qualità della grafica e la dimensione del file del supporto in base alle proprie esigenze personali.
SUGGERIMENTO: Come regola generale, ci piace che le foto dei nostri prodotti abbiano un massimo di 80-150 KB e che le immagini degli eroi della homepage di grandi dimensioni abbiano un massimo di 250-350 KB. Questi sono buoni numeri di riferimento su cui puntare anche per te.
Comprimi le immagini per il web
Se hai utilizzato Adobe Photoshop, avrà già fatto un ottimo lavoro nel ridurre le dimensioni dell’immagine, tuttavia, puoi comunque eliminare un altro 5-10% delle dimensioni dell’immagine utilizzando un’app di compressione come ImageOptim e/o ShortPixel.
ImageOptim è anche il modo più semplice per ridurre rapidamente le dimensioni del file immagine se hai utilizzato un altro programma per salvare le tue immagini che non è buono come Photoshop.
Rilasciando ciascuno dei file del passaggio precedente in ImageOptim, siamo stati in grado di ridurre ulteriormente la dimensione dell’immagine di un altro 5%. Non enormi, ma ancora una volta erano già ottimizzati con Photoshop. Indipendentemente da ciò, ogni KB conta.
Ottimizzare foto: Conclusioni
Per ricapitolare, la nostra foto era follemente enorme quando abbiamo iniziato, tuttavia, con pochi semplici passaggi, abbiamo ridotto la dimensione della foto da 5184 × 3456 a 1600 x 800 in modo che si adattasse perfettamente al nostro sito web e, allo stesso tempo, ha preso da 14,4 MB di crash del computer, fino a 336 KB molto più ragionevoli.
Salvare le immagini in modo appropriato per il web è un passo importante. 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ò aggiungere alcuni risparmi significativi che porteranno a un’esperienza complessivamente molto più piacevole per i tuoi visitatori, clienti e Google.
