レスポンシブ画像実装方式

A-1方式.srcset属性 w記述子

幅デスクリプタ
幅に合わせた寸法での表示
→ 画面サイズに合わせて画像読込
→ 幅とハードウェアの画面解像度に基づき(Retina対応)、最も適切な画像リソースを選択して読込
・imgタグsrcset属性w記述子

具体例1

ウィンドウサイズ	読込画像
320px 未満	img-320.jpg 読込
320px 以上 640ｐｘ 未満	img-640.jpg 読込

・Retinaディスプレイで見た場合、ウィンドウサイズが 320px 未満なら img-640.jpg 読込

<img src="img/img.jpg"

     srcset="img/img-320.jpg 320w,

             img/img-640.jpg 640w"

     alt="画像の説明">

具体例2

ウィンドウサイズ	読込画像
400px 未満	400w.png 読込
400px 以上 600px 未満	600w.png 読込
600px 以上 800px 未満	800w.png 読込
800px 以上 1000px 未満	1000w.png 読込
1000px 以上 1200px 未満	1200w.png 読込
それ以外(ウィンドウサイズが 1200px 以上)	1200w.png 読込

<img

  src="img/800.w.png"

  srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"

  alt="幅に合わせた寸法での表示の例">

具体例3
・A-2方式だが、100vwのみの指定なので、実質的にA-1方式
・ウィンドウサイズと同じサイズ(100vw)の画像を自動選択

ウィンドウサイズ	読込画像
400px 未満	400w.png 読込
400px 以上 600px 未満	600w.png 読込
600px 以上 800px 未満	800w.png 読込
800px 以上 1000px 未満	1000w.png 読込
1000px 以上 1200px 未満	1200w.png 読込
それ以外(ウィンドウサイズが 1200px 以上)	1200w.png 読込

<img

  sizes="100vw"

  src="img/800.w.png"

  srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"

  alt="幅に合わせた寸法での表示の例">

動作確認
・成功

A-2方式.imgタグ(sizes属性 srcset属性w記述子)

幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性
・imgタグsrcset属性w記述子

sizes属性
・条件とそれに応じた画像表示を指定

具体例1
・ウィンドウサイズの半分(50vw)のサイズの画像を自動選択
具体例1

ウィンドウサイズ	読込画像
640px 未満	img-320.jpg 読込
1280px 未満かそれ以上	img-640.jpg 読込

・Retinaディスプレイで見た場合、ウィンドウサイズが 640px 以下なら img-640.jpg 読込

<img src="img/img.jpg"

     sizes="50vw"

     srcset="img/img-320.jpg 320w,

             img/img-640.jpg 640w"

     alt="画像の説明">

A-3方式.imgタグ(sizes属性min-widthプロパティ srcset属性w記述子)

幅デスクリプタ
幅に合わせた寸法での表示
→ ビューポートの幅とハードウェアの画面解像度に基づき、最も適切な画像リソースを選択して読込
・imgタグsizes属性min-widthプロパティ
・imgタグsrcset属性w記述子

sizes属性
・条件とそれに応じた画像表示を指定
・sizes属性では、メディアクエリが当てはまる最初の条件が適用されるため、複数記述する場合の指定順番はとても重要

具体例1
・ウィンドウサイズが 640px 以下なら ウィンドウサイズの半分(50vw)のサイズの画像を自動選択して読込
・それ以外の時は画面サイズに対して100%の画像を自動選択して読込

ウィンドウサイズ	読込画像
640px 未満	img-320.jpg 読込
1280px 未満かそれ以上	img-640.jpg 読込

・Retinaディスプレイで見た場合、ウィンドウサイズが 640px 以下なら img-640.jpg 読込

<img src="img/img.jpg"

     sizes="(min-width: 640px) 50vw, 100vw"

     srcset="img/img-320.jpg 320w,

             img/img-640.jpg 640w"

     alt="画像の説明">

---

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ディスプレイを保持していないため未検証