スマホサイトで画像サイズはいくつにすべきか? | スマホ | Webサイト開発

スマートフォン端末が急増してきて、スマートフォンサイト制作をお考えの方も多いことでしょう。そこで素朴な疑問として出てくるのが画像サイズを何を基準に作成するべきか?ってことです。各スマートフォンが持つブラウザ横幅と解像度が必ずしも一致しないので、一体何を基準に作ればよいかわからなくなります。今回はこの疑問を解決すべく、実際に主なスマートフォン端末の画面解像度である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メニュー画像

確認端末: iPhone3GS

ご覧頂いてもわかる通り、640px、480px、320px基準いずれの大きさで作成したメニュー画像でもiPhone3GSでは文字情報の視認レベルに大きな差がないことがわかると思います。

次にiPhone4で確認してみました。ブラウザ横幅は320pxですが、640pxの高解像度を持つ端末でiPhone3GSと比べると4倍のピクセル密度を持つ端末になります。

iPhone4_menu

確認端末: iPhone4

iPhone3GSと比べ、iPhone4ではそれぞれの画像での違いが見られます。640px画像がやはり一番綺麗でフォントがくっきりと表示されています。480px画像については視認レベルでは大きな問題はないものの、やはり「会社情報」や「お問い合わせ」のような細かい文字情報については若干ボヤけて見えます。320px画像については全体的にボヤっとした画像になってしまい、iPhone4で表示するメニューとしてはちょっと厳しいかもしれません。

次に、解像度としてはiPhone3GSとiPhone4の中間にあたる480pxであるAndroid端末 Xperia arcの場合を見てみましょう。

Xperia

確認端末: Xperia arc

Xperiaでは640px、480pxは視認レベルに全く問題なく、320pxだけはやはり全体的にちょっとぼやけた状態になっています。

以上の結果を踏まえて、今回のメニュー画像についてまとめると以下になります。

iPhone3GS iPhone4 Xperia arc
640px画像
480px画像
320px画像 ×
画像解像度の違いによるメニュー画像の視認レベル

画像サイズに大きく左右されない「写真画像」

メニュー画像の次にJPEGの写真画像を見てみましょう。

まずはiPhone3GSから。

iPhone3GS_640iPhone3GS_480iPhone3GS_320

確認端末:iPhone3GS

iPhone3GSについてはメニュー画像の時と同様にそれぞれの画像をクリックして拡大した画像をご覧頂いても、3つとも大きな差がないことがわかると思います。

次にiPhone4の場合です。

iPhone4_640iPhone4_480iPhone4_320

確認端末:iPhone4

iPhone4とiPhone3GSを比べて見ても、一見では3つの画像の大きな違いはないように感じます。画像をクリックして拡大しても私のような写真の素人からしたら、そんなに違いがわかりません。よく見ると320px画像の場合に少女の左顎・左頬のラインが若干ギザギザしていると思いますが、その程度です。

では、中間のXperia arcはどうでしょう。

Xperia_640Xperia_480Xperia_320

確認端末:Xperia arc

こちらも違いはほとんどないように見えます。

という次第で、写真