Guida all'ottimizzazione delle immagini destinate alla pubblicazione su un sito internet

Ottimizzare le fotografie per il web

Per gestire correttamente le foto del proprio sito web occorre tener conto di aspetti tecnici ed estetici di fondamentale importanza.
Infatti non tutti i CMS dispongono di un sistema per l'ottimizzazione automatica delle immagini caricate sul server, ed è quindi l'amministratore del sito che deve attivarsi per curare questo aspetto delle pagine web.

La corretta gestione delle foto fa la differenza tra un sito professionale e uno amatoriale.

L'errore commesso più frequentemente, e anche il più grave, consiste nel caricare una immagine sul sito così come la si trova sulla memoria della propria fotocamera digitale o del proprio cellulare. La conseguenza è che lo spazio web si riempie di file pesantissimi e spesso anche difficili da visualizzare: infatti una immagine fotografica prodotta da una comune fotocamera digitale ha solitamente una risoluzione di 300dpi, una larghezza che supera i 2000 pixel e un peso di diversi MB. Invece la foto di un sito web dovrebbe avere una risoluzione di 72dpi, una larghezza di non oltre 1000 pixel (tenendo conto della risoluzione dei monitor più diffusa al momento) e di conseguenza un peso in MB di gran lunga minore.

Vediamo quindi alcune semplici regole per ottenere delle foto ottimizzate per il web.

ASPETTI TECNICI
Gli aspetti tenici sono importantissimi per garantire una corretta funzionalità del sito. Ecco alcune semplici regole da tenesere sempre in considerazione.

1) Salvare le foto per il web sempre in formato .jpg (o .jpeg). Comunque mai usare il formato .bmp o gif. In certi casi può andar bene anche il formato .png

2) Quasi tutti i programmi di grafica permettono di impostare il valore dei DPI (dots per inch, ovvero punti per pollice). Il valore corretto per i monitor, quindi per un uso destinato al web, è 72 dpi (settantadue). Da evitare assolutamente lo standard delle fotocamere, cioè 300 dpi, che è invece il minimo per le foto destinate alla stampa.
Impostare i dpi sempre prima delle dimensioni dell'immagine.

3) La larghezza della foto a volte varia nel momento in cui viene modificato il valore dei dpi. Tuttavia è possibile reimpostare la larghezza e l'altezza prima di salvare la foto.
Considerando che attualmente la risoluzione dei monitor più diffusa è di 1024 x 768 pixel , è utile far rientrare le misure dell'immagine in un quadro delle stesse dimensioni o anche minore.

4) Anche il nome delle immagini riveste una certa importanza. In generale per i nomi dei file da usare sul web (non solo per le immagini) è buona norma utilizzare i seguenti criteri:

• testo sempre tutto minuscolo (da preferire quindi immagine.jpg a IMMAGINE.jpg o Immagine.jpg);


• non usare mai spazi (es. nome sconsigliato: la mia foto.jpg, consigliati: la_mia_foto.jpg, la-mia-foto.jpg, lamiafoto.jpg);


• usare solo lettere dell'alfabeto, numeri, undescore e trattino. Escludere assolutamente tutti gli altri segni come parentesi, segni di interpunzione, simboli ecc.


• utilizzare un nome descrittivo per favorire il posizionamento nei motori di ricerca. Evitare quindi nomi come foto1.jpg, oppure 008903.jpg. Se la foto ad esempio rappresenta un panorama di Roma meglio nominare il file come panorama-roma.jpg, roma-panorama.jpg ecc.

ASPETTI ESTETICI
Quando su una stessa pagina compaiono più foto, come per esempio in un elenco di prodotti o in un elenco di lavori realizzati, è preferibile che le immagini che si susseguono abbiano tutte le stesse dimensioni. Questo per l'occhio umano è sicuramente più gradevole.
In questi casi spesso per ogni immagine occorrono due versioni: una in miniatura, detta thumbnail, ed una più grande che viene visualizzata appunto quando l'utente clicca sulla thumbnail.

Spesso per realizzare una thumbnail non è sufficiente ridimensionare la foto originale. Il criterio più giusto è quello di ritagliare una sezione interna della foto secondo i parametri che ci interessano.




Se non avete un programma per gestire le immagini, potete scaricare XNView, semplice e gratuito, oppure The Gimp, più completo e simile a Photoshop.

Ecco dei filmati (purtroppo in inglese ma comunque chiari) che spiegano nel dettaglio come effettuare le operazioni sopra descritte.