Retinaディスプレイ時に読み込む画像を切り替えるjQuery

2012/01/05追記

下記で記述しているスクリプトでは読み込み時に非Retina用画像のリクエストが発生してしまいます。
結果、無駄なリクエストとなるので非効率なスクリプトとなってしまいます。

2012/01/12追記

二重にリクエストが発生しないスクリプトをかいてみました。
Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2

Retinaディスプレイ用画像設定

スマートフォンサイト制作時、従来の3G/3GSのような非Retinaディスプレイ用画像を用いるとRetinaディスプレイで表示した際に滲んでしまいます。
画素数320x480pxの非Retinaディスプレイと同様の3.5インチの画面サイズに4倍の画素数である640x960pxで描画されるため画像が引き伸ばされてしまうためです。

そこで非Retinaの倍の画像を作成してimg要素width/height属性に画像の半分の値を設定することでRetinaディスプレイで画像を奇麗に表示することができます。

[html]

<p>3G用画像(50x50px)<br />
<img src="logo.png" alt="" width="50" height="50" /></p>
<p>Retina用画像(100x100px)<br />
<img src="logo@2x.png" alt="" width="50" height="50" /></p>                   

Retinaディスプレイの場合のみ専用の画像を用いる

倍サイズの画像を用いる事でRetinaディスプレイで奇麗な画像を表示する事ができますが、遅い回線でアクセスした際に表示に時間が掛かるのでRetinaディスプレイ時のみ倍サイズの画像を用いる様にjQueryで振り分けるようにします。

前提として画像は2種類(非Retina用・Retina用)を作成します。
Retina用画像は “@2x” をファイル名末尾に追加しておきます。

  • logo.png(非Retina用)
  • logo@2x.png(Retina用)

[Javascript]

	$(function(){
		if(window.devicePixelRatio > 1) {
			$('img').each(function(){
				var src = $(this).attr('src');
				$(this).attr('src', src.replace(/(\.jpg|\.png)/gi,'@2x$1'));
			});
		}
	});
	

ソースは上記の通り。
2行目のwindow.devicePixelRatioでRetinaディスプレイかを判別しています。iPhone4/4Sでは値が2になります。
3行目からimg要素をループして、4行目でimg要素のsrc属性を取得、5行目でRedina用画像ファイル名に書き換えています。

以上がRetinaディスプレイの場合のみに専用の画像を用いる処理となりますが、iOSシミュレータでの確認のみですので実機での動作及び処理が正しいかは保証しかねますのでご了承ください。
また、日本で発売されているAndroid端末の場合全てではありませんがwindow.devicePixelRatio値が1.5らしいのでAndroid用に1.5倍サイズの画像を作成して、それ用の分岐も用意しておいた方が良いかもしれません。