srcset属性について〜レスポンシブ画像を表示する時に使ってみよう〜

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%)を設定します。

参考

[Webサイトパフォーマンス実践入門]
(https://www.amazon.co.jp/dp/B079PS8Q4M/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)