案3.picture を使用したレスポンシブ画像のアート ディレクション（Art Direction-based Selection）

案3-B.pictureタグ

source タグの media属性で、min-widthを設定


1000px 以上 … 画像指定、800px以上 … 画像指定、800px未満 … 画像指定
▼HTML

<picture>

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

 <source srcset="./images/768-1024.jpg" media="(min-width: 1000px)">

 <source srcset="./images/480-640.jpg" media="(min-width: 800px)">

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

 <img srcset="./images/375-500.jpg" alt="画像の説明">

</picture>

・B.picture要素、source要素、media属性 ／ picture を使用したレスポンシブ画像のアート ディレクション


1200px 以上 … 画像指定、1000px以上 … 画像指定、800px以上 … 画像指定、600px以上 … 画像指定、400px以上 … 画像指定、200px以上 … 画像指定、200px未満 … 画像指定
▼HTML

<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="画像の説明">

</picture>

・2.B.picture要素、source要素、media属性 ／ 画像のアートディレクション（Art Direction-based Selection）


800px 以上 … 画像指定、450px以上 … 画像指定、450px未満 … 画像指定
・Retinaディスプレイについても別途指定
▼HTML

<picture>

  <source media="(min-width: 800px)" srcset="300.jpg, img-2x.jpg 2x">

  <source media="(min-width: 450px)" srcset="200.jpg, img-small-2x.jpg 2x">

  <img src="150.jpg" srcset="img-fb-2x.jpg 2x">

</picture>

・B.picture要素、source要素、media属性 ／ picture を使用したレスポンシブ画像のアート ディレクション