Come ridurre il peso di una foto online per velocizzare il sito

Postato in data 13 Febbraio 2017 da Riccardo Esposito
PROMO

Hosting WordPress preinstallato e gestito con il 50% di sconto. Scopri la promo

  • WordPress installato
  • Cache configurata
  • Aggiornamenti automatici
  • Assistenza H24/365

Uno degli aspetti fondamentali per la riuscita di un sito web è la velocità di caricamento delle pagine. Ecco perché è indispensabile mettere in gioco una serie di elementi per ottenere buoni risultati. Tra questi c’è un punto: devi ridurre il peso delle foto e delle immagini online.

Come ridurre il peso di una foto online
La leggerezza è fondamentale nelle immagini.

Questo è solo un passaggio. Un altro step è l’acquisto di un hosting di qualità con dischi SSD capaci di rispondere nel miglior modo possibile alle richieste dei visitatori. Per WordPress ci sono diversi plugin che aiutano a lavorare in questa direzione (tipo W3 Total Cache) ma la qualità del codice è decisiva.

E i contenuti? Tutto ruota intorno alle immagini: devi ridurre il peso di una foto. Quando scegli e fai l’upload del visual, infatti, non puoi muoverti in completa libertà. Devi rispettare una serie di regole che possono fare la differenza sulle tue pagine web. Che devono essere belle, ricche, utili ma anche snelle. Come procedere?

Scegli il formato giusto: JPEG o PNG?

Il primo consiglio per ridurre il peso di una foto online: la scelta del formato file. Qual è la soluzione migliore? Meglio un JPEG o un PNG? La risposta è semplice: se devi salvare una grafica con pochi colori, ad esempio un banner o un visual creato con un software specifico, puoi utilizzare il PNG.

Se invece se devi operare su una foto scattata con una macchina, quindi con tanti colori e ombre, devi usare un formato di compressione JPEG. Così hai 2 risultati differenti: mantieni la qualità del contenuto e ottieni un file più leggero. Per salvare  puoi utilizzare Gimp o Photoshop, oppure sfruttare applicazioni online come Picmonkey. Ne vuoi altre? Ecco 25 utility per ottimizzare le immagini, usale con cura.

Salva l’immagine per il web

Per migliorare ciò che devi caricare sul tuo blog o sul tuo sito devi fare un’azione semplice: salvare l’immagine per il web. Ovvero sfruttare la funzione offerta dai principali programmi di fotoritocco. In questo modo diminuisci il peso della foto e non rallenti il caricamento della pagina. Quanto deve pesare un’immagine per il web?

Non esiste un numero fisso perché tutto dipende dall’uso del visual, ma ti posso dare un parametro: l’immagine di un blog come quello che stai leggendo (630 x 400 pixel) pesa 30 Kb.

Attenzione alle dimensioni delle immagini

Questo è un fattore decisivo: le immagini grandi sono, per ovvi motivi, più pesanti. Esiste una grandezza ideale delle foto che carichi sul tuo blog? Tutto dipende da cosa devi fare con il visual. Se sei un fotografo e vuoi mostrare il tuo lavoro devi usare contenuti qualitativamente superiori per dare un’idea di ciò che proponi.

Come muoversi? Carica le immagini con la dimensione precisa, non forzare l’HTML. Se il design del blog propone una pagina di 630 pixel e carichi un ritratto di 1.500 pixel stai costringendo il browser a effettuare dei processi in più. Ecco il consiglio: usa un software per ottenere la dimensione esatta. Per ridimensionare la foto con i tool online puoi usare:

  • Picmonkey
  • Resizenow.com
  • Resizeyourimage.com

Altro aspetto decisivo: nel codice HTML è consigliabile aggiungere le dimensioni delle immagini attraverso i parametri height e width. In questo modo agevoli il browser nel caricamento del contenuto. In realtà tutto dipende dal CMS che usi: su WordPress tutto questo è automatico quindi non devi preoccuparti.

Per approfondire: come caricare un’immagine su WordPress

Vuoi comprimere il peso delle foto online?

Una delle possibilità per diminuire il peso delle foto: usare strumenti online, applicazioni che offrono un servizio semplice e immediato. Nella maggior parte dei casi il procedimento è chiaro: carichi l’immagine, avvii il programma e scarichi il risultato. Che dovrebbe essere ideale per le esigenze del web. Qualche nome utile?

  • Kraken.io
  • Compressor.io
  • Webresizer.com

Bastano questi per avere tutto ciò che ti serve. In qualche caso puoi scegliere se puntare alla compressione lossless o lossy, vale a dire senza perdita di qualità o con estrema sintesi di dati. Io preferisco la prima opzione perché voglio sempre preservare la bellezza del visual.

Vuoi un mezzo per comprimere immagini online capace di operare su più foto contemporaneamente? Usa dynamicdrive.com, che permette di caricare quasi 3 megabyte di elementi da migliorare in termini di peso.

Plugin per comprimere peso delle immagini

Spesso non puoi agire su tutte le foto già caricate, inizi a fare upload delle immagini quando hai un gran volume di lavori già caricati senza attenzione. Quindi devi iniziare un lavoro infinito di settaggio? No, in questi casi puoi usare un plugin che lavori al posto tuo. Ti lascio un nome per i diversi CMS.

  • EWWW Image Optimizer per WordPress
  • ImageRecycle image optimizer per Joomla
  • ImageRecycle image & pdf optimize per Magento
  • Image Resize Filter per Drupal.

Ben inteso, io preferisco muovermi senza estensioni e perfezionare le immagini a mano. Ma quando devi lavorare su grandi volumi la strada è quasi obbligata. L’uso di queste estensioni può essere decisivo quando devi operare su progetti affrontati male dal primo giorno e che hanno diversi mesi o anni di attività. E migliaia di upload troppo pesanti.

Da leggere: come ottimizzare le immagini di Prestashop

Come verificare il peso dell’immagine

Ok, come comprimere le immagini è chiaro. Ora voglio sapere se il risultato è utile allo scopo: migliorare la velocità di caricamento delle pagine. Il primo check avviene su Pagespeed Insights di Google che analizza tutti i fattori, anche quelli dedicati alla compressione delle immagini. Se ci sono contenuti che non rispettano i parametri, Mountain View te li mostra. Per un controllo ulteriore puoi usare Gtmetrix.com.

Perché ridurre il peso di un foto online?

Foto e immagini devono essere facili da caricare, devono impegnare nel miglior modo possibile le risorse di chi si collega. Come snellire tutto questo?  Nell’articolo ci sono tutti gli snodi essenziali. Perché lo devi fare? Perché te lo dice Google? Sbagliato.

Affinare le immagini per migliorare la velocità di caricamento della pagina vuol dire dare un contributo al lettore, fare qualcosa di buono per le persone che arrivano sulle pagine.

Per un e-commerce il tempo di caricamento della pagina equivale a soldi che se ne vanno, ogni secondo di attesa sono contatti che abbandonano la pagina. Questo vale anche per gli altri siti web e per i blog. L’idea è semplice: non devi lavorare per rispettare le regole di Google ma dare il massimo per il pubblico. 

Devi essere la migliore scelta possibile per l’utente. Devi prendere in considerazione il valore descrittivo e quello emozionale delle immagini, perché permettono di veicolare dei significati che puoi utilizzare per creare un buon insieme.

Questo però non è sufficiente: oltre a scegliere una buona foto, e ottimizzare in chiave SEO quello che carichi, devi fare in modo che sia leggera per velocizzare pagine web. 

Quale metodo usi?

Ridurre il peso delle immagini online è importante. Anzi, fondamentale. Oggi non puoi evitare questo momento se vuoi slanciare il tuo sito web. Quale sistema usi? Quale metodo metti in pratica per ottenere buoni risultati? Lascia la tua opinione e le domande nei commenti.

Clicca per votare questo articolo!
[Voti totali: 1 Media: 5]
Riccardo Esposito

Discussione