Internet Explorer」タグアーカイブ

IE7で透過PNGの表示が汚い。なぜ?

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重いし。
いつか画像処理も詳しく勉強してみたいね。