B.picture要素、source要素、media属性

---

B方式.pictureタグ ＋ sourceタグ(media属性 srcset属性) ＋ imgタグ(srcset属性)

画像のアートディレクション
アートディレクションによる選択
→ 表示される画面に応じて画像を出し分け
→ ウィンドウサイズに合わせて画像を切り替え
・pictureタグ
・sourceタグmedia属性、sourceタグsrcset属性
・imgタグsrcset属性、もしくは、imgタグsrc属性


具体例1
・ウィンドウサイズが 1200px 以上なら 1200w.png 読込
・ウィンドウサイズが 1000px 以上なら 1000w.png 読込
・ウィンドウサイズが 800px 以上なら 800w.png 読込
・ウィンドウサイズが 600px 以上なら 600w.png 読込
・ウィンドウサイズが 400px 以上なら 400w.png 読込
・ウィンドウサイズが 200px 以上なら 200w.png 読込
・上記以外(ウィンドウサイズが 200px 未満)なら img srcset で指定した内容(800w.png) 読込

<picture>

  <!--[if IE 9]><video style="display: none;"><![endif]-->

  <source srcset="./img/1200w.png" media="(min-width: 1200px)">

  <source srcset="./img/1000w.png" media="(min-width: 1000px)">

  <source srcset="./img/800w.png" media="(min-width: 800px)">

  <source srcset="./img/600w.png" media="(min-width: 600px)">

  <source srcset="./img/400w.png" media="(min-width: 400px)">

  <source srcset="./img/200w.png" media="(min-width: 200px)">

  <!--[if IE 9]></video><![endif]-->

  <img srcset="./img/800w.png" alt="CSSデモ">

</picture>

動作確認
・成功

---

C方式.srcset属性 x記述子

ピクセル密度デスクリプタ(1x、1.5x、2x、3x など)を使用
Retina対応
→ 高解像度のディスプレイをサポート
→ Retinaディスプレイ用に画像を切り替え
・「imgタグsrcset属性 x記述子」 もしくは 「sourceタグsrcset属性 x記述子」

上記に「pictureタグ × sourceタグ」が加わる場合もあり
・つまり「srcset属性 x記述子」がある場合は、常にC方式
※「B方式」でかつ「C方式」なケースもあり得ると言うこと！

動作確認
・Retinaディスプレイを保持していないため未検証