Come esportare le immagini per il web?

RISPOSTA SINTETICA

Formato: JPG o PNG

Profilo colore: sRGB

Dimensione in pixel: dipende dalla piattaforma

Peso in MegaByte: dipende dalla piattaforma

Partiamo dalle basi…

Di norma possiamo identificarci in almeno una delle seguenti situazioni:

● siamo all’interno di Adobe Camera RAW o Lightroom e NON useremo Photoshop (quindi non è stato ancora associato nessun profilo colore alla nostra immagine)
● siamo all’interno di Photoshop, o un qualsiasi altro editor, ed abbiamo già associato un profilo colore (come ad esempio ProPhoto RGB rigorosamente a 16 bit)

A prescindere che ci si identifichi nel primo o nel secondo caso, non siamo ancora pronti per poter pubblicare la nostra immagine sul web.

Più precisamente:

● nel primo caso non abbiamo ancora incorporato un profilo colore
● nel secondo invece abbiamo un profilo colore incorporato, ma l’immagine è esageratamente grande
● in entrambi i casi non è detto che il formato dell’immagine sia quello adatto per una pubblicazione

 

Quali formati vengono letti dalle piattaforme web?

Per la pubblicazione delle nostre immagini sul web possiamo utilizzare sia il formato JPG che quello PNG, in base alle nostre esigenze e quelle della piattaforma.

 

Quando vale la pena usare il PNG rispetto al JPG?

Tutto dipende dal tipo di immagine e dal suo utilizzo.
Tecnicamente però ci sono alcuni dati da tener conto.

Il PNG:

● è un formato senza perdita
● può avere parti in trasparenza (logo o firma)
● supporta 24bit RGB e RGBA a 32bit

Questo formato è particolarmente indicato per elementi grafici e loghi, oppure delle immagini dove non si vuol scendere a compromessi da un punto di vista qualitativo.
Ovviamente lo scotto da pagare sarà quello di avere dei file assai più pesanti.

Il JPG:

● è un formato con perdita
● possiamo decidere la compressione/qualità (da 0 a 100)

Questo formato invece è sicuramente più versatile e snello grazie alla possibilità di poter scegliere la qualità di esportazione, e di conseguenza per meglio adattarsi a quelle piattaforme dove possono esser presenti dei limiti di peso espliciti o impliciti.

 

Quale profilo colore deve avere un’immagine per il web?

Le immagini per la pubblicazione sul web è bene che vengano convertite in sRGB incorporando il profilo colore.

Come potrete leggere più avanti, non vi deve minimamente spaventare il fatto che stiate lavorando le vostre fotografie in ProPhoto RGB per poi postarle in sRGB.

 

Qual è la dimensione ottimale in pixel per le immagini sul web?

Non c’è un riferimento assoluto e può dipendere sia dalla finalità d’uso dell’immagine che dalla piattaforma usata.

Tuttavia possiamo prendere come riferimento i seguenti tre casi attualmente di maggior interesse:

● Facebook (post) da 960px a 2048px (lato lungo)
● Facebook (storia) verticale 1080px X 1920px
● Instagram (post) nel formato quadrato 1080px
● Instagram (storia) verticale 1080px X 1920px
● Sito web personale non abbiamo vincoli ma è ragionevole ipotizzare che andare oltre i 2048px (ad oggi) non porti un reale beneficio per la visualizzazione dei contenuti a meno di utilizzi speciali come banner o sfondi

NOTA: per verificare tutte le possibili dimensioni accettate si consiglia di controllare nelle line guida del portale di riferimento

 

Il segreto per avere delle buone immagini sul web è farsi piccoli!

Esattamente! E se ci pensate un attimo, è anche logico!

Farsi piccoli significa rendersi digeribili (rispolverando qualche termine culinario :P).

Più concretamente accadranno le seguenti trasformazioni:

● ProPhoto RGB (origine) > sRGB (destinazione)
● 16 bit (origine) > 8 bit (destinazione)
● RAW/TIF (origine) > JPG/PNG (destinazione)
● 6000px (origine) > 1640px (destinazione) (i valori in pixel sono a solo titolo di esempio)

 

Esportazione JPG con Adobe Camera RAW

 

Esportazione JPG con Lightroom

 

Esportazione JPG con Photoshop (Salva per Web CTRL+ALT+SHIFT+S)

 

Esportazione PNG con Photoshop (Salva per Web CTRL+ALT+SHIFT+S)

 

Esportazione JPG con Photoshop (Esporta come CTRL+ALT+SHIFT+W)

 

Esportazione PNG con Photoshop (Esporta come CTRL+ALT+SHIFT+W)

 

Riflessioni sul peso in megabyte delle nostre immagini

Volevo infine concludere mettendo un particolare accento su queste due problematiche:

● se vogliamo manatenere un peso contenuto ed un alto fattore di qualità, il valore dei pixel deve essere tendenzialmente basso o moderato
● immagini troppo pesanti (megabyte) potrebbero rendere il sito web lento e poco fruibile
● immagini troppo grandi (pixel) per rientrare in un peso accettabile (megabyte) potrebbero subire una forte compressione pregiudicando il fattore qualità
● immagini troppo pesanti e/o grandi potrebbero venir compresse dalla piattaforma in uso (vedesi alcuni plug-in per accelerare le pagine web in WordPress o anche dagli stessi algoritmi di Facebook)
● se vogliamo evitare che la nostra immagine possa esser utilizzata da terzi per scopi commerciali (illeciti), il valore dei pixel deve essere tendenzialmente basso o moderato

NOTA: io personalmente utilizzo un lato lungo di 1640px con un peso attorno agli 800kB sia per l’utilizzo sui social che sul sito web