RetinaサポートWebへの第一歩

iPhone 4、iPad 3でスクリーンを改革したAppleが平然とデスクトップにも切り込んできた。 MacBook Pro Retina のことだが、一度触るともう戻りたくなくなるほど美しい(個人的には MacBook Air を買ってしまったんだけど)。そんな美しいスクリーンの価値を落とすのがWebサイトだ。画像の解像度を間違ってしまったかのような見栄えになってしまう。

まず、一番簡単なあたりから。WordPressを使っているなら、Retina for WPを使えばエントリーにアップロードするメディアに限っては簡単に Retina 対応できる。昨日アップロードしたエントリーで使っているが、 window.devicePixelRatio をJavascriptで判定して cookie を喰わせ、読み込む画像を判定している。

[retina normal=”http://blog.taiyolab.com/wp-content/uploads/2012/06/low_res1.png” retina=”http://blog.taiyolab.com/wp-content/uploads/2012/06/Hi_res1.png” width=”640″ height=”auto” /]
Retina supported image

[retina normal=”http://blog.taiyolab.com/wp-content/uploads/2012/06/low_res1.png” retina=”http://blog.taiyolab.com/wp-content/uploads/2012/06/low_res1.png” width=”640″ height=”auto” /]
Legacy image

はっきりと違いが分かるはず。

いずれは Apple.com のように動的に判定して画像を喰わせるようなプラグインも出てくるだろう。蛇足だけどApple Insiderに採り上げられたこの内容をMacお宝鑑定団にタレ込んだのは私だ。Appleは絶対にJacriptで切り替えてくる、と予想していたのであっという間に見つけられた。

次。<img>要素の src で画像を指定しているときの Retina 対応だが、指定する画像の解像度を倍にすればいい。Retina 対応でない端末にも Retina 画像を送らなければならないのが嫌なら、<img>にhas-retinaというクラス名をつけておいて下のように書き換えを行う JavaScript を走らせればいい。

var myRetina = false;
if( window.devicePixelRatio > 1){
  myRetina = true;
}

if( myRetina ){
  var retina_images = document.querySelectorAll('img.has-retina');
  for (var i = 0, i < retina_images.length, i++){
  var current_image = retina_images[i];
    //表示されているピクセルサイズを取得
    var my_size = [ current_image.clientWidth, current_image.clientHeight ];
    current_image.src = // srcを書き換える。.jpgなら_x2.jpgとか
    //サイズを書き戻す
    current_image.style.width = my_size[0] + "px";
    current_image.style.height = my_size[1] + "px";
  }
}

これだと一度は低解像度のイメージが呼び出されてしまうので、 WP-Retina は Cookie に判定コードを入れて無駄な転送が行われてしまうのを防いでいる。ただ、これは好きずきだ。3G回線などのことを考えて、低解像度のイメージが先に読み込まれる方がいいこともあるだろう。なんたって理論上は4倍のデータになるのだから。

backgroundで指定する背景画像もあるけれど、これも同じような方法で書き換えてしまえばいい。ここまで見ての通り、それほど大変な話ではないのでiOSやOS X向けに広告を出したときのランディングページぐらいには用意しておくといいかもしれないね。

Retinaサポートその二歩目へ続く

This post is also available in: English

3件のコメント

コメントを残す

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

%d人のブロガーが「いいね」をつけました。