Quale profilo colore conviene usare per le immagini web?

sRGB è lo standard del web. È supportato da tutti i browser e viene assunto quando non è incorporato alcun profilo. Usarlo offre la resa più uniforme tra dispositivi e piattaforme.

Perché gli screenshot appaiono diversi su un altro monitor?

I monitor hanno gamme cromatiche e calibrazioni diverse. Se uno screenshot viene acquisito con una gamma ampia, come Display P3, e visualizzato su un monitor sRGB, i colori possono apparire meno saturi o spostati perché lo schermo non riproduce l'intera gamma.

Qual è la differenza tra sRGB e Display P3?

sRGB copre circa il 35% dei colori visibili ed è lo standard web da decenni. Display P3 copre circa il 25% di colori in più, con rossi, verdi e arancioni più vividi. I dispositivi Apple moderni e molti monitor di fascia alta lo supportano.

PNG e JPEG supportano i profili colore?

Sì. Entrambi possono incorporare profili ICC nei metadati. PNG li conserva senza perdita, mentre JPEG usa i normali campi dei metadati. Alcuni strumenti di ottimizzazione, però, li eliminano e possono causare variazioni cromatiche.

Conviene eliminare i profili colore per ridurre il file?

Si risparmiano in genere soltanto 3-5 KB e i browser interpreteranno l'immagine come sRGB. Se è stata creata con un altro profilo, i colori verranno resi male. Elimina il profilo solo da immagini già convertite in sRGB.

Che cos'è Profilo colore? | Glossario

Un profilo colore è un insieme di dati che definisce come interpretare e mostrare i colori di un'immagine, per mantenere una resa coerente tra schermi, browser e dispositivi di stampa.

Profili colore comuni

I profili colore, formalmente profili ICC, mappano i colori di un'immagine in uno spazio standard. I tre più rilevanti per screenshot e immagini web sono:

sRGB (Standard Red Green Blue) è lo spazio predefinito del web. Creato nel 1996 da HP e Microsoft, copre circa il 35% dello spettro visibile. Tutti i browser, sistemi operativi e display moderni lo supportano. Se un'immagine web non contiene un profilo, il browser assume sRGB.

Display P3 offre una gamma più ampia ed è usato dai dispositivi Apple, come iPhone, iPad e Mac con display Retina, oltre che da un numero crescente di monitor di fascia alta. Copre circa il 25% di colori in più rispetto a sRGB, con rossi, verdi e arancioni più vividi. Sull'hardware compatibile, macOS acquisisce gli screenshot in Display P3.

Adobe RGB copre un intervallo simile a Display P3, ma dà più spazio alle tonalità ciano-verdi. Viene usato soprattutto nella fotografia per la stampa e nei flussi di prestampa. Raramente serve per gli screenshot web, ma può comparire nelle immagini provenienti da fotocamere professionali.

La relazione tra questi profili è importante: un'immagine Display P3 contiene colori che sRGB non può rappresentare. Su un monitor sRGB, se manca una conversione corretta, i colori fuori gamma vengono limitati e le tonalità risultano meno sature o spostate.

Perché i profili contano negli screenshot

Gli screenshot ereditano il profilo dello schermo su cui vengono acquisiti. Su un Mac moderno è spesso Display P3; sulla maggior parte dei computer Windows, sRGB.

Uno screenshot acquisito su Mac in Display P3 può quindi apparire leggermente diverso su un computer Windows con display sRGB. I colori più vividi della gamma P3 vengono adattati alla gamma più stretta e possono perdere saturazione.

Quando si condividono screenshot in documenti, revisioni di design o presentazioni, questa differenza può creare confusione. Il designer vede fedelmente i colori del marchio sul proprio monitor, mentre il cliente ne osserva una versione leggermente diversa.

Gli strumenti automatici eseguiti in browser headless sui server usano in genere sRGB, producendo risultati uniformi indipendentemente dal monitor di chi avvia l'acquisizione. Il rendering lato server evita così le differenze dovute ai profili.

Profili colore e web

I browser moderni gestiscono i colori: leggono i profili ICC incorporati e convertono le tonalità per lo schermo corrente. Un'immagine Display P3 appare quindi correttamente su monitor P3 e sRGB, purché il profilo sia presente e il browser supporti la gestione del colore.

CSS supporta funzioni per le gamme ampie: color(display-p3 1 0.5 0) definisce direttamente un colore nello spazio P3. La media query color-gamut permette di rilevare se lo schermo supporta una gamma ampia e di servire le risorse adatte.

Per la maggior parte dei contenuti web, sRGB resta la scelta più sicura. È universale, non richiede configurazioni particolari e produce risultati prevedibili. Display P3 offre maggiore ricchezza sui display compatibili, ma va gestito con cura per evitare variazioni sui monitor standard.

Nelle revisioni ripetibili

I profili diventano un problema pratico quando più persone controllano la stessa acquisizione su hardware diverso. Se una persona esporta screenshot ad ampia gamma da un Mac P3 e un'altra li confronta su un display sRGB, è facile discutere di differenze che dipendono soltanto dagli schermi. Regole comuni per acquisizione ed esportazione eliminano questo rumore e rendono la revisione più affidabile.

Errori comuni

Mescolare profili nello stesso progetto. Immagini sRGB e Display P3 nello stesso documento possono avere una resa incoerente. Scegli un profilo, di solito sRGB per il web, e converti tutte le risorse.
Eliminare i profili durante l'ottimizzazione. Alcuni strumenti rimuovono i profili ICC per ridurre il file. Se la sorgente è Display P3, il browser la interpreterà come sRGB e i colori perderanno saturazione.
Ignorare i profili nei confronti tra screenshot. Test visivi su hardware diverso possono segnalare false differenze. Usa lo stesso profilo e le stesse condizioni di rendering.
Pensare che tutti i monitor mostrino gli stessi colori. Anche con profili corretti, la calibrazione varia. Un'immagine perfetta su un monitor professionale può apparire diversa su un portatile economico. Standardizza i profili e ricorda che la precisione dipende anche dall'hardware.

Profilo colore