コーディング 2015.04.07

サイトの画像をjQueryでRetinaディスプレイ対応にする

最終更新日：2020.3.24Update

最近はPCやスマホなどでも高解像度のモデルが増えてきました。Macユーザーならご存知かと思いますが、AppleのiMacやiPhoneではRetinaディスプレイという2倍の解像度を持つディスプレイが標準装備になっています。そのようなディスプレイでビットマップ形式の画像（ビットマップ画像についてはこちらの記事を）を表示すると解像度が変わるために引き伸ばされてボヤけた画像になってしまいます。

そこでjQueryを使ってサイト内の画像をRetinaディスプレイ対応にする方法を紹介したいと思います。

2倍の解像度に対応するため、2倍の大きさの画像を用意する

Retinaディスプレイでは解像度が2倍になるので、標準のディスプレイと比較し同サイズの画像の見え方は引き伸ばされたようになります。

通常の画像（Retinaディスプレイ未対応）

2倍サイズの画像でRetina対応をしたもの

いかがでしょうか、Retinaディスプレイ環境の方はお気づきになられたかと思いますが、左側の画像は少しぼやけたように見えると思います。

そのため、2倍のサイズの画像が必要になります。そしてRetinaディスプレイで閲覧される場合に、その2倍サイズの画像に切り替えて表示させます。

Retinaディスプレイ対応画像の切替えのjQueryプラグインを使う

この画像の切替えについてはいろいろな方法がありますが、こちらのエントリーでは簡単で便利なjQueryのプラグインを使用する方法を紹介します。

【　Retina.js　】　http://imulus.github.io/retinajs/

このプラグインを設置するだけでRetinaディスプレイで表示されると自動的に画像を切り替えてくれるようになります。

使い方も下記の通りとても簡単なのでオススメです。

サイズが2倍のRetinaディスプレイ用の画像を用意し、ファイル拡張子の前に『　@2x　』と指定する。（例）retina_img01.jpg　→　retina_img01@2x.jpg
上記サイト（http://imulus.github.io/retinajs/）よりjsファイルをダウンロードし、サイトサーバーへアップロードする

headタグ内にjQueryを読み込ませる

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

body終了タグ直前にretina.jsを読み込ませる

 <script type="text/javascript" src="retina.js"></script>
</body>

以上、4つのプロセスでサイト内の画像をRetinaディスプレイ対応にすることができてしまいます！

以降は上記の項目1のように、画像ファイル名に@2xを追加していくだけでOKですね。

その他のRetinaディスプレイ対応方法について

上記の方法はjQueryを用いた方法ですが、その他にもいくつかの方法が存在します。

HTMLのwidth・height属性でサイズを調整する
```
//半分のサイズを指定（元のサイズは幅400px・高さ400px）
<img src="retina_img_large.jpg" width="200px" height="200px">
```
Retina用の大きいサイズの画像をHTMLのwidth属性とheight属性で、それぞれ半分のサイズの値を指定する方法です。シンプルで簡単ですが、編集時にHTMLを調整しないといけないのでメンテナンス性に欠ける点がデメリットです。
HTMLのsrcset属性で画像を切り替える
```
<img src="retina_img.jpg" srcset="retina_img@2x.jpg 2x">
```
Retina用の大きいサイズの画像（@2xがついた画像ファイル）を用意し、srcset属性でその画像を指定する方法です。こちらもシンプルかつ簡単でメンテナンスもしやすいですが未対応のブラウザも存在するので注意が必要です。今後はこの方法もメジャーになりそうですね。
CSSのMedia Queryで画像を切り替える
```
//通常時
.Retina_img {
 background-image:url(retina_img.jpg);
 width: 200px ;
 height: 200px ;
}


//Retinaディスプレイ時
@media screen and (-webkit-min-device-pixel-ratio:2),(min-resolution: 2dppx) {

 //Retinaディスプレイ用サイズの画像を指定
 background-image:url(retina_img@2x.jpg);

 //通常時の表示サイズに合わせる指定
 background-size: 200px 200px ;

}
```
CSSで画像を指定とMedia QueryにてRetinaディスプレイ時の設定をします。
【min-device-pixel-ratio】はデバイスのピクセル密度の最小値を示し、webkit系のブラウザに適用します。
同じく【min-resolution】もピクセル密度を示すものでこちらはwebkit系のブラウザが未対応になっています。dpiやdppxなどの値で指定します。
そして、background-sizeプロパティでサイズの指定を行い、通常の大きさで表示されるようにします。
またこの方法はCSSスプライト（複数の画像をまとめた1つの画像からbackground-positionプロパティで該当する部分を指定する方法）にも適用できます。
アイコンやバナーなどの部分的な画像より背景画像に向いている方法と思います。