iPhone、iPadで以前から採用されていた高精細のRetinaディスプレイですが、今月発売されたMac book Proにも採用されています。驚くほどキレイな画面に感激された方も多いのではないでしょうか。

ユーザーにとってはまさに歓迎すべき性能アップではありますが、WEBサイト制作者にとっては頭の痛い問題が発生してしまいました。
スマートフォン、タブレットに代表されるモバイル端末では、一般に高解像のディスプレイが搭載されています。つまり、モバイル端末の小さな画面でPC向けサイトを見ると文字や画像が小さすぎてよく分からなかったのです。そのためにスマートフォンに関してはユーザビリティの観点から、PC向けとは別のページを用意するという対策がとられてきました。
しかし、その高精細モニターがついに人気のPC（※一般的な意味でのパーソナルコンピューター、Mac以外のパソコンという意味ではない。）に搭載されてしまったのです。

Retinaディスプレイで通常のPCサイトを見ると理論的には4分の1ほどの大きさに縮小されるはずですが、ブラウザ側で通常サイズに拡大して表示されるようです。拡大された分、画像がぼやけ、文字のエッジがギザギザに見えるそうです。
文字に関してはRetina対応のSafariを利用すれば、問題なくキレイに見えるようですが、画像は通常72dpiで作成しますからやはりぼやけます。
そこで、Retina向けの高解像画像が必要になってくるというわけです。実際には2倍の大きさ（面積4倍）の画像を別個に用意して、Retinaディスプレイのときだけ、画像を差し替えます。面倒くさいですね。

制作現場では、PCモニターの解像度を72dpiとして制作を行うという暗黙のルールがありますが、これはPCの仕様として広く普及しているために定着したもので、必ずしも従う必要はなかったともいえます。
とはいえ今回のアップルの暴挙により、多様な解像度への対応が求められるようになったのです。
いっそのことすべてのモニターが高精細になれば、画像切り替えの手間が省けるんですが、まだ数年先の話ですね。