ブラウザごとの画像の発色の差異

kumashige2005-06-27

左の縦に伸びる茶色のバーを、画像に置き換えてみた。一応、上に表示されている日付バーの背景色と同じ色にしたつもりである。

なお当雑記では、WindowsFirefox/IE/Operaの三ブラウザで無難な表示になるよう調整している(一応、デフォルト設定を前提としているが)。

見比べて思ったのだが、画像の発色がブラウザによって若干異なるようだ(画面フルカラー時)。これは知らなかった。一方で、背景色やら帯の色など、HTMLやCSSで色を指定する箇所はカラーコードに忠実に色を割り当ててくれるため、ブラウザによる差異はない。

左部分の茶色バーを画像に置き換えたことで、ブラウザにより色の差異が生じ、日付バーの色と異なる場合が出てくる。まあ不満といえるほど不満ではないのだが、画像により印象を調整しようとする場合は知っておかなければならない問題だな、なんて。

今回は差異が分かるように画像一枚に並べてみたのだが、よく考えてみればアップロードしたこの画像も、ブラウザにより見え方が若干異なるわけだ。まあ差が分かればOKなわけだが。

今回比べた三ブラウザでは、すべて画像に使われているスクリーンショット上のカラーコードが異なっていた。アイコンも色が全部違っている。

この差異は、写真などの複雑な画像では目立たないが、グラデーションや幾何学模様では意外に印象が変わることもありそうだ。現に当雑記においても、背景に用いている本の画像の濃さがブラウザにより異なるため、選択しているブラウザにより明暗の印象が異なる場合もあるかもしれない。

この差異を吸収する方法ってあるのかな……。


左のバーを画像に置き換えたのは、上から下まで帯で埋め尽くす方法が他に思い浮かばなかったからである。縦1px×横100pxの茶色画像を用意して、bodyの背景画像として指定し、縦方向にリピートさせている。

もしこの他に、同等の表示が可能な案を思い浮かばれた方がいらっしゃいましたら、ご一報くださいませ。