7. サイズに気をつけて画像を掲載する
次に、画像を掲載してみましょう。
 |
画像の掲載には、PC用サイトを作る場合と同じようにimg要素を使います。しかし、注意点が3つあります。
(1) 画像形式は、GIF または JPEG
(2) ページの総サイズが 100KB以内(程度)に収まるように
(3) 画像の横幅は 240ピクセル弱にしておく
■画像形式は、GIF または JPEG
一般にウェブ上で使われる画像形式には、GIF・PNG・JPEGの3種類があります。 GIFとPNGはイラストなど色の境目がハッキリした画像に向いている形式です。 JPEGは写真などのように境目がハッキリしない画像に向いている形式です。
PC用ブラウザであれば、GIF・PNG・JPEGのどの形式でも表示できるのが一般的ですが、携帯端末はそうとは限りません。
例えば、docomoのほとんどの端末ではPNG形式を表示できませんので、PNG形式は今のところ避けておいた方が良いでしょう。
※docomoの端末では、2009年5月発売の機種で初めてPNG形式がサポートされました。（それ以前に発売された端末では、PNG形式は表示できません。）
■ページの総サイズが 100KB以内(程度)に収まるように
携帯端末では、一度に扱えるページサイズ（キャッシュ容量）に制約があります。 その容量を超えたページを読み込もうとした場合は、超えた分のデータが読み込まれない可能性があります。 画像ファイルは特にサイズが大きくなりがちなので、掲載する画像のファイルサイズに注意しましょう。
最新の機種では500KBまで読み込めるような端末もありますが、まだ多く使われている端末はもっと低容量です。 そのため、多くとも100KBは超えないように作っておきましょう。
※もっと古い機種もできるだけ対象にしたければ、50KB弱程度を上限と考えておく方が良いようですが。
なお、「1画像ファイルのサイズが100KB以内なら良い」のではありません。 1ページを構成するHTMLファイルも画像ファイルもすべてあわせた総容量が制限サイズを超えないようにしなければならないので注意して下さい。
■画像の横幅は 240ピクセル弱に
携帯端末では、だいたい画面の横幅が240ピクセルだと考えておきましょう。 端末によって異なりますが、現在ではだいたい240ピクセルが一般的なサイズだと考えておけば良いようです。
なお、ページが縦に長い場合に、スクロールバーを表示する端末もあります。 その場合、実際に表示に使える横幅は240ピクセルを少し下回ります。 表示できる横幅を超える画像は自動的に縮小されるため、画像内に文字が描かれている場合は、細かな文字が潰れてしまう可能性があります。 画像は、だいたい横幅230ピクセル程度を上限に作るのが良いでしょう。
【携帯サイトの作り方 第1回 目次】
1. はじめに・サンプル
2. XHTMLでベースを作る
3. HTTPヘッダでMIMEタイプを出力
4. 使える装飾方法と使えない装飾方法
5. 文字色・背景色・文字サイズなどの装飾基本
6. マーキー(流れる文字)を作る
7. サイズに気をつけて画像を掲載する (このページ)
8. リンク・ページ内リンクを作る
9. ソースのまとめ
