携帯に大量の画像を表示させてみる

携帯サイト作成の苦労のひとつに「画像」があるようです。

携帯電話には画像領域やキャッシュ容量などがあるので大変そうなイメージはつきますが、正直、「容量とサイズを小さくすれば良いのか。画像ソフトがあれば出来そうかな。」という気持ちです。

今回は画像を17枚つかって表現されているものを、「可能な限りレイアウトを崩さず、綺麗な画像で表現」を意識してDoCoMo、au、Softbank携帯でみれるようにしたいと思います。

画像サイズと容量を変えるだけなので簡単かと思ったのですが、携帯独特の動きに案外苦戦しました。

大量画像を携帯で表示させてみる

以下17枚の画像をDoCoMo N905i、au K002、Softbank 920Pでもみれるように調節します。このサンプル画像は、シンメトリックの携帯サイトにあるラウンドアバウトという製品を体感してもらうためのサンプル画面です。（モバイル用サイト →https://www.symmetric.co.jp/m）

見本（サンプル画像）

ラウンドアバウトを使わずに、これをDoCOMo、au、Softbank携帯で同じように表示出来るように加工します。

上図はラウンドアバウトを使っているので携帯で表示されていましたが、変換前は普通の大きな画像ファイルです。その画像ファイル情報を以下に記載します。上から”ファイル名”、”画像サイズ”、”容量”となっています。

計算すると総容量1197KBとなり携帯電話で表示できる大きさではないので、これを携帯電話にあわせて加工していきます。N905i、K002、920Pの製品仕様を以下に記載します。

• N905i（DoCoMo） 画像領域：幅240px縦320px；キャッシュ容量：100KB；
• K002（au） 画像領域：幅232px縦325px；キャッシュ容量：130KB；
• 920P（Softabnk) 画像領域：幅471px縦700px；キャッシュ容量：300K；

どのように携帯に合わせて作っていくのか

各キャリアの携帯仕様に合わせ全体の比率を考え、理想サイズや容量を計算します。計算が終わったら画像編集ソフトで加工して実際にどう見えているのか検証します。

画像容量を小さくするのは大変なのでキャッシュ容量が少ない方が作りにくいだろうと想定し、Softbank→au→DoCoMoの順番で作ります。

画像容量、サイズの計算方法

見本（サンプル画像）をもとに比率を決めます。同じサイズの画像をグループにしてそれぞれ①、②、③と仮名します。（下図参照）一番綺麗にみえる比率を考え①：②：③＝16：9：4 とし、これをもとに画像容量、サイズを求めます。

画像容量を計算する際は、携帯仕様のキャッシュ容量からHTMLファイルのテキスト容量分として5KBひいて計算し、画像はjpegファイルなので圧縮で小さくしていきます。

携帯ごとの理想サイズや容量を記載します。

レイアウト方法

レイアウトはtebleタグで配置します。画像1つ1つにtdタグをつけ画像=1セルとして扱うのが一番楽なのですが、そうするとレイアウトで困ることがないので今回はあえて画像3個をtdタグでくくって1セルとします。（下図参照）

画像周辺の隙間をなくす為に、tableタグでcellpaddingとcellspacingを0ｐｘに設定します。

完成しました

Softbank 920P （画像総容量 273KB）

au K002 （画像総容量 187KB）

DoCoMo N905i （画像総容量 30.3KB）

何とか同じレイアウトで表現できましたが、画像が綺麗な状態で容量を小さくするのは案外大変でした。この過程で気づいたことがあるので以下に記載します。

• ソースを見やすくする為にimgタグの間に改行を入れると妙な隙間があいてしまうので、ソースは必ず詰めてかく。
• DoCoMoはcellpaddingとcellspacingがデフォルトで1px（変更不可）なので、画像の幅を決めるときは（全体幅）－（cellpaddingとcellspacingの1px）をしてから画像幅を計算する。 今回は4pxひいて計算しました。
• jpegの圧縮だけで画像容量を下げるとかなり画質が悪くなる場合がある（下図）ので、その際は減色をして下げる。 フリーソフト等で減色できます。

• 仕様としてはっきりされていないので何とも言えませんが、auは画像の総容量が130Kを超えても表示されました。おそらくau端末でのキャッシュ容量とは1画像の容量なのかなと推測されたのですが･･･詳細は不明です。

もし、同じようなことを経験される方がいらっしゃれば気をつけてみて下さい。

所感

携帯サイトで画像を取り扱うことが大変と言われているようですが、実際想像以上に大変でした。

「画像の容量をとにかく軽くして、時間がかかっても良いからやる。」という条件ならそこまで大変ではないのかと思います。しかし実際に携帯サイトを制作する方は時間をあまりかけられないし、携帯サイトを使う人が見て何の画像か分かるようにしないといけないので、画像の鮮明さを追求するだろうと思い、その気持ちで取り組んでみました。

Excelで計算の効率をあげてみたり、画像編集で圧縮だけでなく減色を使うなど工夫を凝らしました。しかし時間が3～4日もかかってしまい、携帯サイトで画像を取り扱う
ことの大変さを実感しました。

シンメトリックに入社するまで意識していませんでしたが、いま世の中にある様々な携帯サイトをみてみると絵文字や文章などで画像をあまり使わずに綺麗に見せていることに気づきます。その工夫も素晴らしいと感じますが、画像をもっと簡単に扱えるようになったらどんな携帯サイトが出てくるのか、楽しみだなと思いました。