srcsetを使って画像を切り替える

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。

srcsetとは

  • srcsetはHTML5で策定された新属性
  • この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
  • IEでは使うことが出来ない(http://caniuse.com/#search=srcset)

picture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。

  • media属性(メディアクエリ)
  • srcset属性
  • sizes属性
srcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。


sizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
例:ディスプレイ1200px以下の時は画面幅、それ以外では1200pxで画像を表示したい場合は次のように記述します。

sizes="(max-width:1280px) 100vw, 1280px"

size属性を省略した場合

  • bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
  • bodyが1200px~768pxの時はpc用画像をフルードで表示
  • bodyが767px以下の時はsp用画像をフルードで表示
<picture>
<!--768px以上の時に表示したい画像の指定-->
<source media="(min-width:768px)" srcset="https://placehold.jp/2f90a8/ffffff/1200x350.jpg?text=pc 1200w">
<!--767px以下の時に表示したい画像の指定-->
<img srcset="https://placehold.jp/6edb4c/ffffff/800x450.jpg?text=sp 767w" alt="">
</picture>
size属性を指定した場合
  • bodyが1200px以上の時は1200px幅のpc用画像を画面中央に表示
  • bodyが1200px~960pxの時はpc用画像をフルードで表示
  • bodyが959px~768pxの時はタブレット用画像をフルードで表示
  • bodyが767px以下の時はsp用画像をフルードで表示

※imgにフルードイメージの設定を必ず指定

<body>
<picture>
<!--960px以上の時に表示したい画像の指定-->
<source media="(min-width:960px)" srcset="https://placehold.jp/2f90a8/ffffff/1200x350.jpg?text=pc 1200w" sizes="1200px">
<!--959~641pxの時に表示したい画像の指定-->
<source media="(min-width:641px)" srcset="https://placehold.jp/db4ca2/ffffff/960x450.jpg?text=tablet 960w" sizes="100vw">
<!--640px以下の時に表示したい画像の指定-->
<img srcset="https://placehold.jp/6edb4c/ffffff/640x450.jpg?text=sp 640w" sizes="100vw" alt="">
</picture>
</body>

 

レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。

ics.media