srcset属性とは？
- picture 要素内で使用する source 要素や、img 要素において、複数のイメージソースを指定するために使用
- srcsetはHTML5で策定された新属性
- 使えないブラウザもあるので注意(対応ブラウザ)
レスポンシブ画像でのsrcset属性のメリット、デメリット
srcsetによる画像の指定
<img src="smaill.jpg"
srcset="medium.jpg 640w, large.jpg 1280w">
上記の例のように画像と画像の幅を指定できます。
secset属性に対応していないブラウザでは、srcで指定された画像が表示されます。。
画像幅に応じた画像が表示される。
レスポンシブ画像でのsrcset属性を使うメリット
- メディアクエリなしで、 画像幅にあった最適が画像を表示される
- 複数設定できるので、複数の画面サイズに合わせるうことができる
- 画像サイズを変えなければ、他の画像をブラウザ側が読み込む必要がない
＃＃ レスポンシブ画像でのsrcset属性を使うデメリット
- 同じ縦横比の画像しか使えない。（縦横比がまちまちだと予想外の結果になる可能性がある）
同じ縦横比の画像がない場合は？
- CSSでメディアクエリで使う
- を使う
スクリーンの幅によって画像を変更したい場合は？
=> sizes属性を使う！
<img src="smaill.jpg"
srcset="medium.jpg 640w, large.jpg 1280w"
sizes="(min-width: 704px) 50vw 100vw">
この例では、704ピクセル以上の幅の画面では、画像がビューポートの幅の50%になるようにしています。
また、メディアクエリなしの場合は、画像のデフォルトの幅（＝今回は100%)を設定します。