同じウェブページ画面なのに、環境(個々のパソコン・ディスプレイ)によって色や綺麗さが微妙に見え方が違う。
その原因について、詳しく説明します。
このページの内容は次のお客様に関係あるかもしれません。
- 写真を綺麗に見せたい
- Webサイトが閲覧している環境によって色が異なる
- 特定の画像がボヤけて見える。粗く見える。
表示環境（デバイス・OS・ブラウザ）の違い
色や綺麗さが異なる最大の要因は、ディスプレイ性能です。安価なディスプレイは色域が狭く、輝度が低いので忠実な色が出せません。対して、高価なディスプレイはより忠実な色が表現できます。デザインに関わる仕事でも無ければ、多くの企業ユーザーは安価なディスプレイを使用しているのがほとんどなので、デザイナー様が意図した様な色で見せられている事が出来ていないのが現状です。
ディスプレイの違いの原因は以下の様なものがあります。
ディスプレイ性能の違い
ディスプレイの性能や設定によって、次の様な違いがあります。
- 色域（sRGB / AdobeRGB / DCI-P3 など）が異なる
- ガンマ値・コントラスト値が異なる
- 輝度・色温度が異なる
- ブルーライトカットの有無
- メーカー独自の色補正の違い
これらの違いは、ディスプレイの設定で調整できるものもありますが、ディスプレイそのものの性能で設定幅が狭い場合や、設定できない場合もあります。
広色域ディスプレイだと、同じJPEG画像でも「鮮やか」「派手」に見えがちです。また低色域だと、薄い色が「白」にしか見えない場合もあります。
OS側のカラーマネジメントの差がある
カラーマネジメント（Color Management）とは、カメラ、モニター、プリンターなど、異なる機器間における色の見え方のズレを補正し、一貫した色を再現するための管理技術です。ICCプロファイルという色特性データを用いて、意図した色を保つ仕組みです。
デザイン用途で好まれるmacOSは比較的カラーマネジメントが厳密ですが、オフィス用途として使われているWindowsは、ブラウザや環境によってICCプロファイルが無効だったり限定的な場合あります。
ブラウザによって処理差がある
Chrome 、 Edge 、Safari 、 Firefoxといったブラウザによって、処理性能の差があります。
ICCプロファイルの扱いが異なる、ガンマ補正の度合い、画像を拡大縮小する際のアルゴリズムが異なるのが原因です。
画像自体の処理方法の違い
上記は、全体的な見え方の違いですが、画像の処理方法や表示方法によっても違いが出てきます。
動画も含めて基本的には、ファイルサイズを小さくしようとする程、画像が劣化して見えたり、色の忠実度が下がります。
つまり、綺麗に見せようとするとファイルサイズが大きくなるので、読込速度が低下する事でユーザーにストレスを与えますが、逆に読込速度を早くするには、画像や動画のファイルサイズを小さくする為に、画質の劣化が目立つ様になります。
Webブラウザで表示できる画像形式は次の形式がよく使われます。
写真や色数の多い画像、グラデーションを使用している画像の場合
- JPEG形式
- Webp形式(非可逆圧縮)
イラストや、ロゴ、背景が透過の必要がある場合
- GIF形式
- PNG形式
- SVG形式
- Webp形式(可逆圧縮)
どの形式を使うか?は、それぞれの画像タイプによって異なりますが、当社では「環境による差を最小限に」→「よりストレスなく表示できる(ファイルサイズ)」→「なるべく綺麗に表現できる」という優先順位で形式選択しています。お客様によっては、ここの画像は表示速度が遅くなっても、綺麗さを優先したいという希望もあると思いますので、その場合は「なるべく綺麗に表現できる」を第1優先とします。
表示方法の違い
ウェブサイトで画像を配置する際は、何も指定しないと等倍の解像度(大きさ)で表示されます。
しかし、昨今は画面サイズの異なるデバイス間で見せる事を前提としているのでレスポンシブサイトで制作するのが基本です。
レスポンシブで表示する画像は、固定値(〇ピクセル)では無く、画面幅に対する割合(%など)で表示させる事が多いので、ブラウザ側での拡大縮小が行われます。
この時に、ブラウザの補正が行われるので、等倍よりは劣化して見える、ブラウザ補正によって異なって見えるという事があります。
デバイスピクセル比(DPR)の違い
Retinaディスプレイは、iPhoneやiPad、Macに搭載されたAppleオリジナルのディスプレイで、個々の画素がより繊細なディスプレイです。Retina以外でも高DPIディスプレイが販売されています。このRetina対応ディスプレイや高DPIディスプレイは、通常のディスプレイよりも高密度なので、通常のディスプレイ用サイズで保存された画像サイズだと拡大表示されるので、粗くボヤけて見える場合があります。
Retina・高DPIディスプレイで綺麗に見せる為には、高解像度(大きなサイズ)にする必要がありますが、逆にこのサイズの画像を通常のディスプレイ用サイズで見ると縮小表示される関係でシャープすぎて見える場合があります。
これを解決する為にHTMLを画像を表示する為のタグを使用する際には、Retina・高DPIディスプレイ対応(Retina対応)とする必要があります。
Retina対応する場合は、次の様な作業の手間、デメリットがございます。
- より大きなサイズの元素材が必要となる
- 1つの画像に対して、2～3つの異なるサイズの画像ファイルが必要となる→それによりサーバー容量も圧迫
- Retina対応した画像は、通常サイズの2～3倍なので、その画像ファイルサイズも大きくなります。その関係で表示速度が遅くなります。
この関係で、当社で制作するウェブサイトは全ての画像をRetina対応している訳ではありません。Retina対応してもあまり意味がない様な画像は、通常サイズで読み込んでいます。特にRetina対応する箇所は、JPEGやWebP形式の写真画像です。