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

前回のRetinaディスプレイ時に読み込む画像を切り替えるjQueryでは以下の通りRethina・非Retina画像のリクエストが発生して非効率なスクリプトとなってしまっていたので修正しました。

修正後のソースは以下の通り。

[html]

<p><img src="images/grey.png" data-original="images/logo.png" alt="" width="50" height="50" /></p>

[Javascript]

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

img要素src属性にダミー画像を入れておき、カスタムデータ属性を用いて画像パスを格納しています。
3行目でカスタムデータ属性の値を取得。
4行目でRetinaディスプレイか判別。
Retinaディスプレイの場合5行目で画像パス変更。
7行目でダミー画像のsrc属性を書き換えて描画。

これで非Retina画像のリクエストを発生させることなくRetinaディスプレイ時にRetina用画像を表示することが出来ました・・・けどRetinaディスプレイ対応自体どんな手法が正しいのか分かっていないので詳しい方いらっしゃいましたらご教授お願いします。

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倍サイズの画像を作成して、それ用の分岐も用意しておいた方が良いかもしれません。