前回「スマホ用の画像は倍の大きさで作るべし」と言ったものの、もう少し突っ込んで調べたら、そう単純ではないらしい。
サムスン電子の「GALAXY SⅡ」、「Nexus S」、ソニーモバイルコミュニケーションズの「Xperia(SO-01B)」などのAndroid端末では１．５倍にする必要があるようです。
スマートフォンに採用されているWebKit系のブラウザでは、画像をデバイス上で何倍にして表示するかの設定が、devicePixelRatioとして定められているらしい。
この数値はCSS３のMediaQueriesで識別可能。
devicePixelRatioの値が1なら等倍の画像を使えばいいし、
値が1.5なら1.5倍で制作した画像を使いタテヨコ幅を1倍で指定すればいいし、
値が2なら2倍で制作した画像を使いタテヨコ幅を1倍で指定すればいい。
以下はCSS記述（概略）
.logo {
background:url(logo_x100.png); /* 100%画像 300px 54px */
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
media only screen and (min-device-pixel-ratio:1.5) {
.logo {
background: url(logo_x150.png); /* 150%画像 450px 81px */
-webkit-background-size: 300px 54px;
background-size: 300px 54px;
}
}
@media only screen and (-webkit-min-device-pixel-ratio:2),
media only screen and (min-device-pixel-ratio:2) {
.logo {
background:url(logo_x200.png); /* 200%画像 600px 108px */
-webkit-background-size: 300px 54px;
background-size: 300px 54px;
}
}
これによりデバイスに合った画像を読み込んでくれるのが利点。PCなら等倍の画像を読み込み縮小することなくそのまま表示し、iPhoneなら２倍の画像を読み込み縮小表示となります。
スマートフォンは移動中は３G回線等の細い回線を使うことになるので、1.5倍や2倍の画像を工夫して・・・色数を減らすとか、影付けをやめるとか、グラデーションを止めベタ塗りにするとかして・・・ファイル容量を減らすと良いかも知れません。
これまでの表示。
クリックして拡大しないと違いは判りにくいですが、イメージがぼやけています。
高精細ディスプレイゆえ、1pxを2pxに拡大して表示している訳です。
実際のディスプレイのタテヨコ幅は小さいので、そのまま表示しては、文字が小さくなり読めません。
改善後・・・2倍の画像を使用した場合。
クリックして拡大した画像を比べると違いは一目瞭然。
ただし、アクセス・カウンタの画像は等倍のままです。・・・phpスクリプトを修正すれば、改善できるのかなあ・・・
まあ、画面キャプチャーしない限り、それほど違いが気になるものでもないと、個人的には想うのですが・・・。
PCでの表示。
クリックして拡大した画像を比べると、スマートフォンのディスプレイはピクセルの精細さが倍であることが良く判りますね。
・・・この辺で、やっとviewpointの存在意義が、ちょっとだけ理解できたような気がします・・・。
・・・今更？・・・＾＾