Ciao,
questo che stai per leggere è il mio primo articolo su questo blog e mi auguro sia solo il primo di una lunga serie.

Non voglio dilungarmi raccontandoti chi sono e cosa faccio perchè, se ti va, potrai leggerlo in fondo all’articolo. Passo quindi subito al tema di oggi.

Le 3 regole fondamentali per salvare le foto destinate al web.

Con l’esplosione dei social network, le velocità sempre crescenti di connessione alla rete, i dispositivi che si collegano sempre più facilmente al world wide web, tutti noi, costantemente carichiamo foto su internet, utilizzando piattaforme gratuite, gestendo un piccolo spazio per il sito personale o anche caricandole su forum e siti per ricevere critiche e commenti vari ai nostri lavori.

Se però prima di caricare le foto online non siamo stati attenti a qualche particolare, ci capiterà di vedere la foto con colori sostanzialmente differenti, con una forte perdita di dettaglio o forse troveremo la presenza di alcuni artefatti sulla foto.

colori-web

nitidezza

ricompressione
Ecco quindi una guida di 3 semplici regole per limitare questo genere di rischi.

N.B.: Nei miei esempi utilizzerò riferimenti al software più conosciuto per il fotoritocco, sto parlando ovviamente di Photoshop, ma i concetti generali espressi valgono per qualunque un qualunque altro programma di photoediting, quindi potrai mettere in atto questi consigli adattandoli al software che conosci meglio.

Prima regolacontrollare il profilo colore della nostra immagine

Uno dei prossimi articoli riguarderà le giuste impostazioni delle nostre macchine fotografiche digitali, tra cui quindi anche l’individuazione dello spazio colore più adatto, che a mio avviso è quasi sempre l’AdobeRGB, e credo ce ne sarà uno anche dedicato alle differenze degli spazi colore. Per ora, senza entrare nel merito della faccenda, consideriamo che sia appunto AdobeRGB lo spazio colore assegnato alle nostre foto direttamente dalla macchina fotografica.

Visto che l’AdobeRGB è uno spazio colore molto più ampio e vasto del classico sRGB, che però è l’unico spazio colore riconosciuto dai browser per la navigazione in rete, prima di salvare l’immagine è necessario convertire lo spazio colore:
da sorgente (AdobeRGB) a destinazione (sRGB).

Per farlo apriamo il menu Modifica -> Converti in profilo.

converti-profilo-1

Scegli come spazio di destinazione l’sRGB (quella lunga sigla che è di fianco si riferisce ad un’implementazione fatta nel 1999 ma a noi non interessa 😉 ).

Come intento usa “percettivo” perchè è il modo di conversione che cerca, più di tutti, di mantenere intatti i rapporti di colore e contrasto tonale dell’immagine.

converti-profilo-2

 

Seconda regola: aggiungere un po’ di dettaglio

Se carichiamo le foto su piattaforme gratuite, come forum, facebook e simili, la nostra foto subirà una ri-compressione sia per quanto riguarda la grandezza in KB che, in moltissimi casi, la grandezza in pixel: questa ri-compressione genererà un abbassamento della nitidezza generale dell’immagine.

Ecco quindi che diventa indispensabile aggiungere un pelino di dettaglio prima del salvataggio definitivo.

N.B.:
la quantità di dettaglio non può essere definita a priori, perchè dipende direttamente dalla grandezza in pixel dell’immagine di partenza, ma vale il discorso “più piccola è l’immagine, minore deve essere la dose di contrasto da aggiungere”.

Di metodi per aggiungere dettaglio ce ne sono a bizzeffe, ma i due più utilizzati e più semplici sono: Maschera di Contrasto e Accentua Passaggio.

Si tratta di due filtri di Photoshop, che ragionano e lavorano in maniera sufficientemente diversa ma sono assolutamente equiparabili sul piano dell’efficacia (almeno  in questo caso).

Te li mostro entrambi.

Maschera di contrasto

Per aggiungere nitidezza con la maschera di contrasto è sufficiente andare nel menu Filtro -> Nitidezza -> Maschera di Contrasto:

 

mdc-1

si aprirà la finestra di dialogo che ci mostrerà anche un anteprima (con i tasti + e – regola lo zoom dell’anteprima al 100%)

mdc-2

– Il fattore indica la percentuale di contrasto da aggiungere: maggiore è il fattore, maggiore sarà il contrasto aggiunto (sui bordi degli oggetti!!);

– Il raggio indica su quanti pixel bisogna intervenire: il filtro cerca ed individua all’interno dell’immagine i bordi, ossia le zone di cambiamento evidente di colore e/o luminosità. Ti consiglio di mantenere sempre un raggio basso onde evitare che si creino dei fastidiosi aloni;

– La soglia, invece, ti viene in aiuto quando sei stato costretto ad aggiunere troppo contrasto, hai usato un raggio molto grande e per questo l’immagine ha mostrato quei fastidiosi aloni di cui sopra: questo comando serve per indirizzare l’azione del filtro solo ai bordi più grandi e più riconoscibili dell’immagine, allegerendo l’azione del filtro sul resto dell’immagine.

Per un miglior utilizzo del filtro ti consiglio di visualizzare l’immagine al 100%, ossia alla grandezza in pixel reale.

Filtro accentua passaggio

Se opti invece per utilizzare il filtro Accentua Passaggio, dovrai fare qualche passo in più, ma nulla di così complicato.

Inizia con il duplicare il livello dell’immagine cliccando con il tasto destro sulla miniatura del livello e cambiamo il metodo di fusione del livello da Normale a Luce soffusa andando con il mouse direttamente sulla scritta “Normale” e cliccando con il sinistro una sola volta

hipas1
hipas2

 

vai poi nel menu Filtro -> Altro -> Accentua Passaggio:

hipas3

Qui trovi soltanto un parametro da regolare, che è il raggio, e puoi regolarlo a piacimento. Il mio consiglio è di non guardare l’effetto nella finestra di anteprima, dove vedrai un’immagine grigia con delle linee nere, ma direttamente sull’immagine, per regolare l’entità del filtro.

hipas4

E’ un metodo che richiede un pelino di pratica in più per imparare a dosare l’effetto, ma ti dà la possibilità di intervenire anche sull’opacità del livello nel caso volessi abbassare un po’ l’effetto finale.

N.B.: indipendentemente dal metodo che utilizzerai per aumentare la nitidezza percepita dell’immagine, ricorda che stai semplicemente pompando un po’ di nitidezza per contrastare l’effetto ottenuto dopo l’upload, quindi mantieniti sempre su dosi molto basse.

Terza regola: impostiamo le giuste dimensioni

Quando un’immagine finisce sul web, significa che sarà visualizzata da un dispositivo in grado di navigare in rete:
dai piccoli smartphone fino a computer desktop con monitor molto grandi, in grado di visualizzare un’immagine in Full HD (1920×1080).

Nella stragrande maggioranza dei casi, però, l’immagine sarà visualizzata su monitor più piccoli, e moltissimi siti e piattaforme, qualora non avessero ridotto le dimensioni in fase di upload, mostreranno la foto adattata allo spazio utile, quindi inserendo una percentuale di rimpicciolimento che, per forza di cose, rovinerà il risultato finale.

Il mio consiglio a tal riguardo è quindi di realizzare immagini con 600px di altezza, sia che siano immagini in orizzontale che in verticale: in questo modo sarai sicuro che le immagini saranno fruibili sulla stragrande maggioranza dei monitor. Inoltre, per una maggiore compatibilità con i diversi monitor, è buona norma impostare la risoluzione a 72 dpi ma su questo è importante chiarire due aspetti:

1 – la grandezza e il peso di un’immagine dipendono solo ed unicamente dal numero dei pixel
2 – non è obbligatorio impostare 72 dpi per la immagini destinate al web, ma questo è un valore standard (assieme ai 96 dpi) e possiamo tenerlo buono senza approfondire troppo il discorso che rischierebbe di diventare soltanto noioso

Vediamo allora come modificare le dimensioni dell’immagine:

vai nel menu Immagine -> Dimensione Immagine, si aprirà questa finestra
dim-imm-1

modifica prima la risoluzione, passando a 72 e, successivamente, le misure in pixel dell’altezza del file.
(quando utilizziamo “salva per web” il file sarà esportato a 72 dpi indipendentemente dalla risoluzione che abbiamo lasciato, pertanto possiamo anticipare questa operazione, sebbene ripeto non sia strettamente necessaria)

dim-imm-2

N.B.: accertati che siano spuntate le voci “Mantieni Proporzioni” e “Ricampiona Immagine

Finalmente l’immagine è pronta per il web.  A questo punto resta altro che salvare il jpg e caricarlo sulle varie piattaforme. Seguendo le indicazioni di questa guida non sarà più necessario lesinare sulla compressione del jpg perchè, con queste semplici tre regole, otterrai un file piuttosto leggero anche alla minima compressione.

Seguendo queste 3 semplici regole potrai essere sicuro che le tue foto appariranno nella loro forma “digitale” migliore 🙂

P.S.: E’ probabile che alcuni termini usati in questa guida non ti siano del tutto familiari, come ad esempio: profilo colore, spazio colore, contrasto tonale, metodo di fusione, risoluzione e forse anche altri.

Per ora ti basta seguire alla lettera le indicazioni e vedrai che non avrai problemi; mentre da parte mia ti assicuro che nel corso delle settimane scriverò delle guide che spiegano anche questi concetti 🙂

Mi auguro che questa guida ti sia d’aiuto e, se hai dubbi e domande, non esitare a scriverle nei commenti dell’articolo.

Alla prossima,
rafa
😉