サイト運営者向けの情報です。

PNG形式で画像を用意していると、IEとそれ以外のブラウザで微妙に色が異なる現象が発生しますが、そんな現象が発生した場合の決方法です。

ひとつのブラウザしか利用していない人には「???」な解説になっています。
是非ともIEとそれ以外のブラウザ、2種類でこのページを確認して下さい。

概念図

画像を作成するツールによっては(当方の場合PhotoShop)PNG形式の画像は(全く同じ画像なのに)IEで表示した時とFirefoxやOperaなどで表示した場合で、微妙に色が異なる現象が結構な頻度で発生します。

これで以前からかなり悩んでいたのですが、どうやらPNG画像をBlastPNGで最適化してやるだけでほぼ解決しそう。

注意:
フルカラーPNGを減色処理しちゃうと別の問題で色が変わっちゃいます。
あくまでも256色以下のPNG画像を最適化した場合のお話です。

確認画像

本当に微妙な違いです。
でもサイトの背景画像に利用した場合などには、違和感を覚えるレベルです。

最適化前最適化後

最適化前最適化後
▲左右は同じ画像です。
  ・IE6~8を利用した場合: 左右の画像は違う色に見える。
  ・それ以外のブラウザ : 左右の画像は同じ色に見える。

 「最適化前」と「最適化後」の画像、作成時の色指定は全く一緒。
 「最適化後」は同じ画像を作成後にBlastPNGで最適化処理しただけ。
上記4枚の画像をIEと他ブラウザで見ると一目瞭然。

BlastPNGでの最適化前と後で全然色が違ってくる不思議現象。

作成ソフト: PhotoShop6
最適化後の色で作成している。つまり、IEだけ意図しない色になっている。

画像を作成するツールによっては「PNG画像に何か余分な情報」がくっついていて、IEはそれを読み取っているって事ですかね?

 

原因:よくわかんない

FirefoxとSafariで全然色が違う件 | おそろしくあいたかざあな
▲ICCプロファイルを読んでいるか読んでいないか。
当方で確認した所FF、Opera、Chrome、Safariは同じ色で表示してくれているのでこの問題は関係ないっぽい。

Firefox3のカラーマネジメントonで色が綺麗になるっていうのは違うんじゃないか?-Eliminator250 & XL883R(02) & PS250 ダイアリー
▲この辺の違いなのかしら?

良くわかんないです。IEだけが読み取れる、何かの色情報がくっついているのか・・・?