Help us understand the problem. What is going on with this article?

srcset属性について

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

C058
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away