0%

Designデザインワークショップ

Posted:2015.04.07

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

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

 

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

 

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

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

 

20150407_img_01
通常の画像(Retinaディスプレイ未対応)

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

 

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

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

 

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

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

 

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

 

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

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

 

 

  1. サイズが2倍のRetinaディスプレイ用の画像を用意し、ファイル拡張子の前に『 @2x 』と指定する。(例)retina_img01.jpg → retina_img01@2x.jpg
  2. 上記サイト(http://imulus.github.io/retinajs/)よりjsファイルをダウンロードし、サイトサーバーへアップロードする
  3. headタグ内にjQueryを読み込ませる
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  4. body終了タグ直前にretina.jsを読み込ませる
    <script type="text/javascript" src="retina.js"></script>
    </body>

 

 

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

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

 

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

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

 

  1. HTMLのwidth・height属性でサイズを調整する
    <img src="retina_img_large.jpg" width="200px" height="200px">
    //半分のサイズを指定(元のサイズは幅400px・高さ400px) 

    Retina用の大きいサイズの画像をHTMLのwidth属性とheight属性で、それぞれ半分のサイズの値を指定する方法です。シンプルで簡単ですが、編集時にHTMLを調整しないといけないのでメンテナンス性に欠ける点がデメリットです。

  2. HTMLのsrcset属性で画像を切り替える
    <img src="retina_img.jpg" srcset="retina_img@2x.jpg"> 

    Retina用の大きいサイズの画像(@2xがついた画像ファイル)を用意し、srcset属性でその画像を指定する方法です。こちらもシンプルかつ簡単でメンテナンスもしやすいですが未対応のブラウザも存在するので注意が必要です。今後はこの方法もメジャーになりそうですね。

  3. 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プロパティで該当する部分を指定する方法)にも適用できます。
    アイコンやバナーなどの部分的な画像より背景画像に向いている方法と思います。

 

 

このようにその他にもいくつか方法はありますので、サイトの特性やメンテナンスなども考慮した上で適切な方法を選択するのがベターですね。

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】