スマホサイトを作ると、自分がiPhoneなもので、つい気になるのが画像の粗さ。
まぁ、しなくてもいいと言えばいいような気もするけど、ここらで本格的にRetinaディスプレイに対応してみようという気になった。(^_^;A
そこで登場したのが「retina.js」。
単純にRetinaディスプレイを判別して、@2x画像を表示させるもの。
実装自体は、まんまリンクさせればいいので非常にお手軽♪
ただ画像準備は2種類なので、面倒くさい！面倒くさい！超〜面倒くさい！
ここで学んだのが、Retina対応するなら、デザインの段階で倍サイズで作れって話です。
縮小はほぼ問題ないけど、拡大は元画像に解像度がないとキツい。
後々の手間を考えると、全て倍、コレです！
ま、CSS3を駆使して、画像をそんなに使わなければいいんですけどね。
他にもretina.phpらしきものもありましたが、こちらは.htaccessなんかも書かなければいけなくて、サーバーによっては若干厳しいかも？と感じました。
小規模サイトならretina.jsでもいいと思います。
しかし3Gなんかを考えると、キレイだけど大きい画像も如何なものかと考えたりします。
このジレンマは、アナログ回線時代から、常にWeb制作に付いて回りますねぇ。。。