Tempo fa abbiamo pubblicato un tutorial per spiegare come ottimizzare le immagini per il web, usando Photoshop.
Oggi vedremo come ottimizzare le immagini per il web usando Gimp, uno dei migliori programmi Open Source per la grafica 2D.Il tutorial sarà incentrato su Gimp per Windows, visto che utilizzo un pc per lavorare. Per approfondire i formati di ottimizzazione da scegliere in fase di salvataggio, fate riferimento al precedente tutorial.
Se non avete Gimp scaricatelo gratuitamente dal sito ufficiale (Italiano o Inglese) installatelo ma NON fatelo partire.
Gimp non ha, di base, l’opzione “Salva per il web” quindi bisogna installare un plugin apposito.
Per farlo, scaricatelo dalla pagina ufficiale apriamolo e copiamo il file “webexport.exe” nella cartella “plugin” di gimp, che si dovrebbe trovare in: C:\Program Files\GIMP 2\lib\gimp\2.0\plug-ins
A questo punto potete avviare Gimp
Aprite una qualsiasi foto a vostra scelta. Io ho optato per una foto fatta al mio bassotto, Kiro.
Adesso, dal menù file potete accedere alla voce “Save for web”.
La prima cosa da fare è scalare l’immagine, che attualmente è troppo grande.
Facciamo attenzione che sia selezionata l’opzione Jpeg in alto, e clicchiamo sul tab indicato dalla freccia.
A questo punto inseriamo i valori che vogliamo, nel mio caso 600px di larghezza (l’altezza verrà scalata proporzionatamente) e vedremo l’immagine scalare alla dimensione desiderata.
Possiamo anche decidere di tagliare la foto a nostro piacimento, per rimuovere delle zone che non ci interessano. Basterà cliccare e trascinare uno degli angoli tratteggiati che circondano la foto (come in figura) oppure, per maggior precisione, usare il pannello Crop evidenziato in figura
Ritorniamo sul tab principale per la compressione.
I parametri da modificare sono relativamente semplici da gestire.
Scegliamo il grado di compressione dal pannello Quality, maggiore sarà questo valore migliore sarà l’immagine finale (ma maggiore sarà anche il peso). Io ho impostato volutamente un valore basso per far vedere come l’immagine perde di definizione
Lasciamo su 0 il parametro di sfumatura (Smoothing) perché la nostra immagine deve mantenere i dettagli (aumentando la sfumatura si risparmia qualche kb in fase di salvataggio).
Impostiamo il tipo di compressione su Progressive. Questo fa si che l’immagine venga caricata immediatamente in una forma grezza, che migliora via via che avanza il caricamento. L’opzione Progressive permette di avere da subito le immagini nella pagina web, evitando di lasciare antiestetici spazi vuoti.
Volendo far caricare la nostra immagine a poco alla volta, in strisce orizzontali, selezioniamo l’opzione Baseline (io l’ho disabilitata).
Per visualizzare il risultato della nostra compressione spuntiamo la voce Show Preview in basso a sinistra, e per sapere quanto pesa l’immagine facciamo riferimento alla voce File size in basso al centro (sottolineato in rosso nell’immagine postata poco sopra).
Gimp, inoltre, permette di esportare le jpeg rimuovendo i dati Exif che ogni fotocamera inserisce nei propri scatti. Per farlo basta spuntare la voce “Strip EXIF” come da figura.
A questo punto non ci resta che cliccare su Save e salvare la nostra immagine.
Ovviamente, oltre alle Jpeg, Gimp permette di esportare per il web tutti gli altri tipi di formati supportati. Il dato positivo che segnalo è che, a parità di dimensioni e di compressione, Gimp permette di salvare delle immagini con un peso inferiore rispetto al fratello maggiore, Photoshop.
