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

レスポンシブレスポンシブ画像

現状

 状態:調査中  閲覧数:2,560  投稿日:2015-08-05  更新日:2015-08-19
ディレクトリ単位で、画像サイズ毎に保存
・「通常サイズ画像ファイル」も「サムネイルサイズ画像ファイル」もファイル名は同一

▼HTML
<img src="/images/spot/<?php echo $this->escape($user['id']); ?>/<?php echo $this->escape($imgFileName[0]); ?>.<?php echo $this->escape($imgExt[0]); ?>">


画像ファイルパス
▼/images/spot/101/

サムネイル画像パス
▼/images-thumbnail/spot/101/


実装案一覧


案1.Media Queries
案2.幅に合わせた寸法での表示(Viewport-based Selection)
案3.picture を使用したレスポンシブ画像のアート ディレクション(Art Direction-based Selection)
案4.デバイスピクセル比(Device-pixel-ratio-based Selection)
案5.JavaScript
案6.jQuery

実装案機能比較一覧

 閲覧数:603 投稿日:2015-08-05 更新日:2015-08-21


実装案毎の機能比較一覧表
- 方式 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.Media Queries

 閲覧数:606 投稿日:2015-08-06 更新日:2015-08-19

案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.幅に合わせた寸法での表示(Viewport-based Selection)

 閲覧数:615 投稿日:2015-08-19 更新日:2015-08-19

案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.picture を使用したレスポンシブ画像のアート ディレクション(Art Direction-based Selection)

 閲覧数:591 投稿日:2015-08-19 更新日:2015-08-19

案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.JavaScript

 閲覧数:614 投稿日:2015-08-19 更新日:2015-08-21

案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 コードを処理分岐


現時点の採用案

 閲覧数:606 投稿日:2015-08-20 更新日:2015-08-21

案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要素やsrcset属性を使ったレスポンシブ・イメージはまだ使わないのが得策のようです。


ブラウザがビジー状態だったためおかしかっただけ?
・要再調査
・なんでもかんでも<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を読み込むってこと?
左のビューポート幅は約 800px。デバイスピクセル比が 2x でない限りブラウザは lighthouse-640.jpg を読み込み、2x である場合は lighthouse-1280.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で処理可能?
・出来ないんじゃないの?


「css3-mediaqueries-js」と「Respond.js」の違い

レスポンシブ / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、嫌になるぐらい分かりづらい



類似度ページランキング
順位 ページタイトル抜粋
1 画面幅に応じて取得ディレクトリパスを変更したい 100
2 マウスオーバーで画像変更スクリプト 35
3 自分の環境でスプライト画像を作成したい 33
4 ストリートビューが使いにくくなった 30
5 画像ライセンスについて調査した結果、分かったこと 30
6 perspectiveのベンダープレフィックスを自動付与したい 30
7 ディスプレイ比較の重要性/画像が重要な意味を占めるサイトで、何か違うなと感じたら 29
8 いい感じのロゴを見つけたら、そのサイトへのリンクを張っていくページ 29
9 良い感じのWebデザインを発見したら、その場で確認後、このエントリーへ追記していく 28
10 CSSで直前の要素を取得するセレクタはない。ので、直後の要素を取得してマイナス設定値を指定しました。 27
11 FireBug クィック情報ボックスを表示しないようにする 27
12 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー 27
13 ブックマークアイコンをクリックした際、最初から編集画面を出す方法を知りたい 27
14 リンクを新しいタブで開く/IE 26
15 親要素の横幅を越えたヘッダー/レスポンシブ対応 26
16 「レイヤー」+「レイヤー効果」をコピーして新規psdにペースト 26
17 探している「HTML5エディタ」 26
18 画面が横になってしまったら、Ctrl+Alt+↑ 26
19 デスクトップにChromeのショートカットを作成 26
20 背景画像を要素幅一杯に広げ、リサイズにも対応させる 25
2024/10/05 10:09 更新
週間人気ページランキング / 9-28 → 10-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 18
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 13
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
6 RGBの種類 / ビットカラー | RGB(色) 6
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 「bgcolor」「background-color」「background」の違い | CSS 5
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
9 aタグで複数のブロック要素を囲むやり方 | CSS 3
9 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
10 HTML5では「ブロックレベル要素」「インライン要素」で分類しない | HTML5(HTML) 2
10 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
10 Design 0 2
2024/10/5 1:01 更新