前回は、CSSスタイルの切り替えでデバイスごとにレイアウトを最適化する「レスポンシブデザイン」について解説しました。レスポンシブデザインは、PC向けとスマートフォン向けで同じHTMLを表示します。コンテンツに唯一のURLを与えられる点が特徴です。

　しかしネガティブな側面もあります。通信環境の違いに配慮していない点です。PCは光回線など高速な通信環境で利用できます。一方モバイルの多くは比較的低速の3G回線で、しかも移動しながら利用するので通信が途切れることもあります。このためモバイル用のページは、PC用より読み込みやすいコンテンツにチューニングすべきなのです。

　とはいえ、スマートフォンがメインターゲットになるプロジェクトはまだ少なく、現状ではPC向けに最適化したページを見かけ上スマートフォン向けに調整する、といった方法が一般的です。この結果、モバイル端末から閲覧する際の使い勝手（ユーザビリティ）が著しく低下することになります。

　特にユーザビリティを悪化させるのは、何といっても写真やビットマップなどベクトルデータではない画像の素材でしょう。

　スマートフォンの画面は、見かけは小さくても1インチ当たりに詰め込むことができるピクセル数はPCをしのぎます。iPhone 4で採用されたRetina Displayが代表例です。非常にきめが細かいのです。スマホのブラウザはデバイスの解釈する解像度とは別に「CSSピクセル」という解釈を持っています。これがあるためにPC向けの画像は、スマホのブラウザで1.5から2.0倍くらいピクセルが拡大されて表示されます。スマホのブラウザがビットマップ画像をズームして表示することになるので、72dpi程度の解像度しかない素材はボケてしまいます。スマートフォンは、通信環境が今ひとつでも必要な画像解像度はPCよりも高い、という矛盾を抱えたデバイスといえます。

　画像のデータ量の問題以上に気を付けなければならないのが、HTTPリクエストの数の問題です。画像は基本的に、＜img src=URI名＞でHTMLに埋め込みますが、このようにURLを参照する度にHTTPリクエストが発生します。参照が多いとその分リクエストが多くなり、表示が遅くなります。よって、img srcを多く書かずに、できれば１つにまとめるなどの工夫が欠かせません。

　このようにマルチディスプレイ対応は、形だけを整え直すのではダメで、データを最適化する必要があるのです。