Ottimizzazione delle immagini per il Web: una guida pratica

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 alcuni di questi sul tuo sito e quell'esperienza scattante di navigazione nel tuo negozio online può finire per sembrare più come nuotare attraverso la melassa. Questo non solo farà rimbalzare i visitatori ma, col tempo, anche Google se ne accorgerà e questo può influire sul tuo SEO.

Nell'e-commerce, è fondamentale trovare un buon equilibrio tra qualità dell'immagine e dimensione del file immagine quando si salva un'immagine per il proprio sito. Ti mostreremo come fare proprio questo in questo post.

Se sei noto per scattare una foto di un prodotto e caricarla direttamente nel tuo negozio, questo tutorial è per te. Se non hai una conoscenza formale o un processo per salvare le immagini tenendo presente la dimensione del file, 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?

Opzioni del tipo di file immagine

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 i JPG

I 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, sfumature o motivi complessi. I JPG gestiscono bene questo tipo di immagini perché i JPG hanno un'enorme tavolozza 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 i 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.
• PNG-24 fornisce un'immagine di qualità molto più elevata ma ha il costo di un file di dimensioni maggiori.

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.

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 essere caricata, è 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 giuste dimensioni

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.

Salva immagini per il Web

È possibile ridurre le dimensioni del file senza ridurre significativamente la qualità delle immagini. Il nostro 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. Troviamo che una qualità di 60 funzioni meglio perché riduce la dimensione del file al di sotto di un megabyte e non c'è differenza evidente nella qualità.

Comprimi immagini per il Web

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 semplice e veloce per ridurre le dimensioni dei file senza perdere la qualità dell'immagine.

App e servizi per la compressione delle immagini

• ImageOptim
• ShortPixel
• TinyJPG
• TinyPNG
• Compressor.io
• Kraken
• ImageOptimizer
• Crush Pics (App Shopify)
• Minifier (App Shopify)

Salvataggio di un'immagine per il Web: esempio di guida

Per iniziare, fingiamo di essere Stiff Salt (in realtà di proprietà di un amico e sviluppatore Shopify) e di voler cambiare l'immagine della funzionalità sul nostro negozio online.

Impostiamo una scena, rendiamo il nostro sale assolutamente incredibile e scattiamo una foto con una fotocamera DSLR. Fantastico, abbiamo la nostra foto. Che bellezza!

Ma... la dimensione del file è ENORME! 14,6 MB per l'esattezza. E le dimensioni della foto sono 5184 × 3456 pixel. Questo è completamente inutilizzabile in questo momento. È letteralmente abbastanza grande da stampare un poster delle dimensioni di un film. A 14,6 MB, questa immagine richiederebbe molto tempo per essere caricata sul computer di un visitatore. 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
• 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 dimensione 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 la dimensione 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. 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 l'immagine in modo appropriato (Salva per Web)

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 del file finale
• 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.

Comprimi 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.

Conclusione

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 alla nostra homepage 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 per imparare presto e implementare religiosamente. 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.

Come ottimizzare le immagini per il Web: Video Walkthrough