Retinaディスプレイ対応策

2013.08.09

Retinaディスプレイ搭載のApple製品が登場してから、デジタルコンテンツがもっと美しくみえるようになりました。

しかし、今まで作ったWebサイトをRetinaディスプレイでみてみると、ロゴ、使用されている画像などの荒さ・ボケ感が気になるようになってしまいます。

そんなわけで今回は、Museでつくったサイトの場合でのRetinaディスプレイへの対処法をご紹介します。

Retinaディスプレイは縦横倍精度の画像になるので、通常の画像が 200 × 200px だとすると、Retinaの場合は 400 × 400px の画像になります。

Retinaディスプレイ搭載のMacBook Proや新しいiPadのようなデバイスは、デバイス・ピクセル比が2です。その他のPCやタブレットのデバイス・ピクセル比は1か1.5といったところでしょう。

デバイス・ピクセル比についてはこちら

目標は、”デバイス・ピクセル比が2”とWebブラウザが認識したときのみ、Retina用の画像をロードさせること。

ここでのポイントは、通常のデバイスはこれまで通りの画像をロードさせ、Retinaディスプレイのデバイスは高解像度の画像をロードさせるということです。

このすべてを処理してくれるのが、retina.jsというスクリプトです。

手順は以下の通りです。

1. retina.jsを retinajs.com からダウンロードします。

そして、retina.jsファイルをサーバーに入れます。

2. マスターページの「ページプロパティ」＞「メタデータ」＞「<head>に挿入するHTML」に<script type="text/javascript" src="/retina.js"></script>　を挿入してください。

3. つぎに、Retinaディスプレイ用の画像を用意します。retina.jsスクリプトでは、高解像度の画像を検出するために、Retinaディスプレイ用の画像に対して「@2x」というAppleの修飾語を使用していることを想定しています。

たとえば、「logo.png」という画像をMuse上で使用していた場合、Retinaディスプレイ用には「logo@2x.png」という名前をつけて縦横倍精度の画像を用意しなければなりません。

4. 最後に、用意した「@2x.png」画像を「images」フォルダの中に入れます。

HTMLに書出してサーバーにアップロードしている場合、アップロードの度に「@2x.png」画像を「images」フォルダの中に入れてください。

参考サイト