携帯サイト画像：画面サイズ問題

携帯サイト制作の肝とも言える画像問題について考えます。根本の問題は２つです。

1. 機種毎に画面サイズが異なる
2. 機種毎に容量が異なる

ここでは画面サイズの問題にフォーカスします。歴史的経緯（？）から過去の端末において、端末のブラウザーからはみ出してしまうとエラーになり、表示されないという問題がありました。つまり、

• 大きすぎて表示できない

ということです。この問題に対処するのが一般的な画像変換ソリューションであり、大きすぎてエラーになってしまう事態を防止します。
しかし

一般的な画像変換ソリューションでは、大きすぎない、つまり画面に収まる画像は変換しません。この時、１つの問題が発生します。それは、サイズ変更をする画像としない画像が１ページ中に混在するので、当然レイアウトが変化してしまうことです。せっかく綺麗にレイアウトしても別の画面サイズの端末で見るとレイアウト崩れが生じてしまうのです。

これを防ぐ手段として、変換しない画像に関しては大中小別の画像を用意して切り替えつつ、ブラウザーのレンダリングによる崩れを計算できる範囲内に収めるために、１つの高さに１つの画像だけを配置するようにしたりします。2つ以上の画像をおきたい時は、それぞれのサイズを綿密に計算して、合計サイズが基準となる画面幅より小さくなるようにし、さらにセンタリングによって隙間が目立たないようにします。

ラウンドアバウトのアプローチは、このような複雑な手段を講じる必要がないよう、全ての画像を変換します。全ての画像が画面サイズと連動して縮小されるので、レイアウトが崩れることはありません。ラウンドアバウトがあれば、サイトの基準となる幅である推奨48opxにきっちりレイアウトするだけで、全ての端末で同じデザインとすることができます。

余談ですが、サイズオーバーでエラーになる問題自体はだんだんとブラウザーが対応してきているので、それほど大きくなければ実はあまり問題にはありません。例えば229pxの端末に240pxの画像を表示させてもエラーは起きずに表示できます。

この問題については、ラウンドアバウトの製品サイトで図表を使ってわかりやすく解説しています。

VGA時代の到来