Come ottimizzare le immagini per il web

Come ottimizzare le immagini per il web
Vota il post

Se hai già un sito web o un blog, sicuramente avrai un sacco di immagini in ogni pagina o post. E sicuramente vorrai che queste foto siano gradi e di buona qualità per poter impressionare ed attrarre l’attenzione dei tuoi utenti. Pero devi sapere (e forse te ne sarai accorto), che, normalmente, la velocità di un sito web è inversamente proporzionale alla qualità delle immagini: quanto più grandi e definite sono le foto, tanto più lentamente si scaricherá la tua pagina. Se ti interessa la questione della velocità di caricamento di un sito web dai un occhio a questo post.

Ma se viviamo nell’era della’Adsl superveloce, perché ci si dovrebbe preoccupare delle dimensioni delle immagini e della velocitá di download del sito? Per tre semplici ragioni:

  • Navigazione mobile. La tendenza è in aumento: ogni mese il traffico proveniente da cellulari è sempre più alto. Purtroppo la velocità delle reti 3G o addirittura 4G non può essere equiparata con quella del PC classico; i tuoi utenti mobile apprezzeranno il fatto che il tuo sito si carichi velocemente.
  • Non perdere utenti. Un sito lento e pesante è sinonimo di altissima frequenza di rimbalzo, e, naturalmente, non eè desiderabile. Non fare aspettare i tuoi utenti: ottimizza le immagini della tua web.
  • Posizionamento SEO. Google dedica un tempo limitato ad ogni sito web, in modo che quanto meno sia pesante, più pagine sará in grado di monitorare il Google Bot e di conseguenza il tuo sito avrà più possibilità di posizionare meglio; inoltre ormai tutti sappiamo che Google attribuisce grande importanza alla velocità di caricamento di un sito tra i fattori di posizionamento con l’obiettivo di migliorare la user experience.

Ottimizzazione delle immagini per il web passo a passo

Le Dimensioni

Il primo passo è quello di ridemiensionare l’immagine in base alle dimensioni che vogliamo assuma nella nostra pagina. Vale a dire che se nella mia pagina l’immagine può avere una dimensione massima di 750px X 400px, allora è bene ridurre le dimension dell’immagine a queste stesse dimensioni e non di più.

Possiamo vedere qual’è la dimensione di una immagine nella web semplicemente ispezionando la parte di codice che la contiene.

dimensioni immagine

Il formato

Il secondo passo è quello di scegliere il formato immagine appropriata alle proprie esigenze. Sicuramente ti sarai chiesti al meno una volta quale sia la differenza tra un JPG, PNG o un GIF.

Qui ti seguito ti dico quando è meglio usare un formato o l’altro:

.GIF

Un formato obsoleto, praticamente solo si usa ormai per immagini animate e poco più.

.PNG

Il sostituto del Gif, perché permette anche la trasparenza. È ideale per le immagini piatte o con grandi spazi bianchi, come i print di schermo, i loghi, ecc. PNG è un formato immagine senza perdita di dati, per cui anche se non riduce le dimensioni tanto come il JPG, la qualità sarà sempre superiore.

.JPG

Ideale per foto con dettagli e molti colori. Si tratta di un formato di compressione che provoca una perdita di qualità nel momento in cui vogliamo ridurre il peso dell’immagine e perde così nitidezza.

RIASSUMENDO: Come regola generale si dovrebbero usare formati PNG per tutte le immagini che compongono il sito (loghi, icone, pulsanti …) e JPG solo per le fotografie, in particolare quelle più grandi.

Oltre a questi formati è sempre più comune l’uso di formati vettoriali (.eps o .svg) per loghi e icone, in quanto sono completamente scalabili per tutte le risoluzioni. In NoJpeg ti spiegheranno di più.

Programmi per l’ottimizzazine delle immagini

Se usi Photoshop ricordati che devi salvare le immagini utilizzando il comando “File> Salva per web …“, ma che cosa fare dopo?

In primo luogo selezionare in alto a destra il formato in cui si desidera esportare l’immagine: gif, png o jpg. Potrai vedere fino a quattro copie simultaneamente per confrontare formati o compressioni differenti e valutarne la relazione peso/qualità.

ottimizzare immagini per il web

Se decidi esportare in formato JPG tieni in conto:

  • La barra di qualità va da 0 a 100, essendo 0 la compressione massima e 100 nessuna compressione, ovvero alta qualità.
  • L’opzione “Progressivo“. Se si seleziona, il jpg salverá diverse qualità d’immagine in base ai diversi livelli in modo che, quando l’immagine viene caricata si vedrà in bassa qualità all’inizio e migliorerà la sua definizione man mano che procede il download. In caso contrario, verrà visualizzata l’immagine direttamente in alta qualità ritardando il download generale della pagina.

Se decidi esportare in formato PNG tieni in conto:

  • PNG-8 o PNG-24? La differenza principale è che PNG-8 comprime un massimo di 256 colori come un GIF, mentre PNG-24 raggiunge i 16 milioni di colori. Normalmente userai quest’ultima opzione per non deteriorare in eccesso la qualitá dell’immagine.
  • Abbastanza ovvio: se si attiva l’immagine di sfondo sarà trasparente (a meno che non vi sia uno livello di fondo con un colore).
  • Il modo “interlacciato” è molto simile all’opzione “progressivo” del formato JPG, si riferisce al tipo di caricamento.

Ci sono molte altre opzioni nel pannello “Salva per il web …” di Photoshop, ma dal momento che questo post ha un obiettivo pratico, cioè quello di dare qualche consiglio su come ottimizzare le immagine per il web,  è sufficiente analizzare solo le opzioni più comuni. Nel 90% dei casi non sarà necessario di più.

Oltre a Photoshop ci sono altri programmi che ti aiuteranno a “mettere a dieta” le tue immagini come per esempio GIMP o RIOT o Pixrl, un tool totalmente online.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *