<picture>
主な用途
e.g. webp指定して、ブラウザが未対応ならpngを表示
pictureを用いずにimgだけで完結させたほうが良い場合もある ref
アートディレクションのため
pictureを用いずにimgだけで完結させたほうが良い場合もある ref
書き方
html<picture>
<source srcset="候補1の画像URL" 属性 />
<source srcset="候補2の画像URL" 属性 />
<img src="候補4の画像URL" alt="~" />
</picture>imgは1つのみで最後に書く、sourceは複数可
パターンマッチ的で、より上に書いたものが採用される
imgは
otherwise みたいなかんじ属性
src属性
srcset属性
たぶん
sizes属性
たぶん
以下は同じ
htmlsizes="(min-width: 960px) 50vw"htmlmedia="(min-width: 960px)"
sizes="50vw"media属性
@mediaを書く
type
画像の形式をMIME Typeで指定する
e.g.
type="image/webp" なんでもかんでもpictureを使うべきではない
imgタグのsrcset属性の方が良い場合もある、という説明
webpがどうのこうのについては言及されてない
この場合はpictureを使うしか無いから選択の余地がないからか
参考
わかりやすい