Q: IE7で透過PNGが汚いことがあります。なぜですか?
A: 「gAMAチャンク」あるいは「補助チャンクのどれか」が、変な値になっている可能性がある。
PNGファイルの構造について。
PNGファイルの構造
├ 識別部
└ 本体部
├ 標準チャンク
│ ├ 基本チャンク
│ │ └ IHDR PLTE IDAT IEND
│ └ 補助チャンク
│ ├ cHRM gAMA sBIT sRGB iCCP
│ ├ bKGD hIST tRNS pHYs sPLT
│ └ tIME tEXt zTXt iTXt
└ 付加チャンク
└ 公式登録チャンク
├ oFFs pCAL sCAL
└ gIFg gIFt gIFx fRAc
PNGの内部は「チャンク」という項目に分かれていて、画像情報だけでなく「その他情報」を持つ事ができる。
“gAMAチャンクの問題”。gAMAチャンクとは画像のガンマ値の設定部分のこと。
今回の問題は特定の画像編集プログラムが、変なガンマの値をgAMAチャンクに書き込むことによって生じる。
つまり、これを解決するには、gAMAチャンクを削除すればokってことだ。
そのへんにツールが転がっているはずだから、ワンタッチで修復できるだろう。
因みに、gAMAチャンクがない場合はγ=2.2として描画されるから削除しても大丈夫。
Wikiにもその記述がある。
Internet_Explorer
また、Internet Explorerの不具合ではないが、Photoshopで作成したPNGファイルが正常に表示できないことがある。これはPhotoshopが書き出す PNGファイルに問題(gAMAチャンク情報への記述)があるためであるが、Firefoxでは正常に表示されることからInternet Explorerの不具合と勘違いすることがある。正常に表示させるためにはPNG画像内のgAMAチャンクを削除するとよい。
(図) PNGをバイナリエディタで開いた。
青い部分がgAMAチャンク部”0000AFC8″。これは正常値のγ=2.2。macで制作した場合は1.8になる。
自分の場合、pngはできるだけ使わないようにしている。
上のようなややこしい原因を調べなきゃならないし、それにpng重いし。
いつか画像処理も詳しく勉強してみたいね。