レスポンシブの画像問題を解決する簡単な方法

コーディング / 2014.03.24

#レスポンシブデザイン

レスポンシブの一つの落とし穴として、「画像の問題」があります。
今回はその「画像の問題」とその解決方法をご紹介致します。

画像の問題とは？

「画像の問題」といきなり言い出した分けですが、さて画像の問題というと、ここは実際の画面をみると分かりやすいと思います。

demo:https://sole-color-blog.com/demos/responsive/
※スマートフォンでご覧頂くか、モダンブラウザの場合は画面を小さくしてご覧ください。

デモを見ると画面から画像が飛び抜けてしまっているのがお分かり頂けると思います。
なぜこれが起こるというと、簡潔に説明すると「画像自体のサイズ（縦/横）が優先しそのサイズで表示する」為に起こるのですが、さすがにこれは誰がみてもありえません。

解決する方法として、大きさに合わせた画像を作るという方法などがありますが、その場合スマホの数だけ画像を作る必要がでてきますし、新しい機種が出る度に修正しなくてはいけません。

勿論、実際そんな解決策なんてありえません。

解決方法は非常に簡単でCSSだけで解決できます。

img {
width:100%;
max-width: 100%;
height: auto;
}

img {

width:100%;

max-width: 100%;

height: auto;

}

img に上記のCSSの指定をしてあげるだけで、解決します。
それでは、デモの写真のしたにあるボタンを押してみてください。

綺麗にコンテンツ内に収まったと思います。
これはなぜかを簡潔に説明すると、画像のサイズ（横幅）を親要素を基準にするようにmax-width（最大値）を100％にします。
しかしこれだけでは、縦幅が変わらないので、heightをautoにして自動的縮尺するようにします。
これだけの記述で、画像は親要素のサイズを基準に自動的に縮尺するようになります。
この手法を「フルードイメージ」といいます。

これで画像がコンテンツのボックス幅を突き破る！といった事態は避けられます。

応用

今回のデモのように横長の写真やページ内にある写真であればよいのですが、
サイトによっては、メインビジュアルなどの場合「モバイルとPCで表示される画像を変えたい」といった事もあります。
その場合どうしたらよいでしょうか？

まずはCSSで実装してみたいと思います、前回紹介した、メディアクエリを利用します。

HTML

<div id="mainVisual">
    <img src="image_pc.jpg" alt="" class="mobileHidden">
    <img src="image_sp.jpg" alt="" class="desktopHidden">
</div>

</div>

CSS：モバイルファーストで記述

.mobileHidden { display:none;}

@media screen and (min-width:480px) { 
    .desktopHidden { display:none;}
    .mobileHidden { display:inline;}
}

.mobileHidden { display:none;}

@media screen and (min-width:480px) {

.desktopHidden { display:none;}

.mobileHidden { display:inline;}

}

実際のデモ：https://sole-color-blog.com/demos/responsive/index2.html
※ウィンドウを小さくしたり大きくしたりしてみてください。

簡単に実現できましたが、これには実は問題点があります。

何が問題かというとCSSで非表示にした場合でもブラウザは画像を読み込んでいるからです。
PCの場合、高速な回線を利用してネットに接続している割合が多いので、さほど問題になることはありません。

モバイルの場合、固定回線に比べて回線速度が遅い環境でアクセスする事が多いので
本来、使用しない（デモの場合はimage_pc.jpg)画像まで読み込むと結果的にページ全体が表示されるまで時間がかかる原因となってしまいます。
デモのような簡素なページであれば、CSSでの対応でも問題ないかもしれませんが、画像を多く使ってる場合などはその違いが顕著にでてしまいます。

回線速度（帯域）に関しては、WEB制作側がどうこうできるところではないのですが、
なるべくは表示させることはアクセスの流出を防ぐだけではなく、SEOにも効果があります。

※Googleではスマートフォン向けサイトのアルゴリズムを変更し、表示スピードも評価基準にいれているようです。
http://www.suzukikenichi.com/blog/ranking-algorithm-changes-in-rankings-of-smartphone/

それでは、これはどのようにしたらよいか、javaScriptの力を借りる事で解決することができます。

jQueryプラグイン「Breakpoints.js」を使う

DL：https://github.com/xoxco/breakpoints

このプラグインはブレイクポイントを指定しブレイクポイント毎に画像を差し替える事が可能になるプラグインです。

それでは実際に使ってみましょう。

HTML

<div id="mainVisual">
    <img class="respoImage" data-img="image_pc.jpg">
</div>

</div>

$(function() {
       $(window).setBreakpoints({
           distinct: true,
           breakpoints: [ 1, 480 ]//切り替えするブレイクポイントを指定する。
       });
       $(window).on('enterBreakpoint480',function() {　//'enterBreakpoint***'***の箇所は上で指定したブレイクポイントの数値を指定する
           $('.respoImage').each(function() {
               $(this).attr('src', $(this).data('img'));
           });
       });
       $(window).on('enterBreakpoint1',function() {
           $('.respoImage').each(function() {
               $(this).attr('src', $(this).data('img').replace('_pc', '_sp'));
           });
       });
   });