すてきな気分〜ナイスフィーリングブログ〜

Retinaディスプレイ対応「retina.js」

スマホサイトを作ると、自分がiPhoneなもので、つい気になるのが画像の粗さ。
まぁ、しなくてもいいと言えばいいような気もするけど、ここらで本格的にRetinaディスプレイに対応してみようという気になった。(^_^;A

そこで登場したのが「retina.js」。

単純にRetinaディスプレイを判別して、@2x画像を表示させるもの。
実装自体は、まんまリンクさせればいいので非常にお手軽♪
ただ画像準備は2種類なので、面倒くさい!面倒くさい!超〜面倒くさい!
ここで学んだのが、Retina対応するなら、デザインの段階で倍サイズで作れって話です。
縮小はほぼ問題ないけど、拡大は元画像に解像度がないとキツい。
後々の手間を考えると、全て倍、コレです!

ま、CSS3を駆使して、画像をそんなに使わなければいいんですけどね。

他にもretina.phpらしきものもありましたが、こちらは.htaccessなんかも書かなければいけなくて、サーバーによっては若干厳しいかも?と感じました。
小規模サイトならretina.jsでもいいと思います。

しかし3Gなんかを考えると、キレイだけど大きい画像も如何なものかと考えたりします。
このジレンマは、アナログ回線時代から、常にWeb制作に付いて回りますねぇ。。。

Pocket

トラックバック

このエントリーのトラックバックURL:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です