Edited at

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つの注意点と開発者ツールの設定