携帯電話向けの画像。
携帯電話キャリアの違いでも解説しましたが、モバイル向けサイトで用いられる画像について改めて解説します。
画像の解像度。
初期の端末は最大横96ピクセルズ・縦72ピクセルズ程度でした。
しかし、現在ではQVGA液晶端末が主流で、その場合240×320ピクセルズが標準となります。
但し、今も海外メーカの端末などで低解像度の端末も出されており、その場合120×160ピクセルズ程度となります。
このため、画像をコンテンツとするのであれば、閲覧端末に合わせて適宜撰べるようにすると良いでしょう。
- 尚、画像が画面に入り切らない場合、殆どの端末ではスクロールを発生させるか、縮小表示するようになっております。
画像形式ごとの制限。
携帯端末では、画像形式ごとに制限があります。
制限は各社ごとに違いがありますが、なるべく多くの端末で表示出来るようにするとした場合は以下のようになります。
GIF画像の制限。
アニメーションGIF画像の制限。
GIF画像対応端末の場合、概ねアニメーションも表示可能です。
但し、アニメーションGIF画像については以下の制限がありますのでご注意下さい。
- アニメーションGIF画像では、最大五コマ以内とします。五コマ以上のアニメーションは表示出来ない場合があります。
- 各コマは、必ず全て画像と同じ大きさで相対位置を(0,0)にします。異なった大きさのコマが混在してたり、相対座標が(0,0)でないコマが混在していると正しく表示出来ない場合があります。
- EZウェブの現行機では、アニメーションの繰返し回数を画像側で指定しても無視されます。その一方で、ｉモード端末ではアニメーションの繰返し数に制限を設けているため、一定回数繰返すと最後のコマのまま静止する事になります。つまり、アニメーションの繰返し数を制作側は一切制禦出来ません。
- 各コマとコマの間の遅延時間は必ず一単位(百分の一秒)以上にします。つまり、複数コマの同時表示はしないようにして下さい。
静止GIF画像の場合。
インタレースGIF画像や透過GIF画像については、現行端末では制限を持つ端末は無いので、問題は無いでしょう。
- 但しｉモードの白黒専用機でインタレースに対応していないものがあり、その場合画像が崩れます。
JPEG画像の制限。
プログレッシヴJPEG画像に対応していない端末がありますので、必ずベースライン方式にして下さい。
PNG画像の制限。(平成22年 3月30日 更新)
PNG画像は、対応出来ない端末があるので、原則としてモバイル向けサイトでは使ってはいけません。
対応出来ない端末に対して何らかの対応を行うのであれば、以下の制約に従ってください。
PNG画像の場合、フルカラーも可能ですが、携帯端末向けの画像であれば、必ずインデックスドカラー(256色以内)にして下さい。
- また、トゥルーカラーのPNG画像はファイルサイズが大きくなるため、携帯端末向けではありません。
また、アルファチャネルは使わず、透過度パレットも単一パレットのみ完全透過でその他は完全不透過となるようにします。
インタレースPNG画像にも対応していない端末もありますので、インタレースPNG画像も使わないようにして下さい。
全機種で使えるサイトにするには。(平成22年 3月30日 更新)
旧型機は殆ど利用されていないので、現行機種に絞って考えたとしても、GIF画像かJPEG画像のいずれかにしなければなりません。
PNG画像は、ドコモのｉモードブラウザ 1.0 搭載端末では表示出来ません。
ドコモのｉモードブラウザには2.0も出てきており、こちらはPNG画像にも対応しておりますが、1.0端末も引続き発売が続いております。
現実問題として、2.0端末は高価なので、1.0端末も当面出し続けざるを得ないのでしょう。
以上の理由から、携帯電話向けサイトを作る場合、ドコモには別形式に変換するなどの配慮を行わない限りは絶対にPNG画像を使ってはいけません。
画像にリンクする際の注意事項。(平成19年 5月12日)
待ち受け画像などをメインコンテンツとするサイトでは、しばしば公開したい画像に直接<a>要素でリンクします。
ですが、これは好ましくありません。
なぜなら、画像表示出来ない状況では何のコンテンツか分からなくなるからです。
- 補足で説明しておりますが、HTMLの仕様ではリンク先のメディア型を指定する事で対応出来ない環境でのリンクを防止出来るようになっております。しかし、この機能は全くと言って良いほど実装されておりません。
そして何よりも、この方法は現実的にも大変危険なのです。
ソフトバンク端末では画像の直接リンクが効かない場合があります。
余り知られていませんが、ソフトバンク端末の仕様では<a>要素で画像に直接リンクしても表示されない事とされております。
一応ダウンロードは行われるのですが、アンカーを突いた直後には表示されないと言う事です。
- 尚、ソフトバンクモバイル社はトップページ以外への日本語コンテンツへのリンクを禁止しているためリンクを張る事が出来ませんが、開発者向けサイトで配布しているウェブコンテンツ開発ガイド[メディア編]の1.3.1. 画像の表示にその事が記述されております(配布されているPDF文書には引用を禁じている旨が書かれているため、内容を引用する事さえ出来ません)。
あくまでも仕様として定めているものなので、実装では直接リンクされた画像を表示出来る端末もあるかも知れません。
特に現行のパケット機(現行機を含む)に搭載されているウェブブラウザは、概ねEZウェブやエアーエッジフォンなどの他キャリアで直接リンクされた画像を表示出来る事が確認されているもの(オープンウェーヴ社のモバイルブラウザやネットフロントなど)が使われております。
安全な画像へのリンク方法。
特にソフトバンク端末で安全に待ち受け画像などを頒布したいのであれば、画像に直接リンクせずに画像を埋め込んだHTML文書をリンクするようにしましょう。
- このやり方には、もう一つの利点があります。それは、何かの理由で画像閲覧が出来ない状況にある方が当該コンテンツにアクセスした際に<img>要素のalt属性で画像の内容などを書いておくなどする事で、状況が把握し易くなると言うものです。
具体的には、以下のようにすれば良いでしょう。
画像リンク元のHTML文書は、以下のようにします。
<ul><li><a href="HORIKITA_Maki-1.html">堀北真希ちゃん(QVGA向け)</a></lo></ul>
一方、リンク先の「HORIKITA_Maki-1.html」は、以下のようにします。
<?xml version="1.0" encoding="shift_jis"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head><meta http-equiv="content-type" content="text/html;charset=shift_jis"><title>堀北真希ちゃん(QVGA向け)</title></head><body><h1>堀北真希ちゃん(QVGA向け)</h1><p><img alt="このページでは堀北真希ちゃんの(QVGA向け)画像を配布しております。" src="HORIKITA_Maki.JPG" width="240" height="320" /></p><hr /><ul><li><a href="元のページのURL">画像メニューに戻る</a></li></ul></body></html>
補足・HTMLの仕様で定められている<a>要素のtype属性について。
実は、<a>要素にはリンク先がどんなメディアかを明示するtype属性がHTMLの仕様で定められております。
この属性値を記述する事で、画像に対応出来ないユーザエージェントでは利用者を混乱させないためにアンカーとして表示せずに通常の文字と見なして表示するような取扱いも期待出来ます。
しかしながら、実際にはそのような気の利いた取扱いをしているユーザエージェントは今のところ皆無で、絵に描いた餅のような状況となっております。
例えばリンク先がGIF画像である場合、以下のように記述します。
<a href="Image.GIF" type="image/gif">画像(GIF画像)</a>- 画像がJPEG画像なら
type="image/jpeg"属性となります。