レチナ対応機種が無かったのでこれまで避けてきたのですが、今更ながら我が家にiPhone4sがきたので、前々から構想していたレチナ対応をプラグインにしてみました。

追記：
iOS6で全般うまく動いて無いみたいなので調査中です(´・ω・`)

追記：同日15時53分
諸々修正いたしました。TLの皆様、ご助力ありがとうございました!!

追記：2012年9月27日10時頃
ご要望をいただいたので、本エントリーの追記、サンプルの改修をしました。

使い方

HTML＋JavaScript

<!--
画像の幅：data-img-width
画像の高さ：data-img-height
画像のALT：data-img-alt
画像のパス：data-img-path ←追加
-->
<a href="img.jpg" class="img-retina" data-img-width="160px" data-img-height="120px" data-img-alt="画像のALT">JSオフ用のテキストリンクをALTにしておくとベター</a>

<a href="img_2x.jpg" class="img-retina-wrapper" data-img-path="img.jpg" data-img-width="160px" data-img-height="120px" data-img-alt="画像のALT">JSオフ用のテキストリンクをALTにしておくとベター</a>

<div class="img-retina" data-img-path="img.jpg" data-img-width="160px" data-img-height="120px" data-img-alt="画像のALT">リンクにはならない</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.imgRetina.min.js"></script>
<script>
$(function(){
	/* $.imgRetina(options); */
	/* <a>以外もチェック */
	$('.img-retina').imgRetina();
	/* ラッパーを残す設定 */
	$('.img-retina-wrapper').imgRetina({ wrapper : true });
});
</script>

options (object) で設定できる項目

  • suffix：レチナ画像用のファイル名接尾詞　デフォルトは’_2x’
  • wrapper = アンカーを残す場合 true　デフォルトは false

解説

<a>要素に設定したデータを元に、プラグインで画像に置換しています。
幅と高さはスタイルに入れる値なので単位も入れてください。

  • レチナ対応機種ではレチナ画像のみを読み込みます
  • レチナ非対応機種では通常画像のみを読み込みます
  • JSオフの時は通常画像へのリンクになります
  • 前提条件として画像には拡張子が必要です
  • data-img-path属性はhref属性より優先されます ←追加
  • data-img-path属性にはsuffix無しの画像を設定します ←追加

背景はCSS側で対応すればいいかなぁ、と思っているので未対応です。

ツッコミ等あれば、ぜひぜひコメントをしていってください。

よろしくお願いします。