HTML5
srcset

srcset属性について

More than 1 year has passed since last update.

とりあえず3行で

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

srcset属性について詳しく

詳しく書いてあり、良い記事です。
srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳

個人的には、印象に残ったのは グリンピースおいしい^q^ でした

メリット

  • Retinaディスプレイ用に画像を切り替える
  • ウィンドウサイズに合わせて画像を切り替える
  • ウィンドウサイズに合わせて動的に画像を切り替える

->環境ににあった最適な画像をブラウザが選んでくれる(余計な画像は読み込まない)

引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう

デメリット

  • 対応ブラウザが十分ではない(IE系は未対応/Can I Use...
  • (LazyLoadと相性はよくない)

実際に使ってみる

srcset属性を使ったタグの例

srcset属性は <img>, <picture>タグで利用できます

imgタグを使った例
<img src="img/example-img.jpg"
     srcset="img/example-img-320.jpg 320w,
             img/example-img-640.jpg 640w"
     sizes="50vw"
>

上記で使っている単位

320w, 640w ... w とは?

その画像を表示したい時のブラウザ幅px と捉えておけばOKです
(昔はViewportのサイズだったらしいです)

sizes="50vw” の vw とは?

viewport widthの略称です
ビューポートの幅に対する割合(%) を指します

ビューポート=ブラウザ幅として扱ってOKです
(Retinaが入ってくるとややこしいので一旦おいておきます)

つまり、 900pxでブラウザを開いていたら以下のようになります

100vw = 900px * 100% = 900px 
50vw  = 900px * 50%  = 450px
30vw  = 900px * 30%  = 270px

単位がわかったところで タグの解説

imgタグを使ったタグの中身
<img src="%画像パス%"
     srcset="%画像A% %画像Aを表示したい時のブラウザ幅%w,
             %画像B% %画像Bを表示したい時のブラウザ幅%w"
     sizes="%ビューポートの幅に対する割合%vw"
>

つまり…srcset属性は

繰り返しになってしまいますが、

srcset="画像URL その画像を表示したい時の想定ブラウザ幅(px), ..."

と書いてしまえば良いです。

srcset="img/example-img-320.jpg 320w,..."
と書けば ブラウザ幅が320pxの時は srcに設定しているURLではなく
img/example-img-320.jpg が読み込まれます

sizesって何?

しれっと、上タグで書いているsizes属性。
srcset属性と組み合わせることで
デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能に

こんな風に書きます
sizes="[メディア・クエリ] [長さ], [メディア・クエリ] [長さ] ..."

補足:
メディア・クエリとペアになっていない長さは「デフォルトの長さ」
マッチするメディア・クエリがなかったとき、この長さが使われる

sizes属性の例

以下の記述を例にした場合

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

  1. (max-width: 480px) 100vw
  2. 480px

の2つの条件を設定した状態になります。

この場合、

  1. ブラウザ幅が 480px以下の場合は、viewportの幅に対して100パーセントの幅で計算してsrcsetから画像を選びなさい
  2. そうでなければ、480pxのブラウザ幅として計算して画像を選びなさい

と指定しているはず。

Retinaの場合は…?

忘れているかもしれませんが
Retinaディスプレイの場合は、解像度が2倍です。

<img src="img/example-img.jpg"
     srcset="img/example-img-320.jpg 320w,
             img/example-img-640.jpg 640w" >

このようにタグを設定した場合、
Retinaで320pxのブラウザ幅でページを開くと、
img/example-img-640.jpg の画像が読み込まれます。

srcset属性の他の設定方法

Retinaのとき
<img src="img/example-img.jpg"
     srcset="img/example-img.jpg 1x,
             img/example-img@2x.jpg 2x"
     alt="Example image">

1x で解像度1倍のとき
2x で解像度2倍のとき ※Retinaのとき

※2x記法とsizes属性 によるメディアクエリーを混ぜてはダメ!

導入する上で気をつけること

size属性にメディアクエリーを書く必要がある

ブラウザがsrcsetを使って画像を選択する際の判断材料は 
表示したい画像の画像の表示幅ではなく
ブラウザ全体の表示幅+解像度 です。

これを意識してコーディングするのは慣れないと結構面倒(でした)

LazyLoadと両立させる場合は一工夫を

LazyLoadをしたい場合は、src属性だけではなく srcset属性も対応しましょう。

WordPress用ですが、data-srcset属性を作成して対応しているようです

http://celtislab.net/archives/20160315/lazy-load-srcset/

対応ブラウザにIEがない問題

(そこまでやるか、は別として…)
picturefill というjsライブラリを導入することでクリアできるはず

https://github.com/scottjehl/picturefill

参考リンク

srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳
srcset属性策定仕様
pictureタグはまだ策定中
解像度の高い画面にだけ高解像度の画像を表示する方法
CSS には vw, vh, vmin, vmax という単位がある
レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定