alter.js BLOG
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。

レスポンシブの画像出し分けを適切にできる!srcset属性解説

こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。

今回は、レスポンシブの画像出し分けを適切に行うことができるsrcset属性についてお話していきます。 レスポンシブデザインのウェブサイトで使用される画像について、PC画面ではバランスの良い見た目だったのに、スマホ画面では画像で注目したい対象物が思ったより小さく表示されているように見えることがあります。 本記事ではこのような場面で活躍する、srcset属性の使用方法についてのご紹介になります。

srcsetとは

srcset属性とは、img要素等で用いられる、複数のイメージソースを指定するために使用する属性です。

src属性の場合は一つだけの画像を指定していましたが、それをリストにされており、ブラウザ側により記述された条件ごとに該当する画像を自動で振り分けて表示されます。 この場合読み込まれる画像は該当する画像のみで、無駄なリソース読み込みを発生させません。

この振り分けの処理をJavaScriptでレスポンシブ対応する場合は、JavaScriptが実行されるタイミングよりブラウザのもつ画像を先読みする機能が先に動作するため、余分なリソース読み込みが発生し負担となります。 同じコンテンツをPCとスマートフォンで出し分けているレスポンシブでは、どうしてもスマートフォンで見たときの動作が遅くなりがちです。特に大きな画像は遅延の原因になるので、画像リソースの読み込みを省略できるこの方法はかなり有効です。このようなときはできるだけsrcset属性での出し分けをお勧めします。

現在ところ、IEでは動作しない機能ですが、JSライブラリを導入することで使用することが可能になります。詳細は後述します。

画像サイズごとに振り分けるためのsrcset記述方法

<meta name="viewport" content="width=device-width">

前提として、対象ページのhtmlに上記のビューポートを指定している必要があります。 出力画像選別のロジックについては、以下の2通りの書き方ができます。  

デバイスピクセル比による画像指定(x)

<img srcset="symm-top-small.jpg 1x,
             symm-top-medium.jpg 2x,
             symm-top-large.jpg 3x" >

srcset属性に画像とデバイスピクセル比(単位がx)のセットを複数記述します。 こちらの指定方法では、その端末の画面のデバイスピクセル比を参照し、一般的なディスプレイでは1xで指定した画像、デバイスピクセル比の高いディスプレイではその度合いに応じて2x、3xで指定した画像の読み込みをします。  

ビューポートの幅による画像指定(w)

<img srcset="symm-top-small.jpg 400w,
             symm-top-medium.jpg 600w,
             symm-top-large.jpg 1024w"
     sizes="100vw" >

srcset属性に画像と実ピクセルでの表示サイズ(単位がw)を複数記述します。 こちらの指定方法では、このimg要素のサイズを参照し、その数字以上で一番近いもので指定されている画像の読み込みがされます。 また、こちらで指定する場合、sizesという属性を使用する必要があります。 上記の例ではこのimg要素が100vw(画面幅)の領域内で表示されることを明示しています。

参考:レスポンシブ対応のフォントサイズで使用できる単位 ですので、例えばCSSピクセル(解像度をデバイスピクセル比で割った値)の幅が414pxの端末でこのimg要素を読み込むと、デバイス幅のそのままでimg要素の幅が決定されますので、symm-top-medium.jpgが読み込まれます。   このsizes属性も複数条件を記述することができます。 メディアクエリと同じようにmax-width や min-widthを使用することで条件分岐するようになります。 用途としては、スマートフォンの幅では画像の周りに余白を入れたいが、PC表示の場合は幅いっぱいまで表示するときのデザインの場合に適切な画像読み込みをさせることができます。 複数指定したときの例は以下です。 以下の場合は幅が414pxの端末だと80vwが適用されますので、img要素は331pxとなり、symm-top-small.jpgの画像が読み込まれます。  

<img srcset="symm-top-small.jpg 400w,
             symm-top-medium.jpg 600w,
             symm-top-large.jpg 1024w"
     sizes="(max-width: 767px) 80vw, 100vw" >

IEでもsrcset属性を動作させるには

IEは最新版のIE11でもsrcset属性に対応していません。2019年9月時点でIE11の国内シェアは11.61%なので、場合によってはIEも考慮してレスポンシブサイトを構築する必要があるかもしれません。 IEでsrcset属性を使用したい場合には、JSライブラリ「picturefill.js」を利用することで対応が可能です。
2019年11月時点での安定版は「3.0.2」となっています。 headタグ内に2行追加することで動作します。  

  <head>
    <script>document.createElement( "picture" );</script>
    <script src="picturefill.js" async></script>
  </head>

srcset属性以外の画像出し分け方法

src属性以外で画像を出し分ける方法についてもご紹介します。

Media Queryを使用する

基本中の基本ですね。出し分けたい画像をすべて配置し、CSSのMedia Queryで画面幅に応じて表示、非表示を切り替えます。
レスポンシブでは基本的に各画面幅用のMedia QueryでCSSを書くので、そこに追加するだけ、という意味でお手軽な方法ではあります。

記述例は以下になります。

HTML

  <img class="img-pc" src="symm-top-large.jpg">
  <img class="img-tab" src="symm-top-medium.jpg">
  <img class="img-sp" src="symm-top-small.jpg">

CSS

  .img-sp {
    display: block;
  }
  .img-pc
  .img-tab {
    display: none;
  }
  @media only screen and (min-width: 960px) {
    .img-pc {
      display: block;
    }
    .img-tab,
    .img-sp {
      display: none;
    }
  }
  @media only screen and (min-width: 481px) {
    .img-tab {
      display: block;
    }
    .img-pc,
    .img-sp {
      display: none;
    }
  }

この方法では出し分け画像をすべて読み込んだうえで表示切替を行うので、スマートフォンで見たときなどに読み込みに時間がかかってしまいます。
サイトの読み込み時間が長くなるのは、検索順位にも、直帰率にも悪影響です。
昔からある方法ではありますが、せっかくレスポンシブでモバイルフレンドリーなサイトを作るのであれば、避けたほうがいい手法です。

picture要素を使用する

※IEで動作させるには、記事内で紹介した「picturefill.js」が必要です!
picture要素は、HTML5.1で追加されたタグで、sourceタグとimgタグを子要素に持つことで機能します。
複数の画像リソースの中から、ブラウザの状況に応じて画像を出し分けてくれます。 記述例は以下になります。  

<picture>
  <source media="(min-width: 960px)" srcset="symm-top-large.jpg">
  <source media="(min-width: 481px)" srcset="symm-top-medium.jpg">
  <img src="symm-top-small.jpg">
</picture>

sourceタグのmedia属性に出し分け条件となる画面幅を記述し、srcset属性に画像のパスを記述します。
media属性にマッチしなかった場合には、imgタグの画像が読み込まれます。
CSSのMedia Queryと同じようなイメージです。
また、sourceタグのsrcset属性は本記事で紹介したものと同じものなので、以下のように細かく出し分けを行うこともできます。  

<picture>
  <source media="(min-width: 960px)"
            srcset="symm-top-large.jpg,
            symm-top-large_2x.jpg 2x,
            symm-top-large_3x.jpg 3x" />
  <source media="(min-width: 481px)" srcset="
            symm-top-medium.jpg,
            symm-top-medium.jpg 2x,
            symm-top-medium.jpg 3x" />
  <img srcset="symm-top-small.jpg,
         symm-top-small.jpg 2x,
         symm-top-small.jpg 3x" />
</picture>

この例では、画面幅とデバイスピクセル比に応じて画像出し分けを行っています。

まとめ srcset属性を使った画像サイズ別の出し分けについて

今回の記事ではsrcset属性の用途と記述方法についてご紹介いたしました。 これからのモバイルファーストを意識したサイト制作の際、各端末で適切な画像の出し分けをして見栄え良いサイトにするのに必須の属性ですので、記述方法については強く覚えておくべきでしょう。

シンメトリックでは、srcset属性なしでも画像の出し分けができ、レスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、alter.jsを使用したLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。

Page Top