Oggi parliamo di un argomento importante, anche se spesso sottovalutato: quante volte infatti vi è capitato di imbattervi in dei siti magari anche ideati bene nella navigazione e nel layout, ma con foto davvero brutte e di scarso appeal?

Oppure, al contrario navigare su siti bellissimi, anche nel comparto grafico, ma che impiegano tempi biblici per caricare? Ecco il motivo per cui intervistiamo Mauro Pinto, Graphic e Web Designer di Geofelix, un’agenzia di comunicazione che si occupa della creazione siti web a Pavia.

Ciao Mauro, puoi darci dei consigli in merito a come mettere delle belle foto che siano al contempo “leggere” sui nostri siti internet?

Certo, ecco le mie 5 dritte in merito.

1. Ridimensionamento

Il Ridimensionamento delle foto è il primo aspetto fondamentale. Se avete come materiale del cliente foto di trilioni di pixel a risoluzione esagerata, sappiate che non vi serve lasciarle inalterate. Quindi se, nella progettazione del vostro layout, avete ad esempio una slideshow impostata a 1600px X 500px il primo step da fare è creare dei file esattamente di quelle proporzioni. Inoltre la risoluzione a cui dovreste settare il file è di 72dpi. Questo perchè mettere sul web immagini di risoluzione maggiore non serve a nulla.

2. Nitidezza

Dopo quanto detto sopra, molti potrebbero storcere il naso dicendo che così le foto perdono tutta la loro bellezza. L’affermazione è sbagliata in quanto, lavorando bene in post-produzione, potete ottenere dei risultati di gran lunga migliori del file originale da cui siete partiti. Per ottenere delle immagini belle, il primo aspetto su cui lavorare è la Nitidezza. Possiamo dire che questo settaggio equivale a eliminare, o comunque a ridurre, la sfocatura presente nelle foto. Potrebbe accadere di ricevere delle foto non perfettamente a fuoco, esattamente nei punti dove cade l’occhio e dove occorre che risaltino. Attenzione a non esagerare con questo effetto perchè, se massimizzato, va a evidenziare la grana stessa dei pixel.

3. Esposizione e Contrasto

I valori di Esposizione e Contrasto permettono di scongiurare quell’effetto di piattezza che percepiamo quando osserviamo alcune foto. La spiacevole sensazione si verifica quando nessun elemento emerge o spicca. Per ovviare al problema possiamo lavorare su luci ed ombre grazie a questi due tweak. Tenete presente che i due elementi vanno di pari passo: il contrasto vi permette di avere ombre più nette che staccano in modo più netto i vari elementi della foto; mentre l’esposizione modifica la luminosità di tutta la foto. A seconda della base di partenza vi troverete magari o ad aumentarli entrambi o a giocare sui contrasti settando valori differenti.

4. Vividezza e Saturazione

Colori, colori e ancora colori! No, non sono impazzito però i colori contano tantissimo e sono la chiave per stupire e catturare l’attenzione. Se ci fate caso ci sono dei siti dove le tonalità sembrano molto accentuate, facendo prendere vita alla foto e ai soggetti in essa. Per andare in questa direzione bisogna lavorare sui fattori di Vividezza e Saturazione. Le modifiche che apportano questi setup la si può capire già dal nome: sostanzialmente modificano i colori rendendoli vibranti e accesi. Anche in questo fate attenzione a non esagerare perchè potreste ottenere colorazioni innaturali.

5. Formato ed Esportazione per il web

A meno che non abbiate esigenze particolari di mantenere trasparenze, nel caso specifico utilizzate il formato PNG, vi consiglio di salvare sempre in JPEG. Questo formato offre un rapporto di compressione ottimale, senza sacrificare troppo le caratteristiche della foto. Inoltre ricordatevi sempre di utilizzare la funzione di Esportazione per il web, che salva appositamente i vostri file per l’utilizzo online. Durante il salvataggio potete decidere il livello di compressione: se caricate foto troppo pesanti su un sito, i tempi di caricamento si allungano e Google lo penalizzerà.

Mauro dovresti anche consigliarci il software per applicare i tuoi preziosi consigli. Cosa utilizzi? Beh, la mia scelta ricade sicuramente su Adobe Lightroom: è un ottimo compromesso tra qualità e immediatezza di utilizzo per avere dei risultati professionali.