Por que essa imagem PNG é exibida de maneira diferente no Chrome e Firefox e no Safari e IE?

Confira esta imagem:

No Chrome e Firefox, ele aparecerá como uma pera. Agora, tente salvá-lo e veja-o salvo na sua área de trabalho. Além disso, tente visualizar no Safari ou no Internet Explorer . Ele será exibido como uma maçã!

Tente clicar na imagem e movê-la. Você notará que a maçã aparece.

Por que isso acontece?

Isso acontece porque alguns navegadores executam a correção gama conforme especificado no arquivo de imagem.

Aqui está a imagem não corrigida. Os pixels "branco-ish" na imagem da maçã contêm a imagem de uma pera, armazenada em uma intensidade muito maior, ou seja, muito brilhante.

Aqui está a imagem corrigida por gama. Os pixels "preto-ish" na imagem pêra contêm a imagem de uma maçã, armazenada em uma intensidade bastante normal, mas reduzida para quase preto com a correção gama.

Na minha tela, vejo a pêra fracamente entre os pixels brancos na primeira imagem, mas na segunda imagem, a maçã é indistinguível dos pixels pretos ao seu redor.

(Você também pode ver algumas faixas de cores na pera com correção de gama, porque a imagem não corrigida está usando uma faixa muito menor dos canais de cores.)

O arquivo de imagem PNG contém um pedaço de gAMA especificando um valor de gama de arquivo de 0,02. Quando exibido sem correção de gama, o visualizador vê uma maçã com pixels "brancos" intercalados, que na verdade são a pêra em sua intensidade (alta) original.

Quando exibido com correção de gama, o visualizador vê uma pera corrigida por cores com pixels "pretos" que são na verdade a maçã renderizada com um valor gama muito mais baixo.

Os navegadores que exibem a pera estão executando a correção gama na imagem, enquanto os navegadores que exibem a maçã não estão executando a correção gama, mas apenas exibindo seus valores literais de cores.

Isso foi um pouco demais para um comentário, mas espero que ajude.

Portanto, tenho certeza de que esse problema lida com a maneira como os navegadores interpretam as informações gama com PNGs. É um problema bastante divertido e lida com as ambiguidades da informação gama em primeiro lugar.

O artigo A triste história da PNG Gamma "Correção" fornece um resumo muito bom dos problemas, soluções e outros fatos divertidos.

Com isso dito, podemos remover as informações gama de uma imagem usando pngcrush

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB pear.png apple.png

Portanto, com as informações gama e sem elas:

Eu realmente não diria que essa é "a resposta", mas, se for o caso, provavelmente está na direção certa. Tenho certeza de que alguém com muito conhecimento sobre perfis de cores e assim por diante apresentará uma resposta mais formal.

Alterar o gama ( γ ) de uma imagem consiste em modificar o valor gama em:

(R ', G', B ') = (R ^γ , G ^γ , B ^γ )

que fornece a cor do pixel de saída (R ', G', B ') exibida na tela após aplicar a função gama aos valores iniciais de pixel (R, G, B) (considerando R, G e B normalizados entre 0 e 1 )

Agora, vamos pegar o canal vermelho, por exemplo.
Se R = R0 + R1 , você obterá
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Se R0 é muito maior que R1, você tem
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
então R '≈ R0 ^γ + γ R1 * R0 ^γ-1

Isso significa que, para gama próxima de 0, R0 ^γ domina. Para γ = 1, você obtém
R '≈ R0 + R1

Para uma gama grande, o segundo termo domina, para que você possa configurar diretamente R0 = componente vermelho da pêra e R1 = componente vermelho da maçã, com R0 muito maior que R1 e você obterá as variações desejadas ao alterar a gama de seu monitor (ou a curva gama específica que cada software usa).

Não são pixels arredondados e os perfis de cores ICC não são o problema.

É uma imagem de truque, e alguns navegadores exibem PNGs sem dados gama. Para esses navegadores, você vê uma coisa e, para outros navegadores, vê a imagem completa (com a pera escondida em segundo plano).

Eu vejo uma imagem de truque de maçã / pêra ou apenas a pêra, dependendo se o navegador suporta esses dados gama.

bem como acontece, você pode ver mais detalhes nas fotos com uma exibição calibrada adequada e, se a gama / brilho / contraste estiver muito alto, poderá ver a única imagem na imagem mais oculta