携帯電話キャリアの違いでも解説しましたが、モバイル向けサイトで用いられる画像について改めて解説します。
全機種で使えるサイトにするには (平成19年 1月11日 更新)
画像にリンクする際の注意事項 (平成19年 5月12日)
初期の端末は最大横96ピクセルズ・縦72ピクセルズ程度でした。
しかし、現在ではQVGA液晶端末が主流で、その場合240×320ピクセルズが標準となります。
但し、今も海外メーカの端末などで低解像度の端末も出されており、その場合120×160ピクセルズ程度となります。
このため、画像をコンテンツとするのであれば、閲覧端末に合わせて適宜撰べるようにすると良いでしょう。
携帯端末では、画像形式ごとに制限があります。
制限は各社ごとに違いがありますが、なるべく多くの端末で表示出来るようにするとした場合は以下のようになります。
GIF画像対応端末の場合、概ねアニメーションも表示可能です。
但し、アニメーションGIF画像については以下の制限がありますのでご注意下さい。
インタレースGIF画像や透過GIF画像については、現行端末では制限を持つ端末は無いので、問題は無いでしょう。
プログレッシヴJPEG画像に対応していない端末がありますので、必ずベースライン方式にして下さい。
EZウェブの旧世代機では256色以下のPNG画像に変換されるため、減色の影響がある事に注意して下さい。
PNG画像の場合、フルカラーも可能ですが、携帯端末向けの画像であれば、必ずインデックスドカラー(256色以内)にして下さい。
また、アルファチャネルは使わず、透過度パレットも単一パレットのみ完全透過でその他は完全不透過となるようにします。
インタレースPNG画像にも対応していない端末もありますので、インタレースPNG画像も使わないようにして下さい。
ソフトバンクのパケット旧型機とV801シリーズでは
ソフトバンク端末向けにMNG動画を用いる場合、
と使える画像が異なります。
結局、
にすればいい事になります。
このためには、サーヴァがアクセスしてきた端末を識別して、
などと言った技術が必要になります。
しかしながら、これらの技術はかなり難しく、またこれらの技術の導入を認めないサーヴァ管理会社も少なくない事から、容易に利用出来る技術とは言えません。
CGIなどのサーヴァ側での技術を用いないのであれば、以下のどちらかを選択する必要があります。
ソフトバンク旧型機専用版にはPNG画像を使用し、ｉモード版にはGIF画像を用います。
この場合、その他の端末ではどちらも見られる事になります。
閲覧者は手動で適切なコンテンツを撰ぶ事になるでしょう。
ソフトバンク旧型機ではJPEG非対応機(初期の端末)は殆ど残っておりませんが、ｉモード端末でJPEG表示の出来ないものはまだあるようですので、どうしてもそう言った端末にも画像を見てもらいたいのであれば代替のGIF画像を用意すれば良いでしょう。
コンテンツではGIF画像のみ用います。この場合ソフトバンク旧型機では画像は表示されません。画像がメインの場合は明らかにソフトバンク旧型機を排除する事になります。
当サイトをご覧頂いている方から、こんな情報をいただきました。
- i-modeとJ-skyとEZ-webで同じ画像を表示させる（ウラ技！？）
スクリプトをミスって発見しました。
まず、同一画像を「GIF」と「PNG」で保存します。
表示させたい部分に以下のタグを書きます。
<IMG src="画像.png" src="画像.gif" width="○○" height="○○" border="0">J-sky、EZ-web、PCは最初のPNGを認識し、i-modeはGIFを認識します。
間違えているのに２つ表示されないので、不思議に思って色々な端末でチェックしたら、どちらか１つだけ表示されるみたいです。
src属性を二つ書く事で、適切なリソースである方を撰んでもらうと言う事ですが、この方法は失敗する確率が高いと思われます。
情報を頂いて、PC向けのブラウザで調べてみたところ、どのブラウザも表示の可否に拘らず一番目のsrc属性を認識しておりました。
当時は問題なく表示出来たようですが、現在も有効かどうかは分かりません。
HTMLのDTDに反するため解説を忌避しておりましたが、制作者は、
で同じHTML文書でウェブプログラム無しで画像振り分けを行える方法を知っております。
これについては、全携帯電話で画像表示出来るHTML文書の書き方で解説しておきました。
待ち受け画像などをメインコンテンツとするサイトでは、しばしば公開したい画像に直接<a>要素でリンクします。
ですが、これは好ましくありません。
なぜなら、画像表示出来ない状況では何のコンテンツか分からなくなるからです。
そして何よりも、この方法は現実的にも大変危険なのです。
余り知られていませんが、ソフトバンク端末の仕様では<a>要素で画像に直接リンクしても表示されない事とされております。
一応ダウンロードは行われるのですが、アンカーを突いた直後には表示されないと言う事です。
あくまでも仕様として定めているものなので、実装では直接リンクされた画像を表示出来る端末もあるかも知れません。
特に現行のパケット機(現行機を含む)に搭載されているウェブブラウザは、概ねEZウェブやエアーエッジフォンなどの他キャリアで直接リンクされた画像を表示出来る事が確認されているもの(オープンウェーヴ社のモバイルブラウザやネットフロントなど)が使われております。
特にソフトバンク端末で安全に待ち受け画像などを頒布したいのであれば、画像に直接リンクせずに画像を埋め込んだ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>画像の題名</title></head><body><h1>画像の題名</h1><p><img alt="このページでは○○○○の画像を配布しております。" src="Image.JPG" width="幅" height="高さ" /></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" 属性となります。
