PNG画像がIEとFirefox、Operaなどで微妙に色が違う場合の解決方法

PhotoShopなどで作成したPNG画像が、IEが他ブラウザと色が違う件、なんとか解決方法が見つかりました。

ie,firefox,色,違うなどについて。

PNG画像がIEとFirefox、Operaなどで微妙に色が違う場合の解決方法

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

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だけが読み取れる、何かの色情報がくっついているのか・・・?



次のページへ
前のページへ
PNG画像がIEとFirefox、Operaなどで微妙に色が違う場合の解決方法
TOPページへ

コメント(多忙中のため休止中) C[0] T[0]

人気ブログランキング
このブログを応援する・このブログに寄付する
mona:MEmMcKYAWfdX1r3XkoWBoweJTSjtDgdqRo
btc :1342ndtQDJ3NKkTw1BfP8AD4xMy8NJ4kWb


広告&サイト内おすすめページ

 

関連記事(ぜんぶ見る>> 古い情報(ブラウザ)
IE9のClearType を無効にする方法
自分のPC環境がIPv6に対応しているかチェック
IPv6の設定は、有効・無効どっちが良いの?
FTPで複数IPから同時接続。超過ギリギリのデータを効率よくアップロード、ダウンロードに挑戦

※コメント欄の一時休止中につき、Monacoin企画も休止中です。
簡単!4ステップでふるさと納税 amazon
次のページへ
前のページへ

更新日 2014/10/03(2010年03月公開)このページはリンクフリーです

カテゴリ(メニュー)
このページ

Amazon

Amazon 日替わりタイムセール
サイト内検索
Special Thanks (TOP15)

Amazon
リンク集
楽天市場/ブログランキング
a8 a8