携帯サイト作成時のサムネイル画像のサイズや容量について

ある人のリクエストで、携帯サイト作成時のお約束事といった携帯サイト作成時の鉄板を紹介します。

今回は、画像について書いときます。

画像フォーマトについて

携帯サイトの画像のフォーマットは、JPEGがほぼきまりです。

GIFやPNGも大丈夫な機種もありますが、その逆でGIFやPNGが駄目な機種もあるので、JPEGで書き出すほうが無難でしょう。

ロゴ画像のサイズと注意点

どういうサイトか一目でわかるために、ページトップの一番上にロゴを置くことが多いと思いますが、幅サイズは240px以内です。

携帯サイトで表示できる幅サイズは240pxまでで、(最新では、それ以上でも問題ないのですが・・)それを越すとページサイズオーバーのために表示されなくなるということがあるので、注意しなければなりません。

しかし、作ったロゴの幅サイズが240pxだからといって問題が無いわけではありません。
というのは、サイトデザインの時に、サイトの両サイドにボーダーをつける場合もあるかと思います。

仮にそのボーダーが1pxの場合ならば、両サイドのボーダーを合わせて2pxになります。
ですので、そのボーダー分を引いた238pxが適することになります。
というのは、240pxで作った場合、ロゴは表示されてもボーダーが表示されなくなることやロゴが勝手に圧縮されることになるので、そこにおいても注意が必要です。

サムネイルについて

続いて、サムネイル画像ですが、サイトデザインにおいて、サムネイル画像を使うことがあるかと思います。
個人的になりますが、携帯サイトは携帯サイト向きに適した画像サイズがあるように思います。
ですので、サムネイル画像に適したサイズと容量をリストにまとめました。

サムネイル画像のサイズと容量

  • 45*45・・・2K以内
  • 60*60・・・3K以内
  • 80*80・・・4K以内
  • 100*80・・・5K以内
  • 240*180・・10K以内

これらのサイズは、何も根拠は無いのですが、これらのサイズのほうが、丁度携帯のモニターに収まる感じがします。

さらに、容量についても、こちらも根拠はなく、自分で行って感じたことです。
画像を多用するようなサイトならば、DoCoMo対策のために、容量を考えてサイトを作成しなければならないので、あくまでも参考ととして考えていただければ幸いです。
補足として、45*45、60*60は画像自体が小さいので、解像度は高めに設定してやらなければなりません。しかし、これ以上になるとサイズも容量も大きくなるので、ボヤけない程度で解像度を設定しておけば問題ないでしょう。

大きめのサイズの画像についても同じですが、綺麗に表示したくなるのがデザイナーの性ですが、綺麗に表示するためには、解像度を上げることになります。ですが、携帯サイトではそれが致命的になりかねません。
ですので、80px以上の画像は、解像度を下げることになります。
上のサイズは、解像度を下げても、これならまだ綺麗に表示されるなぁーと感じた容量ですので、あくまでも参考ととして考えていただければ幸いです

最後に

また、画像以外にも、携帯の絵文字は画像よりも軽いので、ちょっとしたアイコン代わりになるので、画像ですべて解決するのでは無く絵文字の使用はすごく有効的な手段ですので、ページサイズ100Kを超えるような場合は、絵文字でカバーしてみてください。

以上で、携帯サイトのサムネイル画像のサイズと容量についてを終えたいと思います。
結構、個人的主観の内容も含んでいるので、しつこいですが、参考ととして考えていただければ幸いです。

追記

PhotoshopでWeb用に保存をする時に、プログレッシブにチェックをいれている方がおられると思いますが、必ずチェックを外し、プログレッシブJPEGで保存しないようにしてください。

auの一部の端末では、プログレッシブJPEGは対応しておらず表示されません。
ですので、普通のjpegという言い方があってるかはわかりませんが、普通のjpegで保存してください。