Perché i colori delle mie immagini sembrano diversi sul mio sito?

Confronta tre versioni della stessa immagine

Una foto sembra corretta nell'editor, ma i suoi colori cambiano sul sito. Potresti essere tentato di schiarirla o rendere i colori più vivaci. Prima verifica se il problema riguarda l'immagine, la pagina o lo schermo.

Confronta l'originale, la copia salvata per il sito e l'immagine effettivamente mostrata dal sito. Salvare una copia finita da un editor si chiama spesso esportare. Il sito può poi creare una propria versione ridotta o compressa.

1. Conserva l'originale. Usa come riferimento la fotografia originale o il file di progetto modificabile. Lavora su copie per poter tornare all'originale.
2. Controlla la copia salvata. Aprila nell'editor accanto all'originale. Trascina anche il file in una scheda del browser per vedere come viene visualizzato.
3. Controlla la versione del sito. Da un computer, fai clic con il tasto destro sull'immagine della pagina pubblicata e cerca Apri immagine in una nuova scheda o un'opzione simile. Più avanti trovi i passaggi da seguire se l'opzione manca.
4. Confronta la stessa zona. Usa lo stesso schermo, dimensioni di visualizzazione simili e uno sfondo simile. Scegli un'area in cui la differenza è evidente, come il tessuto di un prodotto o una superficie a tinta unita del logo.

Per il momento non cambiare luminosità e altre impostazioni dello schermo. Guardare un'immagine sul telefono e l'altra sul portatile rende più difficile distinguere l'effetto del file da quello dello schermo.

Scegli il prossimo controllo in base alla differenza

Che cos'è un profilo colore e perché è importante?

Un'immagine memorizza i colori come numeri. Un profilo colore indica all'applicazione come devono essere visualizzati quei numeri. Se viene salvato nel file dell'immagine, si chiama profilo incorporato. Puoi trovare anche il nome profilo ICC, che si riferisce allo standard usato per questi profili. Le domande frequenti dell'International Color Consortium spiegano come funzionano.

sRGB è un sistema molto usato per definire i colori delle immagini sul Web. Puoi immaginarlo come un insieme condiviso di istruzioni per i colori. È una scelta pratica per fotografie e illustrazioni comuni visualizzate su molti dispositivi. Adobe RGB e Display P3 definiscono gamme di colori diverse e più ampie.

Se le informazioni sul colore mancano o vengono lette male, un'applicazione può mostrare l'immagine in modo diverso. Un profilo mancante, però, non rende automaticamente il file sbagliato. Un'immagine già preparata per sRGB può comunque apparire come previsto. Il problema nasce quando si presumono istruzioni errate per i suoi colori. Consulta la spiegazione di Adobe sui profili delle immagini.

Anche lo schermo ha un proprio profilo, che descrive come riproduce i colori. Non confonderlo con il profilo dell'immagine: il profilo del tuo monitor non è quello da allegare a tutte le immagini destinate ai visitatori.

Converti i colori invece di cambiare solo il profilo

Gli editor possono offrire sia Assign Profile (assegna profilo) sia Convert to Profile (converti in profilo). Sono operazioni diverse:

• Assegnare un profilo dà un'altra interpretazione ai numeri di colore esistenti. I numeri restano uguali, ma l'immagine può cambiare aspetto.
• Convertire in un profilo adatta i numeri alle nuove istruzioni di colore, cercando di mantenere l'aspetto dell'immagine.

Per creare una copia sRGB da un'immagine Adobe RGB il cui profilo è stato identificato correttamente, usa la conversione. Assegnare soltanto sRGB può cambiare i colori. Alcuni colori molto vivaci non possono essere riprodotti esattamente nella gamma più limitata di sRGB, quindi controlla il risultato. Le istruzioni di Adobe sui profili descrivono entrambi i comandi.

Se il profilo originale è sconosciuto, cerca il file di progetto originale o chiedi a chi lo ha creato. Non scegliere un profilo solo perché rende l'immagine più colorata. L'editor può aver presunto un profilo all'apertura del file. Quello che indica ora non dimostra quindi quale profilo sia stato usato per creare l'immagine.

Salva una copia sRGB per il Web

Per una normale foto o illustrazione del sito, crea una copia sRGB separata e conserva l'originale. Serve un editor che supporti la conversione dei colori, come Photoshop. Altri programmi possono offrire Convert to sRGB nelle impostazioni di esportazione. I nomi dei menu di Photoshop riportati qui sono quelli dell'interfaccia inglese.

1. Controlla il profilo dell'originale. Cerca le impostazioni colore del documento. In Photoshop apri Edit → Convert to Profile e leggi Source Space. Se l'applicazione segnala un profilo mancante, verifica le impostazioni del file originale o chiedi al suo autore invece di scegliere un profilo a caso.
2. Scegli sRGB per la copia. Nella finestra di conversione di Photoshop, seleziona sRGB IEC61966-2.1 come destinazione. Attiva Preview per controllare il cambiamento, poi conferma. Adobe fornisce la procedura completa per Photoshop.
3. Salva o esporta la copia. Se trovi Embed Color Profile, incorpora il profilo sRGB corrispondente. La conversione modifica i numeri di colore; incorporare il profilo salva le istruzioni per leggerli.
4. Riapri il file salvato. Controllalo nell'editor e nel browser prima di caricarlo. Usa un nome diverso per riconoscere la nuova copia.

Se l'editor non ha controlli per i profili colore, consulta la documentazione su come esporta i colori. Chiedi al designer una copia sRGB per il Web se non puoi verificare le impostazioni da solo.

Scegli il formato del file separatamente. JPG è spesso adatto alle foto; PNG può essere utile per la grafica con sfondo trasparente. La nostra guida ai formati immagine per il Web spiega le opzioni. Passare da JPG a PNG non corregge da solo informazioni di colore errate.

Controlla se il sito modifica l'immagine

Se il file salvato sembra corretto ma l'immagine del sito no, verifica cosa succede dopo il caricamento. Un sistema per creare siti, un'estensione o un servizio di distribuzione può ridimensionare, comprimere o cambiare il formato dell'immagine.

Parti dall'immagine aperta nella propria scheda. Salva quella copia sul computer e confrontala con il file caricato, nello stesso editor. Dimensioni più piccole non dimostrano un problema di colore, ma indicano che potresti confrontare versioni diverse.

Se non riesci ad aprire direttamente l'immagine

Gli strumenti per sviluppatori del browser mostrano quale file carica la pagina. È più semplice farlo su un computer:

1. Apri la pagina e cerca Strumenti per sviluppatori o Developer tools nel menu del browser, spesso sotto Altri strumenti.
2. Scegli la scheda Network o Rete e ricarica la pagina. Apparirà l'elenco dei file caricati.
3. Usa il filtro delle immagini, in genere chiamato Img o Images. Seleziona un file e guarda Preview o Anteprima per trovare la tua immagine.
4. Fai clic con il tasto destro sulla sua riga e scegli Apri in una nuova scheda, se disponibile. Altrimenti copia il suo indirizzo Web, detto anche URL, in una nuova scheda. Salva l'immagine per il confronto.

La guida al pannello Network di Chrome illustra questi strumenti. Nomi e disposizione dei menu possono variare in base al browser e alla lingua.

La pagina può scegliere file diversi nelle visualizzazioni per telefono e computer. La guida alle immagini responsive spiega questo comportamento.

Se non gestisci le impostazioni tecniche del sito, invia il file caricato e la copia del sito alla persona che se ne occupa. Chiedile di verificare se l'elaborazione rimuove il profilo colore o converte i colori in modo errato. Dopo la correzione, potrebbe essere necessario ricreare le versioni delle immagini e svuotare la cache, che conserva file generati in precedenza. Assicurati di vedere la nuova versione.

Le informazioni di colore sono diverse dai dati privati, come la posizione GPS di una foto. Eliminare tutti i metadati, cioè le informazioni salvate insieme all'immagine, può rimuovere anche il profilo colore. Quando crei una copia da condividere, controlla sia la privacy sia l'aspetto. La guida ai metadati delle foto descrive il processo.

Controlla gli effetti della pagina e lo sfondo

Se l'immagine del sito sembra corretta nella propria scheda ma diversa nella pagina, la pagina potrebbe modificarne l'aspetto. Prova i temi chiaro e scuro e verifica se l'immagine cambia quando ci passi sopra con il puntatore.

• Effetti su colori o luminosità: un tema può scurire le immagini, attenuarne i colori o renderle grigie. Questi effetti sono spesso chiamati filtri. La documentazione MDN di filter mostra come agiscono.
• Trasparenza parziale: l'immagine o la sezione che la contiene può lasciare intravedere lo sfondo, facendo sembrare i colori sbiaditi. Questa impostazione si chiama opacità. Può influire sull'immagine anche quando viene applicata alla sezione; vedi la spiegazione di opacity su MDN.
• Uno strato sopra l'immagine: una sovrapposizione colorata o un effetto al passaggio del puntatore può dare una tinta all'immagine senza modificarne il file.
• Uno sfondo diverso: le aree trasparenti o parzialmente trasparenti si mescolano allo sfondo della pagina. Anche i colori opachi possono sembrare diversi se circondati da bianco o da grigio scuro.

Confronta un'immagine trasparente sullo stesso sfondo usato nel progetto. Se sembra sbagliata solo su uno sfondo particolare, rivedi il design per quella posizione. La guida agli sfondi trasparenti spiega le possibilità.

Cerca gli effetti immagine nell'editor della pagina o nelle impostazioni del tema. Se serve aiuto, spiega allo sviluppatore che l'immagine da sola appare corretta e chiedigli di controllare filtri, opacità e sovrapposizioni. Può disattivare temporaneamente singole regole di stile per individuare la causa. La guida MDN al debug CSS illustra il metodo.

Confronta gli schermi in condizioni simili

Se lo stesso file appare diverso su due schermi, non modificarlo mentre controlli i display. Luminosità, luce nella stanza e caratteristiche dello schermo influiscono su ciò che vedi.

Disattiva temporaneamente le funzioni che cambiano volutamente l'aspetto del display. Night Shift di Apple rende lo schermo più caldo; True Tone adatta colore e intensità alla luce ambientale. Consulta la guida alle impostazioni dello schermo di Apple. Su altri dispositivi cerca il filtro della luce blu, la modalità notte o una modalità con colori vividi.

Se l'intera pagina appare più calda o vivace allo stesso modo, parti dalle impostazioni del display. Se cambia solo una foto, torna alle sue informazioni colore e verifica se è HDR, come spiegato nelle domande frequenti.

Quando il tuo lavoro richiede colori di prodotto affidabili, uno schermo calibrato offre un riferimento migliore. La calibrazione regola il display rispetto a un obiettivo noto; il profilo dello schermo descrive come riproduce i colori. Le domande frequenti dell'ICC spiegano questi ruoli. Preparare correttamente l'immagine aiuta la coerenza, ma non rende identici tutti gli schermi dei visitatori.

Esempio: una foto di prodotto sembra spenta nel browser

Immagina una foto di prodotto il cui file originale ha un profilo Adobe RGB noto. Nell'editor sembra corretta, ma la copia salvata appare spenta nel browser. È un esempio ipotetico: perdere un profilo non produce lo stesso effetto su tutte le immagini.

1. Trova la prima differenza. Il file salvato cambia già prima del caricamento, quindi parti dalle impostazioni di esportazione.
2. Controlla cosa è stato salvato. In questo esempio, l'esportazione ha rimosso il profilo Adobe RGB senza convertire i colori in sRGB.
3. Crea una nuova copia dall'originale. Convertila in sRGB e salva le informazioni di profilo corrispondenti.
4. Confronta prima di caricare. Apri la nuova copia nell'editor e nel browser sullo stesso schermo.
5. Controlla anche il sito. Carica la copia e confronta l'immagine che la pagina usa realmente.

Aumentare la saturazione rende i colori più vivaci. Potrebbe migliorare la prima esportazione in un'applicazione, ma renderla troppo colorata in un'altra. Correggere l'esportazione affronta la causa e conserva l'utilità dell'originale per altri scopi.

Usa Pixilo quando i colori sono corretti

Quando la copia salvata ha i colori desiderati, usa Pixilo per adattarne le dimensioni alla pagina o ridurre le dimensioni del file. Conserva la copia preparata per confrontarla con il download.

Pixilo offre ridimensionamento e compressione, ma non controlli per riparare o scegliere i profili colore. Nel ridimensionamento e in molte conversioni di formato, il browser ridisegna l'immagine. Se devi conservare caratteristiche Display P3 o HDR, verifica attentamente il risultato: non tutte le operazioni le mantengono necessariamente.

Inizia con un'immagine prima di elaborarne molte. Confronta colori e dettagli importanti dopo il download, poi controlla il risultato pubblicato. Se la differenza appare solo dopo il caricamento, esamina l'elaborazione del sito o gli effetti della pagina.

Domande frequenti

Devo sempre convertire le immagini Display P3 in sRGB?

No. Display P3 permette una gamma di colori più ampia e può essere utile quando il sito e i dispositivi dei visitatori lo supportano. Se non sai come il sito lo gestisce, una copia sRGB è un punto di partenza più semplice per la pubblicazione ordinaria. Conserva l'originale. WebKit spiega come le immagini con profilo vengono adattate al display.

Perché le parti più luminose della foto del telefono si attenuano?

L'originale può essere HDR, da high dynamic range, cioè alta gamma dinamica. Consente una differenza maggiore tra aree scure e luminose. Una copia standard potrebbe non conservare quell'aspetto. Cerca un'opzione di esportazione per la gamma dinamica standard, talvolta chiamata SDR. L'editor può chiamare l'adattamento tone mapping: riportare la luminosità HDR entro la gamma standard. Esamina soprattutto luci e ombre. Cambiare solo il profilo colore non svolge questa funzione. La panoramica HDR di WebKit spiega la capacità del display.

PNG garantisce colori corretti?

No. PNG può conservare invariati i valori dei pixel salvati, ma l'applicazione deve comunque interpretarli correttamente. Cambiare formato non ripara un profilo colore errato o sconosciuto.

Cosa faccio se il designer mi invia un'immagine CMYK?

CMYK usa ciano, magenta, giallo e nero per la stampa. RGB usa rosso, verde e blu per le immagini a schermo. Chiedi una copia sRGB separata per il Web o creala in un editor con conversione colore. Conserva l'originale per la stampa. La guida Adobe alle modalità colore spiega la differenza.

Perché il logo non corrisponde al codice colore della pagina?

Un codice come #336699 è un codice esadecimale; su una pagina Web descrive un colore sRGB. Un logo preparato con istruzioni colore diverse potrebbe non corrispondere. Controlla anche trasparenza ed effetti della pagina. Confronta una zona a tinta unita dentro il logo: lungo i bordi possono esserci pixel parzialmente trasparenti. La documentazione MDN dei colori esadecimali spiega la notazione.