srcset属性について

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

#srcset属性について詳しく

詳しく書いてあり、良い記事です。
[srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳](http://terkel.github.io/srcset-sizes/)

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


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

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

> 
[引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう](http://kia-king.com/blog/tutorial/responsive-images-with-srcset/)


##デメリット
+ 対応ブラウザが十分ではない(IE系は未対応/[Can I Use...](http://caniuse.com/#search=srcset)）
+ (LazyLoadと相性はよくない)


# 実際に使ってみる
## srcset属性を使ったタグの例
srcset属性は　`<img>`, `<picture>`タグで利用できます

```html: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
```

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

```html: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

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

この場合、

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属性の他の設定方法

```html: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を使って画像を選択する際の判断材料は　
表示したい画像の画像の表示幅ではなく
<i><b>ブラウザ全体の表示幅＋解像度</b></i> です。

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

## 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 エリック・ポーティス 文と絵 鈴木丈 訳](http://terkel.github.io/srcset-sizes/)
[srcset属性策定仕様](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-srcset)
[pictureタグはまだ策定中](https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture)
[解像度の高い画面にだけ高解像度の画像を表示する方法](http://allabout.co.jp/gm/gc/448083/2/)
[CSS には vw, vh, vmin, vmax という単位がある](http://dev.classmethod.jp/ria/html5/css-length-viewport/)
[レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定](http://parashuto.com/rriver/responsive-web/two-things-to-watch-out-when-testing-responsive-images)