そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。
PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。
まだまだ通信量を下げておきたいところなので、コーディグ前にどのように画像を切り出すかが悩ましいところです。
高解像度用の画像に対応させる方法
-
1.読み込ませる画像の大きさを半分にする。
メリット：簡単
デメリット：画像修正の時はHTMLも触らないといけない場合がある。（管理がしにくい） -
2.JavaScriptライブラリを使う（今回はRetina.js）
メリット：高解像度用の画像を用意するだけで、勝手に読みこんでくれる（管理しやすい）
デメリット：読み込む画像の数が増えるので、通信量が増える。 -
3.Media Queriesを使って高解像度用のディスプレイを判定。
メリット：画面サイズにあった画像を読みこませることができる。
デメリット：毎度高解像度用の画像を設定するのが面倒。
1.読み込ませる画像の大きさを半分にする。
2倍の大きさの画像をwidth属性、height属性、もしくはCSSで表示サイズを半分に指定するという方法で表示させます。
[html]
<img src="./img/sample1.jpg" alt="" width="320" />
※実際の画像サイズは横幅640pxで作られています。
[/html]
この方法は比較的簡単に使える方法なので重宝しますが、高解像度用の画像と通常サイズの画像を変更するときはHTMLも触って変更しないといけないので、変更箇所が多い場合は少し対応が面倒になります。
向いている設計としては、どれを高解像度、通常解像度で読み込ませるか確定している場合です。
2.JavaScriptライブラリを使う（今回はRetina.js）。
私はretina.jsというライブラリーを使っています。
jsというと複雑な気がしてノンプログラマは敬遠しがちですが、それほど複雑なものではありません。
上記からスクリプトをDLして読み込むだけで設定は完了です。
[html]
<script type="text/javascript" src="/scripts/retina.js"></script>
[/html]
あとは高解像度用の画像にはファイル名の最後に@2xとつけたものを用意するだけです。
- 例
- 通常画像：sample.png
- 高解像度用画像：sample@2x.png
HTMLには
[html]
<img src="./img/sample.jpg" />
[/html]
と書きます。
もし同一のファイル名に@2xと付いた画像があればサーバーからダウンロードして差し替えてくれます。
なので、通常サイズの画像と高解像度用の画像と2パターン読み込む事になるので、retinaディスプレイのような端末には負担が増えてしまいます。
向いている設計としては、通常サイズの画像を基本として読み込み、高解像度用の画像は選定して読み込む場合です。
また、どれを高解像度用に読み込むか決まっていない時も簡単に変更できるので後々の修正がやりやすいです。
軽量化を意識してサイトを作る場合はこの方法がオススメです。
- ［余談］
-
高解像度用の画像と通常サイズの画像を2種類一緒に切り出したいときはこちらのFireworksコマンドが大変便利です。
【Fireworks】Retina対応用にページを分けるFireworksコマンド高解像度→通常サイズに書き出したい場合
FireworksでRetina対応画像の書き出しスクリプト[Titanium Mobile対応]
※@2xが付いている画像を半分のサイズに縮小して、@2xを消してリネームしてくれるので便利です。
3.Media Queriesを使って高解像度用のディスプレイを判定。
Media Queriesでretina化判定して読み込む画像を切り分ける事ができるので下記のように記載します。
[css]
#bg_test1 {
background: no-repeat;
background-image: url(../img/sample.jpg);
width: 320px;
height: 250px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
#bg_test1 {
background-image: url(../img/sample@2x.jpg);
background-size: 320px 250px;
}
}
/*CSSスプライトを使う場合はこんな感じ*/
#splite1 {
background: url(../img/splite.png) no-repeat 0 0;
width: 40px;
height: 40px;
}
@media only screen and(-webkit-min-device-pixel-ratio: 1.5) {
#splite1 {
background-image: url(../img/splite@2x.png);
background-size: 145px 41px;/*高解像度用の縦横半分のサイズを記載*/
}
}
[/css]
きちんと通常サイズの画像と高解像度用の画像を切り分ける事で通信量を抑えることができます。
しかし、背景で画像を読み込む際に毎度書くのは面倒ですね…
向いている設計としては、通常サイズの画像を基本として読み込み、高解像度用の画像は選定して読み込む場合です。
ですので2番のJSを使うタイプの仕様と相性が良いので、軽量化を意識してサイトを作る場合は私はこの方法と合わせて使います。
スマホと非retinaのPCで見比べると表示される画像が違うので違いがわかりやすいです。
まとめ
LTEが順次拡大しているとはいえ、スマホは通信量を抑える事はまだまだ重要視される部分だと思います。
綺麗なのは良いのは当たり前なのですが、そのために読み込みに時間がかかってユーザーにストレスを与えてしまってはせっかくの綺麗な画像も意味がありません。
何も考えずに高解像度用の画像を用意するのが決して悪いとはいいませんが、私は必要なところだけ綺麗にしてユーザーに快適なサイトを提供したいと思っています。
作って「はい、終わり」のサイトでは無くて、「どの画像に需要があるか・ないか」は運営しながら見極めたい。
正解なんてはじめから用意されているわけないのですから、泥臭く手探りでやるのが一番の近道かなと。
- ［余談］
- クライアントがページ開いた時に読み込み遅いとか、画像汚いとか言われた時に瞬時に調整できるのでJS+Media Queriesの方法はオススメ。