iPhoneは、iPod Touchから始まったスクリーンサイズがiPhone4で寸法同一、解像度2倍になりました。同じ画像を dot by dot で表示してしまうと画像サイズが半分になってしまうため、互換性のため 文字は2倍の解像度を使って綺麗に表示させるけど画像に関しては見かけ上2倍に拡大して表示させることでレイアウトが破綻しないような仕様で登場しました。

で、画像に対して本来の解像度で表示するためには HTMLでちょっと呪文を唱えれば良いので、うちのサイトの画像は数ヶ月前からは2倍解像度の呪文を唱えるようになっています。が、記事自体がHTML直打ちなので過去に書いたHTMLを遡って変更するというのはちょっと現実的ではありません。 HTMLはPostgreSQLの中にあるし、画像縮小に関しては特定ディレクトリ中の全ファイルを自動変換しているので理論上は変換可能です。が、HTMLって文法が結構いい加減なので、正規表現でうりゃうりゃするとなんか変になりそうで気持ち悪いです。

ということで、困ったときのjQuery。

$(document).ready(function(){
　$("img[src^='img/hitori-']:not([srcset])").each(function()　{
　　　var str = $(this).attr('src');
　　　if (str.match(/^img¥/hitori-[0-9-]+_s¥.jpg/)) {
　　　　　$(this).attr('srcset', str.replace(/_s¥.jpg$/,"_s2.jpg") + ' 2x');
　　　}
　});
});

サムネールのファイル名は 'hitori-ほげ_s.jpg' と決まっているので、'hitori-ほげ_s2.jpg' を追加する Javascript。いちおう retina iPhoneや iPadを想定しているのですが、最近の MacBook や MacBookPro 及び iMac でも恩恵にあずかれるんでしょうねぇ。持ってないからわかんないですけど。