91

次の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">

私はchrome 40を使用していますが、取得できるのは最大の画像だけで、ブラウザのサイズを変更し、キャッシュをクリアしても何も起こりません。

ポリフィルが必要な場所を読んだので、ピクチャフィルプラグインを使用しましたが、クロムはそれをサポートする必要があります....それでも機能しません。

そのためのデモページをまとめました： http://www.darrencousins.com/lab/resp-img-srcset/

私は何が間違っている/得られないのですか?

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

4

10 に答える 10

114

あなたはそれが正しいです。

問題は、ブラウザが高解像度の画像を (キャッシュにロードして) 表示すると、たとえウィンドウを小さくしても、低品質の画像をダウンロードする意味がないということです (これのポイントはトラフィックを節約することです)。

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

2022 年に更新。サイズ変更後、キャッシュをクリアする代わりにショートカット (Mac の場合: Cmd + Shift + R) を使用するだけCtrl + Shift + Rで、ブラウザーがリロードされ、現在のタブのキャッシュが完了するまで無視されます (つまり、キャッシュ全体を失うことなく完全にリロードします)。

于 2015-05-06T21:11:17.587 に答える
66

srcset 属性を img タグで使用すると、TondaCZE で言及されているように、どの画像をロードするかという点でブラウザーに決定が委ねられます。指定したビューポートでブラウザに画像を読み込ませるには、picture 要素を使用します。

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>
于 2015-11-04T15:39:26.363 に答える
20

Googleでデモ ページ ( http://www.darrencousins.com/lab/resp-img-srcset/ ) がモバイル バージョンを表示していないことに気付きました (ブラウザーのサイズを変更したり、DevTools - デバイス モードを使用したりしても)。クロム (バージョン 48)。

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

ここに画像の説明を入力

ここに画像の説明を入力

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

于 2015-12-11T11:17:49.753 に答える
1

DPR を 1.0 に変更しようとしましたか? レスポンシブ モードの Chrome DevTools のトップ バーにあります (幅 380px を試してください)。DPR を変更した後、リロード ページ アイコンを右クリックし、[キャッシュを空にしてハード リロード] を選択して、シークレット モードで行うのが最適です。ブラウザは 400w の画像をプリロードする必要があります。

于 2021-05-31T15:24:11.400 に答える
-6

開発ツールを開き、ネットワーク タブに移動してキャッチを無効にします。それだけです。

于 2019-10-20T10:29:27.540 に答える