Ottimizzare le foto per il Web con GIMP

 In Scrivere Online, Web Design

Uno degli aspetti fondamentali quando si vuole creare un Blog tenendo un occhio di riguardo per il lato SEO (Ottimizzazione per i Motori di Ricerca) e per le prestazioni in modo da caricare la pagina il più velocemente possibile è sicuramente quello di ottimizzare le immagini utilizzate per la visualizzazione online.

Esistono moltissimi programmi per modificare le immagini ma in questo articolo parleremo di GIMP, non solo perchè si tratta di un programma gratuito ma per le impostazioni che offre. Io stesso utilizzo GIMP per questo sito, utilizzando gli stessi parametri anche sul più noto rivale photoshop il risultato finale, a parità di qualità e impostazioni, risulta di dimensioni maggiori e quindi meno performante per il web.

Installare il Plugin per l’ottimizzazione Web

L’impostazione per ottimizzare le immagini per il Web non è integrata di default su GIMP. Dobbiamo quindi installare un Plugin che se ne occupi, l’operazione è semplicissima e vediamo subito come fare.

Innanzitutto è necessario scaricare il Plugin dalla pagina ufficiale che potete trovare qui. Una volta scaricato e scompattato lo .zip andremo nella nostra installazione di GIMP e cercheremo la cartella plugin (di default il percorso dovrebbe essere C:\Program Files\GIMP 2\lib\gimp\2.0\plug-ins) e inseriremo il contenuto dello .zip scaricato.

Arrivati a questo punto avviate GIMP e controllate che nel menu file sia presente la voce “Save for Web” e il gioco è fatto.

Plugin Salva per il Web Davide Gavazzi Blog

Ottimizzare le Immagini per il Web

A questo punto non ci resta che lavorare per rendere la nostra immagine adatta alla visualizzazione sulle pagine online garantendo il massimo della qualità e delle prestazioni.

Una volta completate tutte le modifiche e i ritocchi necessari all’immagine vediamo cosa può offrirci l’opzione “Save for Web“, consiglio però di fare prima un semplice passaggio per ridurre drasticamente il peso delle immagini.

Dal menù Immagine -> Scala Immagine possiamo scegliere di ridimensionare l’immagine (ne parlo più avanti poichè è gestito dal plugin che andiamo ad usare) e possiamo modificare la risoluzione. Molte fotocamere salvano a 300 o più la risoluzione in pixel/in (i dpi). Questa risoluzione è essenziale per i file cartacei e per la stampa ma solo uno spreco di spazio per l’utilizzo sul sito, i dispositivi attualmente in vendita (a parte schermi con risoluzioni elevate piuttosto rari) usano risoluzioni standard sotto i 100 dpi. Impostando il valore a 100 si ha la certezza che l’immagine resterà nitida su ogni dispositivo risparmiando in maniera consistente la dimensione del file.

Il Plugin mostra un’anteprima dell’immagine finale, una sezione per selezionare il formato in cui salvare il file e due tab per le modifiche più importanti.

La scelta del formato è legata alle necessità, normalmente si sconsiglia di utilizzare file PNG in quanto molto più ingombranti se non strettamente necessario, il migliore formato per le immagini online è il JPEG.

Iniziamo analizzando la seconda tab, che ci permette di modificare le dimensioni ed eventualmente ritagliare l’immagine. Molto importante sottolineare che non modifichiamo il file di GIMP sul quale stiamo lavorando ma solo il salvataggio della foto per il web, questo ci viene utile quando abbiamo bisogno dello stesso contenuto per diversi scopi e non solo per il proprio blog.

La possibilità di ritagliare l’immagine può essere molto comoda se bisogna rispettare uno standard nelle proporzioni tra larghezza e altezza dell’immagine. È però il modificare la risoluzione dell’immagine grazie al Resize.

Quando scriviamo online dobbiamo infatti tenere a mente che un’immagine di 8000×4000 pixel su uno schermo in HD, la cui risoluzione è di gran lunga inferiore. Diventa uno spreco di memoria e un carico non indifferente per il server caricare immagini troppo grandi (per intenderci l’immagine all’inizio dell’articolo è larga solo 1100 pixel e viene visualizzata bene su qualsiasi dispositivo).

Plugin Salva per il Web Seconda Schermata Davide Gavazzi Blog

Passando invece alla prima tab possiamo trovare altre utili opzioni per ottimizzare l’immagine.

QUALITà

Per quanto riguarda le opzioni a casella:

  • Optimize consiglio di lasciarlo sempre attivato, interviene sul salvataggio ottimizzandone le dimensioni.
  • Progressive garantisce un caricamento rapido dell’immagine a discapito della qualità iniziale andando a definirsi mano a mano che si carica completamente, utile per garantire a chi non ha ottime connessioni di non trovare buchi nelle pagine non ancora completamente caricate.
  • Baseline carica l’immagine gradualmente e a strisce orizzontali, personalmente la trovo fastidiosa e meno utile dell’opzione precedente e non la utilizzo ma si tratta di una scelta personale.
  • Strip EXIF elimina i dati che la fotocamera inserisce automaticamente nelle foto, lo tengo attivo in quanto risparmia della memoria ma per alcune esigenze potrebbe essere lasciato attivo (blog di fotografia o plugin e gallerie che mostrano questi dati)

Plugin Salva per il Web Prima Schermata Davide Gavazzi Blog

Gli altri due parametri configurabili da questa schermata sono:

  • Quality che si riferisce alla qualità con cui viene salvata l’immagine, sconsiglio vivamente di scendere sotto il 75 per non perdere di nitidezza.
  • Smoothing che sfuma l’immagine rendendo volutamente meno nitidi i passaggi da un colore all’altro, non so a chi possa servire ma di norma si lascia a il valore a zero avendo già modificato l’immagine.

Quando non usare il Plugin

Sinceramente non trovo nessuna scusante per non lavorare sull’ottimizzazione delle immagini se non la pigrizia. Effettuare questa operazione per ogni immagine sul sito fa perdere del tempo, è vero, ma sono innegabili i benefici nell’operare al meglio sia dal punto di vista delle prestazione che dell’indicizzazione.

Tuttavia quando mi trovo a parlare con amici e colleghi di questi temi mi vengono mosse fondamentalmente 2 critiche alle quali voglio rispondere qui per dissipare ogni dubbio.

Ho un Hosting molto potente, non ho bisogno di ottimizzare.

Questo è un errore da “novellino” nel campo dell’informatica. Avendo a disposizione anche spazio illimitato e una quantità spropositata di banda ci sono 2 situazioni che continuano a pesare rendendo indispensabile l’ottimizzazione delle immagini.

In primo luogo parliamo dell’indicizzazione. Pur non trattandosi infatti di uno dei parametri principali con cui viene valutato un sito la qualità delle immagini, il loro peso influisce direttamente su uno dei primi elementi presi in considerazione, ossia il peso della pagina. Se anche messa a disposizione istantaneamente dal vostro potentissimo server una pagina molto pesante viene penalizzata nell’indicizzazione e di norma sono proprio i contenuti multimediali a occupare la maggior parte del peso di una pagina.

Infine e forse più importante, non importa quanto potente sia il vostro server, se l’utente finale si collega al vostro sito da un computer dell’anteguerra con una versione obsoleta di un Browser Web che non può neanche essere trovato in circolazione avrà seri problemi. Non importa infatti quanto velocemente il vostro server metta a disposizione i contenuti poichè il computer dal quale si accede dovrà caricarli per visualizzarli all’utente.
Ottimizzare le immagini serve quindi a offrire una migliore navigazione all’utenza e, a meno di volersi male da soli, resta il punto più importante da prendere in considerazione.

Sono un Fotografo, devo offrire il massimo della qualità!

Mi rendo conto che in questo caso bisogna scendere a qualche compromesso, le pagine saranno quasi certamente molto pesanti se cariche di contenuti fotografici ma questo non giustifica il rinunciare all’ottimizzazione delle immagini.

Indipendentemente dalla qualità delle foto o dei disegni che mettete a disposizione sul vostro sito restano indiscussi i limiti di cui ho già parlato relativi agli schermi attualmente in uso (risoluzioni e dpi) che rendono inutili immagini pesantissime e ad altissima definizione come anteprime sulla pagina Web.

In questi casi la soluzione migliore è sempre procedere con l’ottimizzazione delle immagini per il sito e offrire per il download il file originale e di alta qualità, pronto per la stampa o la modifica da parte degli utenti interessati.

 

Per concludere

Non avete più scuse per evitare di ottimizzare le immagini per il vostro sito, ricordate che l’immagine ideale non supera i 100kB e che il tempo dedicato a offrire un servizio migliore non è mai tempo perso.

 

Davide Gavazzi
Davide Gavazzi, appassionato di SEO, SEM, Social Media Marketing e Web Design. Si occupa di Web dal 2011 creando e gestendo siti, Social, Pubblicità e tutto ciò che riguarda l'Online.
Post Recenti
Comments

Lascia un commento

Contattami

Hai domande? Puoi scrivermi utilizzando il form seguente e sarai ricontattato il prima possibile.

Non leggibile? Cambia testo.

Start typing and press Enter to search