フレシキブル・イメージの課題

前述したフレシキブル・イメージの手法によってある程度柔軟なレイアウトへの対応は可能になります。しかし、３G回線での接続も考えられるスマホでの表示の際のファイルサイズや画像がオリジナルサイズより大きく表示された際の画像の乱れなど、実際には課題もいくつか残っています。

１．画像のファイルサイズの問題

max-width:100%を使った手法だと、デスクトップの大きなスクリーンでもスマホで３G回線を使ってユーザがウェブサイトにアクセスする場合、解像度に合わせてファイルサイズの小さい画像を表示するのが望ましいです。しかし、そのような対応をするには、それぞれの環境に合わせて複数の画像を用意したり、スクリーン・サイズごとに表示の切り替えを行う必要があり、手間のかかる作業になってしまいます。

２．CSSで非表示にしても画像はダウンロードされてしまう

CSSでdisplay:noneを使って画像を非表示にしても、HTMLに記述されているコンテンツはダウンロードされています。たとえば、スマホ向けに画像を非表示にしたとしてもバックグラウンドでファイル自体はダウンロードされています。以下のコードを記述したHTMLページを閲覧すると画像は表示されなくても、ダウンロードされているのがわかります。

HTMLコードの例

01   <style>

02   #test-image1.

03   #test-image2 { display: none; }

04   </style>

05

06   <!– 直接画像要素を非表示にする  –>

07   <img src=”cat-meow.jpg” id=”test-image1″ 　　　　　　onload=”alert(‘画像がダウンロードされました’)” />

08

09   <!– 画像が含まれた親要素を非表示にする –>

10   <div id=”test-image2″>

11   <img src=”cat-paw.jpg” onload=”alert(‘親要素の中の画像がダウンロードされました’)” />

12   </div>

※　０７～11行は JavaScriptの”onload”を指定することで、画像　　が読み込まれた際にアラートが表示されるようにしています。

3．各画面サイズでアートディレクションが必要な場合の対応

端末ごとに画像の見せ方を変えたい（アートディレクションが必要な）場合、現状それを簡単に実装できる方法はありません。

4．高解像度スクリーンへの対応

iPhone 5/4S や Gallaxy S Ⅲなどの端末ではピクセル密度が高くCSSピクセル率が1.5～2倍のものがあり、それらの画面で鮮明な画像を表示するには、1.5～2倍の解像度の画像を用意する必要があります。何も対策を講じない場合、それらの端末で解像度の小さい画像を表示させた際に画像がぼやけて見えてしまいます。

５．Internet Explorer 6

IE6ではmax-widthがサポートされていないため、width:100%を使用する必要があります。その際、サムネイルなどの小さい画像も100％表示になってしまうので注意が必要です。また、Windows版 Firefox2とIE6で、画像がスケールされた際に画質が荒く表示される現象が起こります。Marcotte氏の著書「Responsive Web Design」で解決策が紹介されていますが、シェアの少なくなっているそれら古いブラウザへの対応は特別な場合を除き必要ないでしょう。

 引用元：渡辺　竜著　レスポンシブWebデザインより

    ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※   青森、八戸、十和田、三沢市のスマホ、スマートフォンサイト制作は北の 国ウェブ工房にお任せ下さい。 北の国ウェブ工房では、スマホ、スマートフォンウェブサイト制作をレス ポンシブWebデザインで制作しております。いろいろな画面サイズに対応 したレスポンシブWebデザインはスマートフォンに限らず、今後も増加が 予想される様々なデバイス（機器）の画面サイズに対応し、見やすく、使 いやすいウェブサイトを作成いたします。 どうぞお気軽にご相談ください。   ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※