Sei sulla pagina 1di 4

1

Tutorial: ottimizzare foto per il web


da http://blog.leonardo.it/tutorial/foto/

Sommario 1. Introduzione 2. Ottimizzare una foto per il web 3. Software Introduzione In questo tutorial ci occuperemo di immagini digitali, soprattutto di foto, cercando di capire le loro caratteristiche peculiari e come poterle usare al meglio sul web. Unimmagine digitale, come del resto tutto ci che digitale, formata da dati, riuniti a formare un file, con unestensione e un determinato peso. Queste due informazioni (estensione e peso) ci vengono subito fornite dal nostro sistema operativo, selezionando il file.

Inoltre, le immagini digitali hanno anche una dimensione espressa in pixel, e una risoluzione espressa in dpi. Queste informazioni possiamo invece ricavarle aprendo limmagine con un software adatto a visualizzarle.

Per modificarle e quindi ottimizzarle ci dovremo invece procurare un software di editing/fotoritocco Il pi diffuso e professionale Photoshop, che per a pagamento, alternativa economica pu essere il leggerissimo e gratuito IrfanView

2 (questi primi due sono i software che useremo negli esempi). Altrettanto validi sono PaintShop e Gimp. Cerchiamo ora di dare alcune definizioni, sebbene senza entrare troppo in dettaglio. Estensione/tipo: identifica il formato dellimmagine. Sono molti, ognuno adatto ad un tipo di immagine. Potrebbe essere ad esempio bmp, gif, png usati in grafica; jpeg il pi diffuso per immagini fotografiche compresse, insieme allemergente raw (non compresso); tiff preferito per la stampa. Peso: in kb o Mb, dipende da quanti dati contiene limmagine e quindi da fattori come il suo formato, la sua dimensione. Se limmagine pesa molto, significa che occupa pi spazio sul nostro disco fisso, sar anche pi difficile condividerla (sul web, via email, su floppy, ecc.ecc.). Dimensione: in pixel (i cm non sono ununit di misura adatta ad un monitor). Esprime la grandezza dellimmagine in larghezza e altezza. In generale, pi grande limmagine, migliore la sua qualit in stampa e nei dettagli (ma pi peser). A schermo, comunque, per visualizzarle queste foto verranno ridotte alla risoluzione del monitor, quindi generalmente 1024x768 o ancora 800x600 su monitor piccoli (15 pollici). Risoluzione: serve soprattutto in fase di stampa per ottenere una qualit soddisfacente. Dipende dal numero di pixel per pollice (pixels/inch) che limmagine possiede. Diminuendoli, la qualit dellimmagine peggiora. In stampa ad esempio la minima risoluzione richiesta 300dpi; un monitor invece non in grado di mostrare pi di 72dpi quindi una risoluzione superiore inutile. Senza entrare in troppi dettagli, avrete capito che il migliore o peggiore aspetto di un immagine dipende dallinsieme di tutti questi fattori e da un compromesso tra qualit e utilizzo che si deve fare dellimmagine. Per questo si parla diottimizzazione di unimmagine per il web.
[Ritorna su]

Ottimizzare una foto per il web Diamo per scontato il trasferimento delle foto dalla macchina digitale al vostro pc. Le immagini di partenza dipendono dai settaggi della vostra fotocamera e dalla qualit da voi usata durante gli scatti. Esiste una corrispondenza tra megapixel delle macchine digitali e la grandezza in pixel del file prodotto; il peso invece varia per ogni singola foto dipendendo da carattristiche peculiari del soggetto fotografato come il numero di dettagli che contiene, i colori presenti e le sfumature, ecc.ecc. Il fattore pi importante nel web il peso. Se metto un immagine online, i miei visitatori devono poterla visualizzare e per farlo il loro browser deve scaricarla. Se la connessione che hanno a disposizione non molto veloce, probabile che occorrano diversi secondi per farlo, magari pi di quelli che sono disposti ad aspettare. Pertanto una foto online non dovrebbe pesare mai pi di 60/80kb (nellipotesi che ci sia una sola foto per pagina). Il formato pi adatto senzadubbio il jpeg/jpg. Per arrivare a questo peso e senza sacrificare troppo la qualit dellimmagine, si devono compiere diverse operazioni. Ci occorrer quindi un software diediting/fotoritocco. Creiamo una copia della nostra foto per ottimizzarla* e apriamola con il software che abbiamo a disposizione. 1. Prima operazione da fare sempre ridurre le dimensioni. Cerchiamo quindi nel men del nostro software la voce relativa e portiamo limmagine a 800x600 o anche meno a seconda della pagina dove verrr pubblicata, mantenendo per

3 sempre le proporzioni. (in Photoshop sta sotto Immagine > Dimensione immagine in Irfanview nel men Image > Resize/resample). Gi questo alleggerir notevolmente il peso dellimmagine. 2. Ora dobbiamo scegliere il livello di compressione e il formato. Mantenendo il jpeg che per immagini fotografiche con molti dettagli o sfumature il formato pi adatto, cerchiamo la compressione migliore. Diminuendo la qualit della foto, diminuisce il peso. Non esistono regole precise, ogni foto diversa da unaltra, ma ragionevole pensare di impostare la compressione tra l80% e il 50%, tenendo docchio il peso (dicevamo 80kb al massimo) e la qualit finale dellimmagine. Si pu sempre salvare la foto con compressioni diverse e poi confrontarle. Photoshop lo fa in automatico se seleziono la voce File > Salva per web, mostrandomi limmagine ottimizzata o 2 o 4 varianti pi e meno compresse. *la compressione jpeg a perdita di dati quindi, applicata una compressione, non si pu tornare indietro allimmagine originale.

Altrimenti, sempre in Photoshop, al momento di salvare la foto ridimensionata, mi verr chiesto formato e poi livello di compressione da adottare.

Con Irfanview al momento del salvataggio posso scegliere il formato e da unapposita finestra aggiuntiva il livello di compressione. Esistono altri parametri, modalit, settaggi su cui si pu operare per influire sul peso dellimmagine ma:

a) sono pi difficilmente comprensibili se non con conoscenze avanzate di grafica b) sono spesso gli ultimi estremi tentativi di alleggerire di qualche altro kb unimmagine, quando ogni kb risparmiato fondamentale.
[Ritorna su]

Software NOME CATEGORIAPRO CONTRO Photoshop Pagamento Il pi completo e diffuso, Costoso, molte funzioni utili solo molti tutorial disponibili a utenti esperti, richieste online hardware alte Gimp Gratuito Gratuito, moltissime Poco intuitivo, poco diffuso funzioni a disposizione Paint Shop Pagamento Economico, abbastanza Meno diffuso a livello Pro completo e semplice da professionale di Photoshop usare Irfanview Gratuito Leggero e veloce, facile Funzioni solo di base per da usare, plugin scaricabili fotoritocco, interfaccia migliorabile I quattro software scelti sono solo indicativi, ne esistono centinaia che lavorano sulle immagini, alcuni completi, altri pi orientati al fotoritocco, alla gestione, alla visualizzazione; alcuni sono pi adatti a fare grafica in generale, altri per lavorare sulle fotografie.