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

Question

Verifique esta imagem:

NoChromeenoFirefox,eleseráexibidocomoumapera.Agora,tentesalvá-loeolheparaelesalvonasuaáreadetrabalho.Alémdisso,tentevisualizarem Safari ou Internet Explorer . Ele será exibido como uma maçã!

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

Por que isso acontece?

    

Answer 1

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

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

Aquiestáaimagemcorrigidaporgama.Ospixelsde"preto-ish" na imagem de pêra contêm a imagem de uma maçã, armazenada em uma intensidade razoavelmente normal, mas reduzida para quase preta com a correção gama.

Naminhatela,possoverapêrafracamenteentreospixelsbrancosnaprimeiraimagem,masnasegundaimagem,amaçãéindistinguíveldospixelspretosaoredordela.

(Vocêtambémpodeveralgumasfaixascoloridasnapêracorrigidaporgama,porqueaimagemnãocorrigidaestáusandoumafaixamuitomenordoscanaisdecores.)

OarquivodeimagemPNGcontémumblocogAMAespecificandoumvalordegamadearquivode0,02.Quandoexibidosemcorreçãodegama,oespectadorvêumamaçãcompixels"brancos" intercalados, que na verdade são a pêra na intensidade original (alta).

Quando exibido com correção de gama, o espectador vê uma pêra corrigida de cor com pixels "pretos", que na verdade são a maçã renderizada com um valor de gama muito menor.

Os navegadores que exibem a pêra estão realizando a correção de gama na imagem, enquanto os navegadores que exibem a maçã não estão executando a correção de gama, apenas exibindo-a com seus valores de cor literais.

    

Answer 2

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

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

O artigo A triste história da "correção" de PNG Gama fornece um resumo muito bom dos problemas, remédios, e outros fatos divertidos.

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

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

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

Eu realmente não diria que isso é "a resposta", mas se alguma coisa é provavelmente na direção certa. Tenho certeza de que alguém com muito conhecimento sobre perfis de cores e assim por diante virá junto com uma resposta mais formal.

    

Answer 3

Alterar o gama ( γ ) de uma imagem consiste em modificar o valor do 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 a aplicação da 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á um R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

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

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

Para uma gama grande, o segundo termo domina, de modo que você pode 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 mudar a gama do seu monitor (ou a curva gama específica que cada software usa).

    

Answer 4

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

É uma imagem de truque e alguns navegadores exibem PNGs sem dados de gama. Para esses navegadores, você vê uma coisa, e para outros navegadores, você vê a imagem completa (com a pêra escondida no fundo).

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

    

Answer 5

bem como é feliz, você pode ver mais detalhes em fotos com um display calibrado adequado e se o gamma / brilho / contraste for muito alto, você pode ver que a imagem na imagem é oculta mais