2014年5月2日RetinaディスプレイのiPhoneやMacでウェブページを見たときに画像がぼやけた(ぼけた)ように見える理由は、ウェブサイト側がRetinaに対応した画像の使い方をしていないのが原因です。Retina用には表示サイズの4倍のピクセル数をもつ画像を使えばきれいに表示できますが、それだと非Retina用にはデータ容量が大きすぎるのでデバイスによって表示する画像を振り分ける必要が生じます。そこで、振り分け方法について試しました。縦横2倍(ピクセル数は4倍)の画像を用意して、それを実サイズの1⁄4で表示させるという方法が唯一。Retina以外のユーザーは必要以上のデータを受信することになる。閲覧デバイス/ディスプレイによって読み込ませる(表示させる)画像を振り分けるのが効率的。その方法をどうするか?というのが課題になると思います。480ピクセルで表示されます。きれいに見えるための必要な大きさをまとめました。9603種類のデバイスそれぞれに最適な画像を振り分けるのが目標です。960を表示するようにしたいです。どちらの画像が使われているか分かりやすいようにサイズを画像上に明記してあります。画像を振り分ける方法を試す写真下に画像を表示しているソースコードを書いています。画像のパスやaltタグなどは省略しています。結果はすべて、2014年5月2日現在のものです。将来は変わっている可能性があります。srcsetsrcsetで指定された条件にあうときに画像が読み込まれます。3パターンを試します。うまくいくのが理想です。WebKitしか対応(一部の指定方法のみ)していないのでブラウザによって効果が分かれます。2x(2倍)のときは、1280x960.jpgが読み込まれます。Retinaのデバイスピクセル比は2倍です。よる振り替えウインドウサイズ(Viewport幅)が569ピクセル以上なら1280x960.jpgが読み込まれます。小さいretina.jsretina.jsをダウンロードして低解像度/高解像度の画像を準備。サイトに従ってソースを書く。よりRetinaデバイスが検知されて、Retinaの時だけ高解像度の写真がダウンロードされます。ファイル名と大きさです。ファイル名と大きさです。retina.js推し。iPhoneには大きすぎるデータを送ってしまう。srcsetの方が良いと思うけど、srcsetはまだ草案段階で将来的にどうなるか分からない。retina.js方式で記述しておいて、srcsetが主要ブラウザに実装されたら、retina.jsを削除するのはどうだろう?iPhone優先なら、srcsetを書いて実装されるのを首を長くして待つ。メディアクエリなんかを駆使してうまいことできないだろうか...?。