前回に続き、レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。
第2回は、画面幅の小さいスマートフォンに合わせて画像を最適化する方法です。
PCサイトでコンテンツ幅いっぱいの画像を使用しているような場合、スマートフォンでは画面からはみ出してしまいます。
そのような場合の対処方法をいくつかご紹介します。
1.画面幅に合わせて画像を縮小する。
img.liq {width:100%;}
クラス liq をつけた画像は、アスペクト比を維持したまま、親要素の内幅いっぱいまで広がります。
もちろん、画像にwidth要素やheight要素をつけてはいけません。
ただし、幅480px未満(端末によってはもう少し大きくても)の画像は、ランドスケープ時に逆に引き伸ばされて、画像が荒れてしまいます。
そのような場合には、例えば幅400pxの画像であれば、以下のようなスタイルを当てることで、最適化できます。
liq400 {width:100%; max-width:400px;}
親要素の内幅が400px以下なら、親要素の内幅いっぱいまで広がり、親要素の内幅が400pxを超える場合は、幅400pxになります。
問題点
特に文字を含むような画像では、画像をが縮小されて判読できなくなる。
画像のサイズによっては、必要以上にサイズの大きな画像を読み込ませることになり、特に3G回線などでは表示速度に悪影響。
2.背景画像として表示し、CSSで画像を表示し分ける。
HTML
<span id="multi_img001">サンプル画像</span>
PC用のCSS
#multi_img001 {display:block; width:650px; height:300px; text-indent:-9999px; background:url(img/pc/img001);}
スマートフォン用のCSS
#multi_img001 {display:block; width:300px; height:400px; text-indent:-9999px; background:url(img/sp/img001);}
SEO上好ましくないなどの理由で隠しテキストを使いたくなければ、spanの中を空にして、text-indentの指定を外しても構いません。
p要素などの中に入ることを考慮してspanにしていますが、div等でも構いません。
問題点は、汎用性のない id ないし class を大量に定義しなければいけない点でしょうか。
3.JSで画像のパスを書き換える。
<img src="/img/sp/image001.png" class="splitImg" />
if ((navigator.userAgent.indexOf('iPhone') == -1) || navigator.userAgent.indexOf('iPod') == -1) || navigator.userAgent.indexOf('Android') == -1) {
$(".splitImg").each(function(){
pcimg = $(this).attr("src").replace("img/sp/","img/pc/");
$(this).attr("src",pcimg);
});
}
img/pc/ にPC用の画像を、 img/sp/ にスマートフォン用の画像を同じファイル名で格納しておきます。
HTMLにはスマートフォン用の画像のパスを記述しておき、UAがスマートフォンでない場合はPC用のパスに書き換えます。
もちろん、逆の処理でも良いのですが、スマートフォン閲覧時の負荷軽減には、こちらの方が良いですね。
画像の遅延ローディングと組み合わせても良いかもしれません。
4.htaccessで画像を振り分ける
だったらhtmlごと振り分ければいいじゃないかという突っ込みはさておき。
PC/スマートフォンの2段階なら良いですが、画面サイズ等での振り分けができないのが難ですね。
また、ロード後、画面サイズの変化に応じて表示を切り替えるような特殊なレスポンシブには対応できません。
以上、4パターンご紹介しましたが、1と2を必要に応じて使い分けるのが、最も無難かと思います。