iOS safari:高解像度ディスプレイ向けの画像対策

今回はwebデザイニングの2011.11月号のスマートフォン向けの最後の項目です。
retinaディスプレイは本当にキレイです。電子書籍は好きではなかったのですが、
iPadがretinaディスプレイを搭載したら電子書籍が好きになりそうです。特に
雑誌は嵩張るので電子書籍のほうが嬉しいです。
 
 
 

高解像度ディスプレイ向けの画像は必要か?

高解像度ディスプレイは現時点で少数派なので、対応しているところは少ないと
思っていたのですが結構多かったです。以下のリンク集から巡ってみました。
iPhone Design Box
 
高解像度ディスプレイに対応しているかいないかは結構わかります。みずほ銀行など銀行系の
スマートフォンサイトでは対応していないので画像アイコンがぼやけた感じになっています。
テキストがとてもキレイに表示されているので、なおさら差を感じます。
 
ということで、これは手を抜かない方がよいと感じました。
 
 
 

環境による表示画像の切り替え

webデザイニングの記事にあるようにメディアクエリを利用すれば解像度によって
表示画像を切り替えることができます。しかし、この方法はcssしか設定できない
ためimgタグのsrcを切り替えることができません。ですので可能なのは背景画像
のみとなります。とはいえ通常の利用であれば背景画像で問題ないと思います。
 
ということで作成したサンプルが以下のものです。PCで開くと「低」と表示され
低解像度の画像が表示されるのが確認できます。
解像度による表示画像の切り替えサンプル
 
これをスマートフォンで確認すると以下の様に「高」と表示され高解像度の画像が
表示されるのが確認できます(クリックで実物表示)。
 

 
 
研究も兼ねてwebデザイニングとは異なるシンプルなソースにしました。
まずdiv.imageのcss設定は以下の様に50x50のdiv領域の背景に50×50.pngを
表示しているだけです。

div.image{
 width:50px;
 height:50px;
 background:url(../images/50x50.png);
}

 
これを続きメディアクエリの-webkit-min-device-pixel-ratioを利用して解像度が
高い場合は上書き設定し直します。iPhone4等はこの値が2ですがwebデザイニングの
記事にあるように少し高解像度のアンドロイドにも対応するように1.5を設定しています。
この解像度以上であった場合{}内の処理が実行され、div.imageの背景画像が100×100.png
に再設定されるというわけです。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
 div.image{
  background: url(../images/100x100.png);
  -webkit-background-size: 50px 50px;
 }
}

また以下の処理によって、サイズが100×100の背景画像を50×50にして表示します。

-webkit-background-size: 50px 50px;

このメディアクエリはスマートフォン用のCSSというわけではなくPCサイトでも活用できます。
参考サイト:[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例
 
 
 

メディアクエリの限界

メディアクエリでは背景画像にしか利用できないため、ショーケースコンテンツのように
画像をjQueryで操作する部分では利用できません。jQueryを利用すれば高解像度ディスプレイ
の時に画像を切り替えることが可能ですが、もとの画像と差し換える手順になるため
読込のリクエストが重なり、画像の表示が少し遅くなると思います。
 
悩んだときは既存のスマートフォンサイトを観察しましょう。以下のサイトは
PCでもスマートフォン用のページを閲覧できるため確認しやすいので、これで
画像をどの様に扱っているかを確認します。
JUN MEN
 
上記サイトではトップでjQueryを利用したショーケースを表示しています。
ソースを確認すると320pxの幅で表示していますが、実際に利用している
画像を開くと幅640pxの画像であることが確認できます。
 
つまり高解像度の画像だけ用意して50%のサイズで表示するようにしています。
実際に高解像度のスマートフォンで確認するときれいに表示されますし、
PCで確認できるように50%で表示されている画像も比較的きれいです。
この方法が一番シンプルで現実的な気がします。
 
この方法で作成したサンプルを確認しましょう。
高解像度の画像を50%表示したサンプル
 
このサンプルでは比較として低解像度の画像と並べて表示するようにしています。
PC(や低解像度のスマートフォン)で確認すると2つに差は無いように見えますが
高解像度のスマートフォンで確認すると以下の様に明らかに異なり、高解像度の
画像がとてもきれいに表示されているのが確認できます(クリックで実物表示)。
 

 
 

メディアクエリのメリットは?

一応メディアクエリのメリットも考えます。低解像度の古い機種では、低解像度の
軽い画像が表示されるため、古い機種の方は表示までの時間が短縮されるでしょう。
ですので、画像がたくさん利用されるページではメディアクエリを利用する価値が
ありそうですが、もう少し考えてみましょう。
 
上記の恩恵が受けられるのは古い機種だけです。新しい機種はきれいな画像を
多く(ダウンロード)表示するため時間が掛かってしまいます。これは
メディアクエリではどうにもなりませんから、別の方法で解決します。
 
具体例としては、1ページあたりの画像数を減らすようにページを分割する等が
あるでしょう。そうすれば表示時間の問題も解決できます。
高解像度の画像を利用しても表示時間が早くなれば、コードを多く書く面倒な
メディアクエリを利用するメリットも薄くなり、結局は前項で紹介した50%で
画像を表示する方法に落ち着くと思います。
 
 
 

可能な限り画像は避ける

ともあれ画像を含めたページのファイルサイズは少ない方が良いので、画像の利用は
抑える方がよさそうです。スマートフォンのブラウザはcss3に良く対応しているので
ボタン等はcssでデザインするようにしましょう。
 
 
おしまい
 
 
 

コメントを残す

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


− 5 = 四


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>