Image rendue avec des couleurs incorrectes dans IE8

Question

J'ai une image dégradée en tant que PNG (pas de transparence) dans une page Web. En prenant une capture d'écran de Chrome montrant la page et recadrant l'image de la page, je vois exactement les mêmes couleurs sont dessinées que l'image contient ... mettre la capture d'écran à côté de l'image dans Paint et ils sont identiques.

Mais quand je fais la même chose avec la page rendue dans IE8, les couleurs sont différentes. Je pensais qu'initialement IE8 devait recadrer les bords et l'étirer, mais ce n'est pas le cas ... IE8 est le rendu des couleurs qui ne sont pas dans l'image d'origine, comme s'il y avait un filtre au-dessus de l'image.

Tout le monde a des idées pourquoi et comment je peux résoudre ce problème? Le point est que j'ai un fond rempli de couleur solide, et l'image de gradient est conçu pour se fondre parfaitement avec cela ... un côté de l'image est la même valeur RVB que l'arrière-plan de la page. Évidemment, si l'image n'est pas dessinée correctement, vous voyez un effet de bord méchant.

Answer 1

Ce n'est que légèrement différent, non? Mais assez pour voir la différence? C'est parce que les fichiers PNG stockent généralement des informations gamma correction, ce qui était censé être une bonne idée, mais ne l'est pas en réalité: The Sad Story of PNG Gamma “Correction”.

La meilleure façon de le fixer est de supprimer cette information gamma de la PNG, et toutes les autres informations relatives à l'espace couleur en fait. C'est tout stocké dans les gAMA, sRGB, cHRM et iCCP morceaux.

Plusieurs utilitaires peuvent le faire, par exemple Pngcrush et Pngout. Il y a beaucoup plus de ces outils autour, certains avec plus de fonctionnalités que d'autres, et certains plus conviviaux que d'autres, mais vous devriez être capable de les trouver vous-même maintenant.

The PNG Gamma Dilemma résume genre de ce premier article, et donne quelques informations d'utilisation pour Pngcrush.