画像のレスポンシブ対応まとめ #HTML

jQueryで切り替える

メリット

どのブラウザでも機能する

デメリット

レスポンシブ対象の画像ファイル名の語尾を統一する必要がある。（sample01-pc.jpg,sample02-pc.jpgなど）
PC,スマホの２種類以上のブレイクポイントで切り替える場合、jQueryの条件分岐と画像が増える。（管理が面倒） ### 対応方法

index.html

<img src="./sample01_pc.jpg" alt="レスポンシブ対象" class="reseponsive_image">
<img src="./sample02.jpg" alt="レスポンシブ非対象">
<img src="./sample03_pc.jpg" alt="レスポンシブ対象" class="reseponsive_image">

index.js

// レスポンシブ対応する画像（共通のクラス名にする）
var $img = $('.reseponsive_image');
var sp = '_sp.';
var pc = '_pc.';
var spWidth = 600; //ブレイクポイント指定

function imageSwitch() {
    var windowWidth = parseInt($(window).width());
    $img.each(function () {
        var $this = $(this);
        if (windowWidth >= spWidth) {
            $this.attr('src', $this.attr('src').replace(sp, pc));
        } else {
            $this.attr('src', $this.attr('src').replace(pc, sp));
        }
    });
}
imageSwitch();

// リサイズの実行タイミング設定
var delayStart;
var delayTime = 200;
$(window).on('resize', function () {
clearTimeout(delayStart);
delayStart = setTimeout(function () {
imageSwitch();
}, delayTime);
});

HTMLで切り替える

メリット

解像度だけに合わせて、画像の切り替えの可能が可能

例えばiPhoneX（スクリーン幅375px）でもピクセル比が2なので、ブラウザはその2倍の750wで指定した画像を表示する。（375wで指定した画像は表示されない）

もちろんウィンドウサイズに合わせて、画像の切り替えが可能。

メディアクエリで指定しているため、ブラウザの解像度を考慮せず、必ず指定された画像が表示される。
そのためブラウザの解像度によって画像が切り替わることがないので、異なる画像を切り替えるためにpictureタグを利用する。

デメリット

ブラウザ対応が必要

Picturefillで対応する。ファイルを読み込むだけで対応されるので、簡単。

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>

方法

Retina対応をする

index.html

<img src="img/sample.jpg"
     srcset="img/sample.jpg 1x,
             img/sample@2x.jpg 2x"
>

画像は「sample.jpg」と「sample@2x.jpg」の2枚を用意する。
1xと2xは解像度を表している。（Retinaディスプレイのとき、2xに指定した画像が表示される）

方法

ウィンドウサイズに合わせて画像を切り替える

index.html

<picture>
  <source media="(min-width: 600px)" srcset="sample_pc.jpg 1x, sample_pc@2x.jpg 2x">
  <source media="(max-width: 599px)" srcset="sample_sp.jpg 1x, sample_sp@2x.jpg 2x">
  <img src="sample_pc.jpg">
</picture>

画像は「sample_pc.jpg」と「sample_pc@2x.jpg」と「sample_sp.jpg」と「sample_sp@2x.jpg」の4枚を用意する。（Retina対応しなくても大丈夫な場合は「sample_pc.jpg」と「sample_sp.jpg」の2枚だけでもOK）
mediaで指定したピクセルで画面が切り替わる。