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


Verifique esta imagem para fora:

Apple or Pear

No Chrome e no Firefox, ele será exibido como uma pêra. Agora, tente salvá-lo e olhe para ele salvo na sua área de trabalho. Além disso, tente ver em Safári 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?


663


origem


se eu tentar arrastar a imagem no firefox só um pouquinho, a imagem arrastada de forma transparente fará a forma da maçã aPear - ajax333221
Como você criou esta foto? Você pode me apontar para um site? - tumchaaditya
Para futuros leitores, isso parece ser corrigido nas versões atuais do IE. - Kat
Mas você ainda pode baixá-lo para o seu desktop e ver a Apple lá, e visualizá-lo no Firefox, Chrome como pêra. - Jet


Respostas:


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.

Aqui está a imagem corrigida por gama. Os pixels "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.

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

(Você também pode ver algumas faixas de cores na pêra corrigida por 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 bloco gAMA especificando um valor de gama de arquivo de 0,02. Quando exibido sem correção de gama, o espectador vê uma maçã com pixels "brancos" intercalados, que na verdade são a pêra na sua 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 em 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.


524



Uma leitura recomendada sobre o tema: o famoso artigo de Eric Brasseur chamado "Erro de gama na escala da imagem. - ulidtko
@ulidtko Isso é agora um 404. Aqui está um cópia no arquivo da Web. - Cole Johnson


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

Portanto, tenho quase certeza de que essa questão 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 do PNG Gamma "correção" fornece um resumo muito bom dos problemas, remédios e outros fatos divertidos.

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

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

Então, com a informação gama e sem ela:

pear an apple

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.


227



essas duas imagens parecem as mesmas para mim, piscando entre a maçã e a pêra como o original da pergunta. Estou usando o Safari 6.0.2 - Fraser Graham
Observe que os dois últimos elementos do comando fornecidos aqui são infile e outfile: por exemplo. pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png. Mais informações: hsivonen.fi/png-gamma - fredrivett


Mudando o gamma (γ) de uma imagem consiste em modificar o valor gamma em:

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

que dá a cor do pixel de saída (R ', G', B ') exibida na tela depois de 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.
E se R = R0 + R1 , você obterá
R '= (R0 + R1)γ = R0γ * (1 + R1 / R0)γ

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


40





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 eu apenas vejo a pêra, dependendo se o navegador suporta esses dados de gama.


9





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


1