COME SALVARE ED OTTIMIZZARE UN'IMMAGINE PER IL WEB

Per molti questa potrebbe sembrare una cosa scontata, ma navigando su internet si trovano ancora numerosi siti che non ottimizzano le immagini ... ecco quindi una piccola guida che vi aiuterà a rendere il vostro sito più leggero e piacevole ai vostri visitatori.

- Cosa significa ottimizzare un'immagine?

Ottimizzare un'immagine significa applicarle dei metodi di compressione al fine di ridurre il suo peso, questo è comunemente utilizzato nel web.
Ci sono vari formati che permettono di ottenere immagini ottimizzate, i più utilizzati sono il GIF, JPG o JPEG e PNG.

- I vari metodi di compressione

GIF
Questo metodo sfrutta una tavolozza di colori con cui viene memorizzata l'immagine. Il numero massimo di colori supportati dal GIF è di 256 , ma è possibile ridurre il numero per ridurre anche il peso dell'immagine.
Il formato GIF supporta anche il colore trasparente e le animazioni.

Quando utilizzare GIF:
Quando vuoi usare un'immagine con trasparenza
Quando nell'immagine ci sono pochi colori
Quando l'immagine contiene del testo che vogliamo rendere nitido

JPEG o JPG
Il formato JPEG è un metodo "lossy" ossia che si basa sulla perdita di qualità dell'immagine salvata.
A lato pratico quando salveremo un immagine in JPG potremmo scegliere quanto comprimere l'immagine con un indicatore che va da 1 (qualità minore) a 100 (qualità maggiore).
Qui sotto ci sono tre esempi della stesa imagine con diversa qualità:

Quando utilizzare JPEG:
Quando l'immagine è una fotografia o ha molti dettagli
Quando l'immagine ha molte sfumature

PNG
Questo è un formato realtivamente recente e non viene utilizzato molto comunemente perchè alcuni browser di vecchia data non sono in grado di visualizzarlo, ma è anche il più versatile:
PNG-8 Permette di salvare immagini in modo simile al formato GIF, supporta la trasparenza ed è utilizzato per le stesse indicazioni
PNG-24 Permette di utilizzare un numero maggiore di colori (ovviamente con un peso notevolmente maggiore)

- Come ottimizzare un'immagine con Photoshop
Con l'immagine da ottimizzare aperta, scegliamo File > Salva Per Web.
Si aprirà la finestra di ottimizzazione.
Dal menu a comparsa scegliamo uno dei tipi di compressione che abbiamo visto qui sopra, sicuramente avrete già un'idea del più adatto alla vostra immagine.
Nella finestra potete vedere un'anteprima del risultato finale e il peso che l'immagine finale avrà.

Il Dithering
Tra le opzioni è possibile impostare un Dithering all'immagine:
il dithering è una tecnica che permette di migliorare la percezione di un'immagine che utilizza pochi colori, accostando pixel di diverso colore, questi colori vengono poi percepiti dall'occhio umano che li "mescola" assieme e ha l'illusione che l'immagine sia formata da un numero maggiore di colori. L'idea alla base è la stessa di quei disegni a puntini che fanno fare a scuola: si accostano tanti puntini di colori diversi, guardando da lontano il disegno, l'occhio mescola i vari colori e vede i puntini come varie sfumature di colori diversi.

Per approfondire l'argomento potete trovare una spiegazione completa su Wikipedia

Immagini progressive
Un'altra opzione che è bene conoscere è il campo "Jpeg Progressivo" questo campo permette all'immagine di essere visualizzata graduatamente sul computer dell'utente mentre lo scarica.
Il mio consiglio è quello di disattivare quest'opzione, soprattutto se avete intenzione di utilizzare l'immagine per un'animazione in flash perchè non è supportata.

Oltre agli strumenti che abbiamo visto ci sono numerosi altre opzioni in questa finestra che permettono di controllare ogni aspetto dell'immagine, tuttavia non è lo scopo di questo tutorial dilungarsi troppo su queste funzioni così avanzate ... il consiglio è quello di sperimentare da soli e di fare un po' di prove finchè non ottenete l'immagine migliore ed il peso minore!

Segnala un errore