「ピクセル実サイズだと画像がボヤける問題」

2010年に発売されたAppleのスマートフォン「iPhone 4」。今振り返ると、Web業界にとって大きなターニング・ポイントでした。
この機種で初めて搭載された「Retinaディスプレイ」は、これまでのディスプレイの常識を打ち破る高精細ディスプレイです。スマートフォンやタブレットは目とディスプレイの距離が近いためパソコンに比べてディスプレイのドットが目立って見えていたのですが、そのドットをより高密度化することで印刷物並の綺麗な画面表示を実現しました。
それ以降のiPhoneやiPad、Mac(一部除く)にこのRetinaディスプレイが採用されたほか、Androidのスマートフォンやタブレットでも同様の高精細ディスプレイが搭載されており、今やWindowsパソコン以外の多くのデバイスにおいて高精細ディスプレイが標準的になっています。

綺麗な画面は良い事じゃない?と単純に言えないのがWeb業界。これまでのピクセル単位の実サイズでWebサイト用の画像を作ると、高精細ディスプレイでは画像がボヤけて見えるという事態が生じたのです。この「ピクセル実サイズだと画像がボヤける問題」(こういう言い回しはないと思いますが…)は実用上問題ないものの見栄え的には重要な問題で、例えば会社のロゴマークがボヤケてしまうとブランドイメージに影響するかもしれません。
高精細ディスプレイがこれまでのディスプレイの4倍(縦2倍、横2倍)以上の密度であるため、ボケないようにするためには4倍以上の大きさの画像を用意してそれを等倍で表示させる必要があります。しかしながら必然的にファイルサイズが増えることになるため、全ての画像を4倍以上にしてしまうとページの読み込みに時間が掛かり、ユーザーがストレスを感じ離脱を招きやすくなります。そのため、前述のロゴマークなど重要な画像だけに絞ったり、技術的に表示する画像ファイルを振り分けたりといったことがなされているのが現状です。また、出来るだけ画像を使わずにテキストやCSSで表現する、ベクター画像のSVGを採用する、といったこともなされています。

ちなみに、技術的には全く異なる話ですが、最近ではWindowsにおいても、タブレット端末やフルハイビジョン(1920×1080)など高解像度ディスプレイでは画面表示が100%以上(125%拡大など)がデフォルトとなっている場合があり、こちらもピクセル実サイズの画像はボヤけてしまいます。

制作サイドとしては、ピクセル実サイズ=ディスプレイ上サイズ、という大原則が崩れてしまい何とも気持ちが悪い状況が続いています。ピクセルに変わる新たな単位が出来ると問題は解決するのでは?と思いつつ、また新たなデバイスや技術の登場でそれも無意味になるかもしれません。