スマホサイトで画像サイズはいくつにすべきか？
スマートフォン端末が急増してきて、スマートフォンサイト制作をお考えの方も多いことでしょう。そこで素朴な疑問として出てくるのが画像サイズを何を基準に作成するべきか？ってことです。各スマートフォンが持つブラウザ横幅と解像度が必ずしも一致しないので、一体何を基準に作ればよいかわからなくなります。今回はこの疑問を解決すべく、実際に主なスマートフォン端末の画面解像度である320px、480px、640pxについて種類の異なる画像を用意し、、実機で見たときにどの程度の違いがあるかを検証してみました。
調査結果としては、以下の通りでした。
| iPhone3GS | iPhone4 | Xperia arc | |
| 640px画像 | ○ | ○ | ○ |
| 480px画像 | ○ | △ | ○ |
| 320px画像 | ○ | × | △ |
| iPhone3GS | iPhone4 | Xperia arc | |
| 640px画像 | ○ | ○ | ○ |
| 480px画像 | ○ | ○ | ○ |
| 320px画像 | ○ | △ | ○ |
私の結論を先に言ってしまうと、
480px基準の画像で作成し、通信量を抑えつつも画像の綺麗さも担保する
が一番ベストな方法だと思います。
では、次から今回の結論に至った、実際の調査内容について触れていきたいと思います。
関連記事：
検証の前提
今回の実機検証について、以下を前提とします。
- viewportの設定は
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”>
とします。
- 320px、480px、640pxという解像度の異なる画像を作成し、480px、640pxについてはHTMLのwidth属性で320px基準の大きさと同じになるように指定します。
- 画像は2種類、写真（JPEG）とメニュー画像（PNG)。
- 実機はiPhone3GS,Xperia arc,iPhone4
検証画像は「メニュー画像」と「写真画像」
以下のメニュー画像と少女写真を配置した簡単なスマートフォンサイトを作成して、各端末での表示の違いを見てみました。
画像サイズによって視認性の違いがはっきりと出る「メニュー画像」
まずは解像度として一番低スペックな端末ながら、ブラウザ横幅はiPhone4など同じ320pxを持つiPhone3GSでの表示を確認してみました。
確認端末： iPhone3GS
ご覧頂いてもわかる通り、640px、480px、320px基準いずれの大きさで作成したメニュー画像でもiPhone3GSでは文字情報の視認レベルに大きな差がないことがわかると思います。
次にiPhone4で確認してみました。ブラウザ横幅は320pxですが、640pxの高解像度を持つ端末でiPhone3GSと比べると4倍のピクセル密度を持つ端末になります。
確認端末： iPhone4
iPhone3GSと比べ、iPhone4ではそれぞれの画像での違いが見られます。640px画像がやはり一番綺麗でフォントがくっきりと表示されています。480px画像については視認レベルでは大きな問題はないものの、やはり「会社情報」や「お問い合わせ」のような細かい文字情報については若干ボヤけて見えます。320px画像については全体的にボヤっとした画像になってしまい、iPhone4で表示するメニューとしてはちょっと厳しいかもしれません。
次に、解像度としてはiPhone3GSとiPhone4の中間にあたる480pxであるAndroid端末 Xperia arcの場合を見てみましょう。
確認端末： Xperia arc
Xperiaでは640px、480pxは視認レベルに全く問題なく、320pxだけはやはり全体的にちょっとぼやけた状態になっています。
以上の結果を踏まえて、今回のメニュー画像についてまとめると以下になります。
| iPhone3GS | iPhone4 | Xperia arc | |
| 640px画像 | ○ | ○ | ○ |
| 480px画像 | ○ | △ | ○ |
| 320px画像 | ○ | × | △ |
画像サイズに大きく左右されない「写真画像」
メニュー画像の次にJPEGの写真画像を見てみましょう。
まずはiPhone3GSから。
確認端末：iPhone3GS
iPhone3GSについてはメニュー画像の時と同様にそれぞれの画像をクリックして拡大した画像をご覧頂いても、3つとも大きな差がないことがわかると思います。
次にiPhone4の場合です。
確認端末：iPhone4
iPhone4とiPhone3GSを比べて見ても、一見では3つの画像の大きな違いはないように感じます。画像をクリックして拡大しても私のような写真の素人からしたら、そんなに違いがわかりません。よく見ると320px画像の場合に少女の左顎・左頬のラインが若干ギザギザしていると思いますが、その程度です。
では、中間のXperia arcはどうでしょう。
確認端末：Xperia arc
こちらも違いはほとんどないように見えます。
という次第で、写真
関連記事：