iPhoneやiPadなどスマートフォンで画像がぼやけるときありませんか?
Retinaディスプレイと呼ばれるスマホの高精細な画面は、PCサイトで使用する画像をそのまま使うとぼやけてしまってきれいに表示されません。

Retinaディスプレイとは、AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称である。「Retina」とは英語で「網膜」を意味する。
参考:Retinaディスプレイとは (Retina-display) : – IT用語辞典バイナリ

つまり解像度の高いディスプレイで見るとぼやけてしまうということ。Android系のスマホも同じ理由。

対処法としてはスマホサイトでは2倍の画像を使うこと。

CSSで切り替える方法やJavaScriptで切り替える方法などありますが、今回は簡単に切替ができるretina.jsを利用する方法をご紹介します。

サンプル1(通常サイズ)

sample1

サンプル2(Retina対応)

sample2
※Retinaディスプレイで2倍のサイズの画像が表示される。

使い方

retina.jsのダウンロード

http://imulus.github.io/retinajs/
解凍すると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ディスプレイ用の画像を表示してくれます。