24 Comment / Trackback

これまでスマホ向けにしか考えたことのなかったRetinaディスプレイ対応ですが、やっぱり自分のマシンがRetinaディスプレイになってみるとPCでも本格的に対策せねばと考えてしまいます。
スマホやタブレット端末以外ではまだまだ普及率の低いRetinaディスプレイだけど、おそらく今後数年のうちにPCでも一般的になってくるんじゃないかな。

現状、Retinaディスプレイを判別するためにはCSSかJavaScriptを使うのがベターで、サーバーサイドの技術でRetinaディスプレイを判定するのはなかなか難しいようです。
ざっと調べてみて、僕はRetinaディスプレイ対応には大きく3つの考え方があるかなと思っています。ひとつめは最初から高解像度の画像だけを書き出す方法、2つめは通常版・高解像度版の2つの画像を出し分ける方法、そして3つめはSVGやWebフォントなどの解像度に依存しない形式で画像を作ってしまう方法です。

高解像度画像だけ書き出してどんな端末に対しても高解像度の画像を表示させるやり方は、作り方としてはとてもシンプル。
ただしRetinaディスプレイのほうが圧倒的に少数派な今、パフォーマンスとしては無駄に大きな画像を読み込む結果になってしまう可能性が高い。
一方で、通常版と高解像度版の画像を出し分ける場合は、Retinaディスプレイ以外には高解像度画像を読ませることがないのでパフォーマンスは高解像度一択よりは向上します（高解像度画像を後読みする場合には、Retinaだと通信量がやたらと増える）。ただし画像を書き出し分けるのが非常に面倒です。
そして、SVGやWebフォントを使う方法にはレガシーなブラウザへの対応ができないという問題が付きまといます。

どれも一長一短。現状では、そもそもPC向けサイトではRetina対応しないというのが基本線でありつつ、やるのなら上記のうちのどれかかなと思います。

高解像度画像一択で画像を書き出す場合

<img src=“image@2x.png” width=“100” height=“100” />
<!— 実際の画像サイズは200×200の場合 -->

背景画像にする場合はbackground-sizeの指定を忘れないように。

#id {
background:url(image.png);
/* 通常解像度用の背景画像を指定 */
background-size:100px 100px;
/* 画像のサイズ指定を忘れずに */
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

#id {
background-image:url(image@2x.png);
/* Retinaディスプレイのみに適用する高解像度画像を上書きで指定 */
}

}

気をつけなければいけないのは、背景画像の場合にbackground-sizeの指定がIE8には効かないということ。
従ってIE8を対象ブラウザに含めるのであれば、メディアクエリでRetinaディスプレイのみ高解像度の背景画像を読ませる必要があります。結局のところ背景画像は2つ出し分ける必要があるということですね。

2つの画像を出し分ける場合

JavaScriptを使うのであれば、Retina.jsというライブラリがあります。
<img>タグで指定された画像名の末尾（拡張子の前）に@2xと付けられた画像があれば自動的にそちらを読みにいくように書かれたJavaScriptです。

Retina.js | Retina graphics for your website

しかし、背景画像の場合は結局メディアクエリで出し分けるので全自動というわけではありません。
Retinaディスプレイの時には背景画像のサイズを勝手に拾ってbackground-sizeを1/2サイズに書き換えてしまうJavaScriptを書く手もないわけじゃないだろうけど、「そこまでするのか」って気がしますね（試してないけど、結構難しそうな気がします）。

ちなみに<img>タグで指定された画像を勝手に高解像度画像（@2x）に置き換えるだけなら、以下のようなJavaScriptでいけそうです（jQuery）。ウチの優秀なエンジニアに調べてもらいました。

$(function() {
  // Retinaディスプレイの時だけ実行
  if(window.devicePixelRatio > 1) {
    // img要素を探す
    $('img').each(function() {
      // src取得
      var src = $(this).attr('src');
      // 高解像度画像に置換
      $(this).attr('src', src.replace(/(.jpg|.png)/gi,'@2x$1')).error(function(){
        $(this).attr('src', src); // @2xの画像がない場合は元画像を表示
      });
    });
  };
});

Retina.jsはLESSでCSSを書くためのコードとかも入っているのでコードの量が多いけど、画像出し分けだけならもっとシンプルに書けそうです。
あんまりいろいろ考えてもコードが長くなるだけなので、思い切ってシンプルにしちゃったほうがよいかと。

JavaScriptを使って後から高解像度画像を読む場合、Retinaディスプレイは一旦72ppiの画像を読み込んでいるわけで、通信量がとても多くなってしまいます。
これが最適解かと言われると正直言って微妙ではある。
ただし、Retinaディスプレイより通常ディスプレイを優先すべき現状では、最初から高解像度画像だけを読みにいくよりはマシなのかもしれません。

ちなみにPHPを利用するRetina Imagesというソリューションもありますが、これは結構複雑だし設定も面倒。
結局最初の1回はJavaScriptかCSSでRetinaディスプレイ判定を行っている（2回目以降Cookieを見てサーバーサイドで画像出し分け）ので、手間の割にはあまりお利口ではない気がします。
「そこまでやるか」って感じ。

Retina Images

将来的にはSVGに期待したい

アップルのサイトはSVGが表示可能なブラウザにはSVG画像を表示するJavaScriptを読み込んでいるみたい。
SVGであれば解像度には依存しないので、将来的にはSVG画像を書き出せばよくなるでしょう。
ただし、現在はIE8がSVGを表示できないということと、複雑な画像の場合にはSVGだと容量が大きくなってしまうという問題があります。

あとは画像をフォント化してしまうという方法もあります。が、とても手間がかかりますね。
あまり現実的ではありません。

ちなみにこのWriting Modeは2012年リリースですが、早々とSVGを採用しています。
プライベートワークなのでIE8は捨ててきましたが、それでもIE8では頑張って.svgは.pngに書き換えてみてます。涙ぐましい努力でしょ。

$(function() {
  // img要素のSVGをPNG形式に書き換え
  $('img').each(function() {
    $(this).attr('src', $(this).attr('src').replace(/^(.+)(\/)(content\/themes\/writing-mode\/img)(\/)(.+)(\.svg)$/,"$1/$3/ie/$5.png"));
  });
});

というわけで、PC専用サイトのRetinaディスプレイ対応は、現状では「余力があれば」「こだわりきるのなら」というレベルかなと感じてます。
もちろん、スマホやタブレットを考慮に入れるレスポンシブの場合はRetinaがターゲットになりますけど。

IE8がいなくなってくれればいろいろラクだけど、「さすがにまだ仕事では切り捨てられないだろうなぁ」と思う今日この頃。
「PCサイトのRetina対応、どこまでやっとく？」が目下の僕の悩みです。

Trackback

http://writing-mode.com/20140304/retina/trackback/