ブログの記事内画像を楽してRetinaディスプレイに対応させる方法

「Retina な Mac を買ったはいいけど、自分のWebサイトやブログの画像がぼやけて見えるのが気になる」という方は多いと思います。

ロゴ画像であれば Illustrator から SVG 形式で書き出すだけで対応できますが、やっかいなのがブログ本文内の画像です。

メインビジュアルの画像など限られたものであれば、たとえば「image.jpg」という画像の Retina 用として「image@2x.jpg」という縦横2倍の画像を用意することもできると思います。

しかし、ブログ本文内の画像は数も多く、「image@2x.jpg」のようなファイル名の画像もいちいち用意していられないと思います。

そこで、このブログでは jQuery 用の JavaScript を使ってなるべく手間のかからない対応をすることにしました。

このブログでは、WordPress で記事を書くときに［メディアを追加］をクリックし、以下のように「リンク先」を［メディアファイル］にしています。

すると、HTML が以下のようになります。

このブログは、基本的に記事内の画像の表示サイズは 500x300px ですが、昨年からはなるべく 1000x600px 程度の画像をアップロードするようにしていました。

ここで、JavaScript を使って

Retinaディスプレイであれば、
.entry-content 内の img タグの src の属性値を
その親要素の a タグの href 属性値と同じものに変更する

という処理をすれば、Retinaディスプレイの場合のみ高解像度の画像が表示されるようになるはずです。

今回は、以下のような jQuery 用の JavaScript を書きました。
（この記事のためにコメントを追加しています）

// 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);
			}
		});
	}
});

このスクリプトは、DOM 構築後（HTMLの読み込みが終わった後。画像の読み込みは待たない）のタイミングで実行され、まず devicePixelRatio の値が「2以上であるか」を調べます。
一般的に、devicePixelRatio の値は従来の低解像度ディスプレイであれば 1、Retina ディスプレイであれば 2 になります。

参考までに、iPhone 6 Plus の Retina HDディスプレイの devicePixelRatio の値は 3 です（このブログでは PC 版のテーマにのみこのスクリプトを組み込んでいるため、iPhone は対象外です）。
Surface Pro 2 や 3 の値は 1.5 らしいので、対象外です。

devicePixelRatio の値が 2 以上であれば、以下の処理を実行します。

.entry-content img の親要素の a の一覧を取得し、それらに対して順次処理を実行します。

href の属性値（http からはじまる画像の絶対URL）を取得し、それらの文字列の最後が .jpg .jpeg .gif .png のいずれかで終わっていれば、以下の処理を実行します。
（img タグを囲っている a タグのリンク先が画像ではなく、.html などであると、img src 属性値を差し替えた時に画像が壊れてしまうため）

最後に、img src の属性値を a href の属性値と同じにします。