画面幅に応じて取得ディレクトリパスを変更したい

表

実装案毎の機能比較一覧表

-	方式	CSS	JS	依存ライブラリ	キーワード
案1-1	Media Queries	〇	-	-	@media、min-width、max-width、display: none;、display: block;
案1-2	Media Queries	〇	-	-	@media、min-width
案2-A-1	Viewport幅	-	-	picturefill.js	sizes="100vw"、srcset属性、w記述子
案2-A-2	Viewport幅	-	-	picturefill.js	sizes="★★vw"、srcset属性、w記述子
案2-A-3	Viewport幅	-	-	picturefill.js	sizes="(min-width: ☆☆px) ★★vw"、srcset属性、w記述子
案3-B	pictureタグ	-	-	picturefill.js	picture、source media="(min-width: ☆☆px)" srcset="■■.jpg"
案5-1	window.innerWidth	-	〇	-	window.innerWidth
案5-2	window.matchMedia	-	〇	-	window.matchMedia

案1-1.Media Queries

@media で切り替え
・min-width、max-width を併用しているため、「display: none;」「display: block;」で表示を制御

▼HTML

    <img src="./img/normal/1/1.jpg" alt="" class="normalsize">

    <img src="./img/thumbnail/1/1.jpg" alt="" class="thumbnailsize">

▼CSS

    /* ▼表示領域が400px以上の場合 */

    @media screen and (min-width: 400px) {

       p.target img.thumbnailsize { display: none; }   /* thumbnailsizeを非表示 */

       p.target img.normalsize  { display: block; }  /* normalsizeを表示 */

    }

    /* ▼表示領域が400px未満の場合 */

    @media screen and (max-width: 399px) {

       p.target img.thumbnailsize { display: block; }  /* thumbnailsizeを表示 */

       p.target img.normalsize  { display: none; }   /* normalsizeを非表示 */

    }

・ウインドウ幅に合わせて画像サイズを変化させる方法

---

案1-2.Media Queries

@media で切り替え
・min-widthのみ使用

▼HTML

<div class="target"></div>

▼CSS

.target {

        height: 400px;

        background-image: url(small.png); /* スマホ画像 */

        background-repeat: no-repeat;

        background-size: contain;

        background-position-x: center;

      }



      @media (min-width: 500px) { /* 500px以上 */

        body {

          background-image: url(body.png);

        }

        .target {

          background-image: url(large.png); /* タブレット画像 */

        }

      }

・CSS 内での画像

案2-A-1.Viewport幅

srcset属性 に w記述子 を使用
・sizes属性は未指定、あるいは、"100vw"を指定

▼HTML

<img

 sizes="100vw"

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

 alt="画像の説明">

・1.A-1. srcset属性、w記述子 ／ 幅に合わせた寸法での表示（Viewport-based Selection）

---

案2-A-2.Viewport幅

srcset属性 に w記述子 を使用
・sizes属性　… "★★vw"を指定

▼HTML

<img src="img-200.jpg" sizes="50vw" srcset="img-100.jpg 100w, img-200.jpg 200w, img-400.jpg 400w, img-800.jpg 800w, img-1000.jpg 1000w, img-1400.jpg 1400w, img-1800.jpg 1800w">

・A-2. srcset属性、w記述子 ／ 画像サイズを相対値で指定

---

案2-A-3.Viewport幅

srcset属性 に w記述子 を使用
・sizes属性　… "(min-width: ☆☆px) ★★vw"を指定


800px以上 … 50vw、それ以外 … 100vw
▼HTML

<img 

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

   srcset="./images/200w.png 200w, ./images/375-500.jpg 375w, ./images/400w.png 400w, ./images/480-640.jpg 480w, ./images/600w.png 600w, ./images/768-1024.jpg 768w, ./images/800w.png 800w, ./images/1000w.png 1000w, ./images/1200w.png 1200w" alt="画像の説明">

・A-3.sizes属性、min-width属性、vw ／ レスポンシブ画像におけるブレークポイントの効果


600px以上 … 25vw、500px以上 … 50vw、それ以外 … 100vw
▼HTML

<img src="400.png"

         sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"

         srcset="100.png 100w, 200.png 200w, 400.png 400w,

                 800.png 800w, 1600.png 1600w, 2000.png 2000w">

・A-3.sizes属性、min-width属性、vw ／ レスポンシブ画像におけるブレークポイントの効果


1140px以上 … 570px、640px以上 … 50vw、それ以外 … 100vw
▼HTML

<img

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

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

 alt="画像の説明">

・1.A-3.sizes属性、min-width属性、vw ／ 幅に合わせた寸法での表示（Viewport-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 を使用したレスポンシブ画像のアート ディレクション

案5-1.window.innerWidth

▼HTML

<img id="target">

▼JS

function changeImgSrc(width) {

  if (width > 768) {

    document.getElementById('target').src = "img/768.jpg";

  } else {

    document.getElementById('target').src = "img/640.jpg";

  }

}



var width = window.innerWidth;

changeImgSrc(width); // 初回

console.log(width); //1024



window.onresize = function resize() {

  var currentWidth = window.innerWidth;

  if ( (width < 768 && 768 <= currentWidth) || ( width > 768 && 768 >= currentWidth) ) {

    // 画面幅が 768px を堺に変わった時だけ呼ばれる

    changeImgSrc(currentWidth);

  }

  width = currentWidth;

};

画面幅に応じて画像を出し分ける方法

---

案5-2.window.matchMedia

▼HTML

<img id="target">

▼JS

function changeImgSrc() {

  if (window.matchMedia( "(min-width: 768px)" ).matches) {

    /* ビューポートの幅が 768 ピクセル以上の場合のコードをここに */

    document.getElementById('target').src = "img/768.jpg";

  } else {

    /* ビューポートの幅は 768 ピクセル未満の場合のコードをここに */

    document.getElementById('target').src = "img/640.jpg";

  }

}

window.addEventListener('resize', changeImgSrc, false);

window.addEventListener('load', changeImgSrc, false);

・window.matchMedia ／ スクリーンサイズに応じて JavaScript コードを処理分岐

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

VWはCSSフレームワークで対応
・最低限実装したい内容は、この方式で対応可能

---

整理中

JavaScript
・設定されていないと取得できない？

document.querySelectorAll('.thumbnail')[0].style.width;

---

jQuery
Chrome表示205

$(".thumbnail").width(); //195

---

IE未対応
デモを試すも、IE未対応
・最小widthで指定した画像を、(どのwidthでも)常に表示

---

現時点の結論


ブラウザがビジー状態だったためおかしかっただけ？
・要再調査
・なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
Picturefill 2.xデモ①： 幅に合わせた寸法での表示
・IE正常
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示

sizes属性
・IE正常
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示

Retina対応（Device-pixel-ratio-based Selection）
・IE下記不具合
・最小widthで指定した画像を、(どのwidthでも)常に表示
・Chrome下記不具合
・最大widthで指定した画像を、(どのwidthでも)常に表示

---

Next
勘違いしていたかも
・viewportは、50vwなら50%幅の画像を読み込むのではなくて、50%で表示するってこと？

・sizes="80vw"だから、800×80%で640.jpg を読み込みのではなくて、単に「lighthouse-800.jpg 800w,」がないから、未満の640.jpgを読み込むってこと？

<img src="lighthouse-160.jpg" alt="灯台"

     sizes="80vw"

     srcset="lighthouse-160.jpg 160w, 

             lighthouse-320.jpg 320w,        

             lighthouse-640.jpg 640w,

             lighthouse-1280.jpg 1280w">

レスポンシブイメージのネイティブサポート - HTML5 Rocks

確認すること
・320px画面1列表示。1列@320
・800px画面4列表示。1列@200
・この場合の画像選択読込をviewportで処理可能？
・出来ないんじゃないの？