とりあえず3行で
- srcsetはHTML5で策定された新属性
- この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
- IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset)
#srcset属性について詳しく
詳しく書いてあり、良い記事です。
srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳
個人的には、印象に残ったのは グリンピースおいしい^q^ でした
##メリット
- Retinaディスプレイ用に画像を切り替える
- ウィンドウサイズに合わせて画像を切り替える
- ウィンドウサイズに合わせて動的に画像を切り替える
->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない）
引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
##デメリット
- 対応ブラウザが十分ではない(IE系は未対応/Can I Use...）
- (LazyLoadと相性はよくない)
実際に使ってみる
srcset属性を使ったタグの例
srcset属性は <img>, <picture>タグで利用できます
<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 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
- (max-width: 480px) 100vw
- 480px
の２つの条件を設定した状態になります。
この場合、
- ブラウザ幅が 480px以下の場合は、viewportの幅に対して100パーセントの幅で計算してsrcsetから画像を選びなさい
- そうでなければ、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属性の他の設定方法
<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属性を作成して対応しているようです
#対応ブラウザにIEがない問題
（そこまでやるか、は別として…）
picturefill というjsライブラリを導入することでクリアできるはず
参考リンク
srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳
srcset属性策定仕様
pictureタグはまだ策定中
解像度の高い画面にだけ高解像度の画像を表示する方法
CSS には vw, vh, vmin, vmax という単位がある
レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定