ブログの記事内画像を楽して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 の属性値と同じにします。

ライセンス等について

このスクリプトは、商用利用も含めて利用可能で、事前・事後の連絡やライセンス表記も不要です。
改変もOKです。

ただし、このスクリプトの解説記事を書く際や、このスクリプトを改造したスクリプトを配布される際はこのページにリンクしていただけると幸いです。

ご自分のブログへの設置について

特に WordPress プラグイン化などはしておりませんので、ご自分でテーマの footer.php の </body> タグの直前などに <script> タグを使って設置してください。

記事全体を囲む div のクラス名が .entry-content でない場合は、適宜スクリプトの6行目の .entry-content 部分を書き換えてご利用ください。

設置方法が分からなかったり、うまく動かなかった場合のサポートは一切しておりません。
この記事の内容が理解できない場合は、設置を試みないほうがよいと思います。

設置しても、画像を記事内に挿入する際に、本来の表示サイズより大きな画像を用意し、WordPress 管理画面の投稿ページで[メディアを追加]をクリックし、「リンク先」を[メディアファイル]にしていなければ、効果がありませんのでご注意ください。

謝辞

正規表現の部分は、当初 /\.jpe?g$|\.gif$|\.png$/g と書いていましたが、@kubosho_ さんより /\.(jpe?g|gif|png)$/g にすれば少し短くなるとアドバイス頂いたため修正しました。ありがとうございます。

If you like this article click the Facebook “Like” button to share it with your friends!