携帯電話キャリアの違いでも解説しましたが、モバイル向けサイトで用いられる画像について改めて解説します。
全機種で使えるサイトにするには (平成19年 1月11日 更新)
画像にリンクする際の注意事項 (平成19年 5月12日)
初期の端末は最大横96ピクセルズ・縦72ピクセルズ程度でした。
しかし、現在ではQVGA液晶端末が主流で、その場合240×320ピクセルズが標準となります。
但し、今も海外メーカの端末などで低解像度の端末も出されており、その場合120×160ピクセルズ程度となります。
このため、画像をコンテンツとするのであれば、閲覧端末に合わせて適宜撰べるようにすると良いでしょう。
携帯端末では、画像形式ごとに制限があります。
制限は各社ごとに違いがありますが、なるべく多くの端末で表示出来るようにするとした場合は以下のようになります。
GIF画像対応端末の場合、概ねアニメーションも表示可能です。
但し、アニメーションGIF画像については以下の制限がありますのでご注意下さい。
インタレースGIF画像や透過GIF画像については、現行端末では制限を持つ端末は無いので、問題は無いでしょう。
プログレッシヴJPEG画像に対応していない端末がありますので、必ずベースライン方式にして下さい。
PNG画像は、対応出来ない端末があるので、原則としてモバイル向けサイトでは使ってはいけません。
対応出来ない端末に対して何らかの対応を行うのであれば、以下の制約に従ってください。
PNG画像の場合、フルカラーも可能ですが、携帯端末向けの画像であれば、必ずインデックスドカラー(256色以内)にして下さい。
また、アルファチャネルは使わず、透過度パレットも単一パレットのみ完全透過でその他は完全不透過となるようにします。
インタレースPNG画像にも対応していない端末もありますので、インタレースPNG画像も使わないようにして下さい。
旧型機は殆ど利用されていないので、現行機種に絞って考えたとしても、GIF画像かJPEG画像のいずれかにしなければなりません。
PNG画像は、ドコモのｉモードブラウザ 1.0 搭載端末では表示出来ません。
ドコモのｉモードブラウザには2.0も出てきており、こちらはPNG画像にも対応しておりますが、1.0端末も引続き発売が続いております。
現実問題として、2.0端末は高価なので、1.0端末も当面出し続けざるを得ないのでしょう。
以上の理由から、携帯電話向けサイトを作る場合、ドコモには別形式に変換するなどの配慮を行わない限りは絶対にPNG画像を使ってはいけません。
待ち受け画像などをメインコンテンツとするサイトでは、しばしば公開したい画像に直接<a>要素でリンクします。
ですが、これは好ましくありません。
なぜなら、画像表示出来ない状況では何のコンテンツか分からなくなるからです。
そして何よりも、この方法は現実的にも大変危険なのです。
余り知られていませんが、ソフトバンク端末の仕様では<a>要素で画像に直接リンクしても表示されない事とされております。
一応ダウンロードは行われるのですが、アンカーを突いた直後には表示されないと言う事です。
あくまでも仕様として定めているものなので、実装では直接リンクされた画像を表示出来る端末もあるかも知れません。
特に現行のパケット機(現行機を含む)に搭載されているウェブブラウザは、概ねEZウェブやエアーエッジフォンなどの他キャリアで直接リンクされた画像を表示出来る事が確認されているもの(オープンウェーヴ社のモバイルブラウザやネットフロントなど)が使われております。
特にソフトバンク端末で安全に待ち受け画像などを頒布したいのであれば、画像に直接リンクせずに画像を埋め込んだHTML文書をリンクするようにしましょう。
具体的には、以下のようにすれば良いでしょう。
画像リンク元の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>
実は、<a>要素にはリンク先がどんなメディアかを明示するtype属性がHTMLの仕様で定められております。
この属性値を記述する事で、画像に対応出来ないユーザエージェントでは利用者を混乱させないためにアンカーとして表示せずに通常の文字と見なして表示するような取扱いも期待出来ます。
しかしながら、実際にはそのような気の利いた取扱いをしているユーザエージェントは今のところ皆無で、絵に描いた餅のような状況となっております。
例えばリンク先がGIF画像である場合、以下のように記述します。
<a href="Image.GIF" type="image/gif">画像(GIF画像)</a>type="image/jpeg" 属性となります。
