PNGの取扱い

昔からよく知られている問題なんだと思いますが、いままで「IEって画像の色が変だよね？　やっぱ、ダメだね、IE」くらいの認識しかなかった PNG画像の色ずれについて、少し調べてみたのでメモしておきます。

sample

この画像は、#658635という緑色の背景の上に、#658635の PNG画像が載っています。Firefoxや Chromeで見ると境目は見えないのですが、IEだと内側だけ少し濃く見えます。実際、カラーピッカーで色コードを採ってみると、#5A7C2Cという色になっています。
これがどうして起こるかというと、PNGファイルにはガンマ値(ガンマチャンク)という明るさを調整する値が記録されていて、ユーザがどのような環境で見ても同じような色に見えるような工夫がされているわけですが、この取扱いに IEは問題があるのではないかと。

大抵の Windowsマシンのガンマ値は 2.2で、Macは 1.8なので、Mac環境で作成した PNGにはガンマ値として 1.8が埋め込まれていて、その画像を 2.2の Windowsで見ると、Macで見るより少し暗くなると。
なるほど、そういうことならわかります。しかし、ここに表示している sample.pngは Windowsのペイントで作成したものですし、ファイルの中を見て埋め込まれたガンマ値を確認しましたが、2.2でした。だとしたら、Windows上の IEで「少し暗くなる」原因がわかりません。

sample1

やっぱり、IEのバグなんでしょうか。ガンマ値を削除すれば大丈夫かもしれませんが、そこまでやる積極的な理由もないので、と思いましたが、それを理由に PNGが使えなくなっても困りものなので、ガンマ値を削除してみました。どうでしょうか。同じ画像ですが、今度はきちんと境目が消えていると思います。
こういうバッドノウハウが早くなくなるといいですね。
　

■ 参考

/作成者: