Problema com cores de PNG no Internet Explorer
—-atualização—-
Solução para o problema documentado neste artigo: Solucao para problema de cores com PNG. Créditos para Vitorio Tadao Kuroda.
—-fim da atualização—-
Todos já sabem que o Internet Explorer 6 tem suas dificuldades com o formato de imagens PNG e que sua versão 7 supostamente superou isso, digo supostamente pois me deparei com um problema que irei documentar neste artigo.
Não sei se esse experimento já foi realizado anteriormente, mas enfim, o objetivo é analisar três arquivos de imagens com extensões diferentes totalmente preenchidos com a cor #2F3B6F. As extensões são PNG, JPG e GIF.
Se você usa o Internet Explorer (não importa a versão) já deve estar vendo a imagem em PNG com uma coloração diferente, mas para confirmar seguem capturas de tela. As imagens estão na mesma ordem que foram apresentadas acima, por CSS coloquei bordas para melhor visibilidade.
Firefox 2.0.0.1
Opera 9.10
Internet Explorer 6
Internet Explorer 7
É possível notar que nenhum dos navegadores interpreta a imagem PNG com perfeição mas os resultados no Opera e Firefox são toleráveis. Já o Internet Explorer apresenta um problema mais sério alterando bastante a cor original do arquivo.
Linke 26 de fevereiro de 2007 às 09:51
Nossa! Nunca tinha visto que poderia dar diferença na cor! Tem solução isso?
Att;
Linke
Emanuel Felipe 26 de fevereiro de 2007 às 16:00
Bom, até agora não achei solução alguma (e acho difícil que exista), apenas acho interessante evitar o uso do formato PNG (infelizmente, pois tem grandes vantagens).
Agradeçam mais essa a Microsoft ;)
Bruno Menegola 16 de março de 2007 às 00:24
Procurando por uma solução me deparei com o seu blog e infelizmente, como você disse, não podemos usar PNGs como gostaríamos. Minhas sinceras desculpas pelas palavras um tanto fortes mas eu adoraria que o Internet Explorer fosse pra p*** q pariu. Eu desenvolvo sites e sempre tenho que fazer n gambiarras para funcionar no IE. A Microsoft após copiar o Firefox e Ópera e lançar o IE7 para o “maravilhoso” Windows Vista, se esqueceu de copiar uma coisa: o suporte completo a PNG que nos outros funcionam! Nem para isso (copiar) a Microsoft serve.
Tive que buscar uma solução para esse problema pois eu precisava “casar” uma imagem PNG com outra JPG e as malditas cores ficavam diferentes. Resultado: como eu tinha um arquivo css específico para o IE criei um JPG com menos brilho (No Photoshop, reduza o brilho em torno de 11 unidades que se tornará semelhante as cores do PNG).
Então eu pergunto: Será que a Microsoft se esqueceu de colocar o suporte ao PNG no IE7 ou é uma tentativa de boicote a ele para lançar seu mais novo formato, o HD Photo?
Emanuel Felipe 16 de março de 2007 às 01:52
Acredito que eles nem saibam deste problema, pois ele ocorre igualmente em versões bem antigas do IE (lançadas muito antes de se pensar nesse tal HD Photo acredito).
Parece um bug (ou limitação) no engine do Internet Explorer que basicamnete renderiza o formato PNG de maneira errada. Acredito que uma solução para este problema está muito longe (isso se viermos a ter alguma).
Só nos resta tentar contornar os problemas com outros métodos e criticar a Micro$oft o máximo que pudermos.
Vitorio Tadao Kuroda 18 de março de 2007 às 05:53
hum…
não é bem por ai…
Um arquivo PNG carrega informações de correção de cores (GAMMA) pra que evite que ocorra distorções de cores nas imagens. Por ironia esse é um dos problemas encontrados na adoção desse formato.
O problema aparece do fato dos browsers tratarem tradicionalmente os valores RGB especificados no CSS (e HTML), GIF e JPEG de maneira idêntica. Já o PNG a informação GAMMA armazenada para usar o valor correto dos valores RGB não coincide com os outros elementos (css, gif, html…) pq nem todos os browsers interpretam essa informação da mesma maneira: alguns a ignoram completamente, enquanto outros aplicam um ajuste de GAMMA arbitrario.
O problema era bastante visível com o PHOTOSHOP 5.0
Isso mesmo meu caro… seu amigo photoshop dobrava o valor do gamma e deixava o png mais escuro, logo isso foi corrigido na versão 5.5.
Tá ai uma dica pra quem tá usando uma versão antiga do photoshop e tá se deparando com o problema.
“-Tá mas e daí… to usando o photoshop cs2 e o problema continua.”
OK… mas ai já não é problema no photoshop.
Pra tentar resolver…
é possível remover esse GAMMA do PNG assim os navegadores exibirão as imagens da mesma maneira que GIF´s JPEG´s … Mas isso não é bem verdade para todos os navegadores (SAFARI 1.3) uma outra alternativa seria tentar alterar valor do gamma offset, neste caso não tem jeito… vc só vai conseguir agradar um dos dois mais problemáticos com png´s (IE ou SAFARI 1.3).
Caso vc queira agradar o Safari 1.3 vai ter q usar o gamma offset de 0.5181347
No caso do IE o valor do gamma offset seria de 0,555555
(o Photoshop´s acima da versao 5.0 salvam o gamma offset com 0,45000)
Na boa…
eu fico com a primeira solução…
tem muita gente usando o IEca (é muito leigo pra um planeta só)
apaga a informação gamma dos PNG´s e manda os usários do SAFARI 1.3 pra merda (foi mal tio Jobs).
“-vai embora sem ajudar?”
Opa…
pra quem quiser remover o gamma das imagens png´s
TweakPNG (sim é FREE) http://entropymine.com/jason/tweakpng/
É assim q usa…
usa o TweakPNG pra abrir a imagem (Não Kra! isso não é um visualizador), irão aparecer as informações do PNG. Procura o “gamma” clica com o botao direito e delete a informação, ai é so salva e pronto.
Pro corajoso q vai ficar editando o gamma offset:
-Larga mão de ser besta e cria uma Action logo na primeira vez.
Emanuel Felipe 18 de março de 2007 às 17:13
Vitorio, parabéns. Até agora ninguém tinha a menor idéia de como escapar deste problema.
Realizarei o mesmo experimento novamente, mas desta vez aplicando as correções citadas, e é claro, documentarei tudo aqui no blog.
Obrigado pela participação.
Emanuel Felipe 20 de março de 2007 às 22:56
Então Vitorio, utilizei o programa indicado para alterar o valor do gamma. A imagem ficou mais clara (como era de se esperar) mas o Internet Explorer continua interpretando a cor de maneira errada (pelo menos diferente de todos os outros navegadores).
Talvez eu possa ter feito algo errado, se possível seria interessante que você pegasse os arquivos utilizados nesse experimento e tentasse a correção você mesmo.
Uma solução concreta e documentada seria muito bem vinda.
Vitorio Tadao Kuroda 21 de março de 2007 às 14:52
Provavelmente vc fez algo errado
-salvou a alteração na imagem (depois de deletar o gAMMA)?
-limpou o cache? (tentou usar o Ctrl F5)?
-no exemplo fornecido no blog a imagem (png_hex_2f3b61.png) e diferente do código postado (png_hex_2f3b6f.png)
aqui esta o mesmo exemplo:
http://www.id3d.com.br/tweakPNG/
Emanuel Felipe 21 de março de 2007 às 16:37
Realmente devo ter feito algo errado, pois no seu exemplo as cores estão corretas tanto no Internet Explorer 7 quanto no 6.
Documentarei ainda hoje essa solução aqui no blog.
Obrigado pela ajuda, você terá os devidos créditos =]
Denilson F. de Sá 24 de janeiro de 2008 às 02:13
Cara, você não deveria usar JPGs para os screenshots. Como você deve saber, ou deve ter percebido, JPG é um formato de compressão “lossy”, ou seja, ele “perde” um pouco da qualidade ou da informação original, de modo a tornar a compressão viável.
Existem explicações matemáticas de por quê isto acontece, analisando o algoritmo do JPG (que baseia-se em expansão em séries)… Mas, na prática, pode-se saber que o JPG comprime muito bem imagens com transições suaves, imagens com uma quantidade muito grande de cores… Bem, resumidamente, fotos (e refiro-me a fotos “do mundo real”). Para imagens com muitas cores sólidas e transições abruptas de cor (como é o caso, em geral, de screenshots), o formato JPG deixa a imagem mais feia, às vezes com cores um pouco alteradas, e adiciona muito ruído (noise) próximo às áreas de transição abrupta de cor (faça um zoom nos screenshots que você vai perceber isso).
O formato mais adequado para screenshots, na minha opinião, é o PNG. Mas, se os screenshots falam de “bug” no PNG, é estranho usá-lo para o próprio screenshot. Por outro lado, o JPG vai adicionar ruído indesejado, tornando uma análise melhor das cores inviável. GIF, sem dúvida, está fora de questão, pois suporta apenas uma paleta com 256 cores.
Por fim, vou aproveitar e sugerir mais uma ferramenta para trabalhar com PNGs: optipng é um programa que analisa o arquivo PNG e tenta recodificá-lo para torná-lo menor, mas mantendo todos os pixels intactos (ou seja, não muda a qualidade nem muda as cores, só tenta mudar a forma como salva isso tudo). Esse programa é uma versão melhorada do pngcrush
Nunca usei a versão para windows, mas deve funcionar por linha-de-comando, digitando isto: optipng -o7 arquivo.png (é melhor ler a documentação para saber do que ele é capaz)
Este programa não vai mexer nos meta-dados do PNG (ele não vai remover coisas como gamma ou comentários) e, portanto, não “serve” para resolver o problema descrito neste blog. Por outro lado, algumas vezes a economia de tamanho pode ser bastante generosa. (acho que o Photoshop não exporta PNGs muito bem, mas posso estar enganado)
Emanuel Felipe 24 de janeiro de 2008 às 09:04
Denilson, concordo plenamente com o que você diz. Sem dúvidas PNG é o melhor formato para screenshots e tantos outros usos na web, o problema está na sua interpretação errada pelo Internet Explorer (mas como postado acima, existe uma solução para isso).
No exemplo acima o erro é tão visível que pequenas alterações na qualidade da imagem não modificam a interpretação, e também o exemplo real está disponível para quem quiser ver com os próprios olhos.
Mas obrigado pela participação e pela dica do programa, sem dúvidas vou procurar conhecê-lo melhor.
Abraço
Vitorio Tadao Kuroda 17 de março de 2008 às 17:09
Legal o optiPNG, o uso dele seria bem mais util dentro de um PROGRAMA, quando PNG´s não rasterizadas não são interessantes.
Esse tipo de utilidade já existem em programas que trabalham com PNG. Photoshop (save for web), Fireworks (aba optimize).
Particularmente o Fireworks salva junto com os PNG´s, informações de camadas, como se fossem os PSD´s do Photoshop. Quando os PNG´s são exportados ocorre um RASTERIZE nas camadas (só vai exportar 1 camada) seguindo as opções escolhidas na aba OPTIMIZE (em outras palavras: vai achatar a imagem). Se alguem utiliza os Png´s não otimizados sem intenção de fornecer a imagem fonte, tá fazendo cáca (isso é coisa de estagiário).
O photoshop já ABRE o PNG rasterizado, não tem opção pra manter essas informações.Quem usa o photoshop, sabe q se abrir um arquivo do PNG do fireworks e salva-lo, estará descartando as informações do Fireworks (Vai ter designer querendo seu pescoço. Corre estagiário, mas corre muuuito).
Vitorio Tadao Kuroda
Solucao para problema de cores com PNG - Emanuel Felipe .NET 2 de abril de 2008 às 07:31
[...] sem solução, apareceu uma forma de eliminar o problema documentado no artigo “Problema com cores de PNG no Internet Explorer“. Quem explicou a causa do problema e apresentou uma solução foi Vitorio Tadao [...]
Evandro Araujo 21 de agosto de 2008 às 18:39
Pois é caros amigos,
Não me deparei a toa seu blog, pois eu estava pesquisando justamente isso na esperança de encontrar uma solução; mas pelo visoto, acho que vou ter que mudar toda a estrutura do meu site…
Abraços a todos.
Evandro Araujo.
Max 23 de abril de 2010 às 16:01
Tive esse mesmo problema… não sabia se estava fazendo algo errado ou era bug do navegador mesmo!
Não sabia que o problema era do PNG… obrigado pelo post foi bastante esclarecedor!