web-dev-qa-db-ja.com

レスポンシブ画像srcsetが機能しない

次のHTMLを使用して、レスポンシブ画像に新しいsrcsetアプローチを実装しようとしています。

        <img class="swapImages"
        srcset="assets/images/content/large.jpg 1200w,
                assets/images/content/medium.jpg 800w,
                assets/images/content/small.jpg 400w"
        sizes="100vw"
        src="assets/images/content/small.jpg"
        alt="responsive image">

Imを使用してchrome 40を取得すると、最大の画像が表示され、ブラウザのサイズを変更し、キャッシュをクリアしても何も起こりません。

ポリフィルする必要がある場所を読んだため、picturefillプラグインを使用しましたが、chromeはそれをサポートする必要があります.....まだ機能しません。

デモページを作成しました： http://www.darrencousins.com/lab/resp-img-srcset/

私は何を間違えていますか？

どんな助けも大歓迎です。

imageresponsive-designsrcset
47
sygad1

正解です。

問題は、ブラウザが高解像度の画像（キャッシュに読み込まれている）を取得すると、ウィンドウを小さくしたとしても、低品質の画像をダウンロードすることは意味がないということです（これはトラフィックを節約するためです）。

したがって、これをテストする場合は、ウィンドウを小さくして、ページをロードするだけです（キャッシュをクリアした後、またはシークレットモードを使用します）。あなたは、モバイルまたはタブレットのバージョンを取得します。その後、ウィンドウを大きくすることで、ある時点でブラウザーが高解像度の画像に切り替わることがわかります。

69
TondaCZE

Imgsetタグで使用する場合、srcset属性は、TondaCZEで言及されているように、どの画像を読み込むかという点で決定をブラウザーに任せます。指定したビューポートでブラウザに画像を強制的にロードさせる場合は、ピクチャ要素を使用します。

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>
25
mike.pj

デモページ（ http://www.darrencousins.com/lab/resp-img-srcset/ ）にモバイルバージョンが表示されないことに気づいたばかりです（ブラウザのサイズを変更したり、 DevTools-Device mode）on Google Chrome（バージョン48）。

デバイスのピクセル比を1に変更すると、正しい画像が読み込まれるようです。

enter image description here

enter image description here

理由はわかりませんが、w記述子がデバイスのピクセル比を考慮に入れているかどうか疑問に思っています

9
MeV

私はあなたがchromeブラウザでテストしていると思う、そしてそれが動作しない唯一の理由はそのchrome機能。 chrome v54も同様）の最新バージョンに適しています：

Google Chromeバージョン40 srcset属性の問題

IE8とFirefoxv49でページを確認しましたが、物事はとても魅力的です！

私が観察した他のことは、chromeは他の画像をダウンロードしませんが、ダウンロードされた画像のサイズをかなり変更します。このページ：

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

4
Kaashan

Chrome DevToolsサイドバーを使用している場合は、DevToolsが開いているときにキャッシュを無効にするようにChromeと言うことができます。常に最大の（キャッシュされた）イメージを提供している場合。

  1. DevToolsを開きます（F12）
  2. 設定に移動します
  3. 下にスクロールしてNetwork
  4. チェックキャッシュを無効にする（DevToolsが開いている間）
1
BadHorsie