Sorry! This content is copyright protect!
logo

Esportare le immagini per il web: profilo colore, dimensioni e formato

Come esportare correttamente 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

 

Gaspare Silverii

 

VUOI RIMANERE AGGIORNATO SUI MIEI CORSI?

Comments are closed.