WordPressの記事内に設置している画像をRetinaディスプレイに対応させる方法

WordPressのブログ記事内に設置した画像を簡単にRetinaディスプレイ対応させる方法の紹介です。jQueryを使ってRetinaディスプレイの時だけ画像を差し換えるという方法で、これはStocker.jpさんが考案したものです。

記事内に設置している画像をRetinaディスプレイに対応させる方法

</body>の直前に以下のコードを追加します。</body>の直前なので、footer.phpを編集します。

// Retinaの場合、記事の画像を高解像度のものに差し替え
$(function(){
	// devicePixelRatio の値が2以上であれば
	if (window.devicePixelRatio >= 2) {
		// .entry-content 内の img の親要素の a
		var a = $(".entry-content img").parent("a");
 
		$.each(a, function(i, value) {
			var imgpath = value.pathname;
			// href の属性値の最後が .jpg .jpeg .gif .png のいずれかであれば（大文字小文字は問わない）
			if (imgpath.match(/\.(jpe?g|gif|png)$/g)) {
				// img src 属性値を href 属性値と同じにする
				$(value).children("img").attr("src", imgpath);
			}
		});
	}
});

Retinaディスプレイの時は、画像のリンク先の元画像を表示するという仕組みになっています。

そのため、元画像の解像度が低ければあまり意味はありません。アップロードしている画像の解像度が、表示している画像の2倍以上の時に効果を発揮しますね。

あとがき

サクッとRetina対応したい時は、ぜひお試しください。