iPhoneやiPadなどスマートフォンで画像がぼやけるときありませんか？
Retinaディスプレイと呼ばれるスマホの高精細な画面は、PCサイトで使用する画像をそのまま使うとぼやけてしまってきれいに表示されません。
Retinaディスプレイとは、AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称である。「Retina」とは英語で「網膜」を意味する。
Retinaディスプレイとは (Retina-display) ： – IT用語辞典バイナリ
つまり解像度の高いディスプレイで見るとぼやけてしまうということ。Android系のスマホも同じ理由。
対処法としてはスマホサイトでは２倍の画像を使うこと。
CSSで切り替える方法やJavaScriptで切り替える方法などありますが、今回は簡単に切替ができるretina.jsを利用する方法をご紹介します。
目次
retina.jsの使い方
retina.jsのダウンロード
解凍するとretina.jsとretina.min.jsがあるので圧縮版のretina.min.jsを使う。
retina.min.jsの読み込み
<script src="/XXX/js/retina.min.js"></script>bodyの最後でretina.min.jsを読み込む。
※パスは変更してください。
画像の切り出し
通常サイズの画像を作る
sample.png
2倍サイズの画像を作る
2倍サイズの画像に「@2x」を拡張子の前に付けるsample@2x.png
書き方
<img src="sample.png">普通にimgタグで使うだけ。これでRetinaディスプレイのデバイスでアクセスした場合「@2x」が付いたRetinaディスプレイ用の画像を表示してくれます。