PCをRetinaディスプレイにして問題発生！

会社から今まで支給されていた「mac book air」から「mac book pro」に交換してもらいました。 普段PCを持ち歩いている私としては、airは軽くて使い勝手が良かったんですが…。

airに名残惜しさを感じながらproを受け取ると…
案外軽いんですね！そして案外薄いんですね！
そして何と言ってもRetinaディスプレイなので壁紙やアイコンがめっちゃ綺麗なんです！

その日は興奮してずっとwall paperを探し回ってました。
ちなみに設定したのはこちら。

ところが問題は次の日でした。
いつものように自分が運用しているサイトを閲覧していると、
いつもと何かが違うのに気がつきました。

現象

Retinaディスプレイでwebサイトを閲覧すると、
imgで設置された画像（CSSでの背景指定も同様）がぼやけてしまう。

by yahoo japan

原因

Retinaディスプレイとは

RetinaはAppleが独自採用している高精細ディスプレイのこと。
実はiPhone4からすでに採用されていて、その後継である4s以降にも引き継がれているので実際に使っている方も多いはずです。

解像度でいうと、

iPhone3G以前は480×320だったのに対してRetinaが採用されたiPhone4からは960×640と2倍になっています。

画素数でいうと、

iPhone3G以前は163ppiだったのに対してRetinaが採用されたiPhone4からは326ppiと4倍になっています。

※ppiは1インチ幅の中に敷き詰められている画素（ピクセル）の数を示す単位

また、今まで黒の描写が苦手とされていたPCやTVのディスプレイですが、白黒の表現技術が上がっているのも特徴のひとつです。
これにより、かなりはっきり表現できるようになったのだとか。

画像がぼやける原因

上記にも記したように、Retinaディスプレイでは、解像度・画素数ともに数倍に上がっています。
今まで等倍で表示させていた画像は引き伸ばされ、ぼやけてしまうのです。

　対処方法

imgタグの場合

imgタグの場合、解像度を2倍で書き出し直す必要があります。
例えば、100×100のロゴがあるとしたら、200×200のロゴ（ex : image2x.png）を作成しサイトに設置します。

<img src=“image2x.<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a>" width="100” height="100”>

これで、Retinaディスプレイで見てもぼやけません。

chromeの場合

chromeはver.34からimgタグにsrcsetを採用させました。
下記のように記述すれば、Retinaディスプレイには「image2x.png」を
非Retinaディスプレイには「image.png」を読み込んでくれます。

<img src="image.<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a>" srcset="image2x.<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a> 2x">

ちなみにサイズはwidthとheigthを指定しなくても「2x」と記述するだけで自動で1/2サイズにしてくれます。

CSS

メディアクエリ

div { background-image: url(“image.<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a>"); }

通常はこのように記述していると思いますが。
メディアクエリで「min-device-pixel-ratio」か「min-resolution」使ってRetinaディスプレイを判断しています。
下記のように記述します。

div { background-image: url("image.<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a>"); background-size: 100px 100px; } @media screen and (-<a class="keyword" href="http://d.hatena.ne.jp/keyword/webkit">webkit</a>-min-device-pixel-ratio:2), (min-resolution: 2dppx){ div { background-image: url("image@2x.<a class="keyword" href="http://d.hatena.ne.jp/keyword/png">png</a>"); } }

min-resolutionは、webkitで対応していないので、webkitだけmin-device-pixel-ratioを使用します。
min-resolutionで指定しているdppxとは、dot per pixelを表す単位です。
2 dot per pixelはRetinaディスプレイを表します。
単位には、dppxの他にdpcmやdpiなども指定できます。

※min-device-pixel-ratioは、webkitの独自拡張です。

JS

Retina.js

Retina.jsはRetinaディスプレイの出し分けができるライブラリです。
bodyの最後でRetina.jsを読み込むと、Retinaディスプレイだった場合に、勝手にサーバから@2xのプレフィックスを付けた画像をロードしてくれます。

今後

2015年3月現在、Retinaディスプレイを搭載しているPCはまだ少ない。
しかし、今後はどんどん高解像度化が進み、それを対策しなければならなくなると思う。
現在わかっているところでも少しずつ対処していったほうがいいのではないかと思う。