サイトの画像をjQueryでRetinaディスプレイ対応にする
最終更新日: Update!!
最近はPCやスマホなどでも高解像度のモデルが増えてきました。Macユーザーならご存知かと思いますが、AppleのiMacやiPhoneではRetinaディスプレイという2倍の解像度を持つディスプレイが標準装備になっています。そのようなディスプレイでビットマップ形式の画像(ビットマップ画像についてはこちらの記事を)を表示すると解像度が変わるために引き伸ばされてボヤけた画像になってしまいます。
そこでjQueryを使ってサイト内の画像をRetinaディスプレイ対応にする方法を紹介したいと思います。
通常の画像(Retinaディスプレイ未対応)
2倍サイズの画像でRetina対応をしたもの
いかがでしょうか、Retinaディスプレイ環境の方はお気づきになられたかと思いますが、左側の画像は少しぼやけたように見えると思います。
そのため、2倍のサイズの画像が必要になります。そしてRetinaディスプレイで閲覧される場合に、その2倍サイズの画像に切り替えて表示させます。
2倍の解像度に対応するため、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>
その他の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プロパティで該当する部分を指定する方法)にも適用できます。 アイコンやバナーなどの部分的な画像より背景画像に向いている方法と思います。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories