srcsetで正しい画像が読み込まれない

Question

私はChromeを使用して&以下のHTMLを使用していますが、ブラウザの幅に関係なく（レスポンス開発ツールを使用している場合）、150x150の画像が常に読み込まれます。私はそれを正しく理解していた場合、ブラウザの幅が150px未満で60x60イメージをロードすると思ったのですか？

<a href="/"> 
    <img src="https://dummyimage.com/60x60/000/fff" 
    sizes="100vw" 
    srcset="https://dummyimage.com/150x150/000/fff 150w"> 
</a> 

Answer 1

それはあなたがsrcset属性に一覧表示だけですので、それは常に150ピクセルの画像をロードします。ここで

は、あなたが何をすべきかです：

<img 
    src="https://dummyimage.com/60x60/000/fff" 
    sizes="100vw" 
    srcset="https://dummyimage.com/60x60/000/fff 60w, 
      https://dummyimage.com/150x150/000/fff 150w"> 

フルビューポート（sizes属性で100vw）は、どこかに60と150ピクセルの間に150よりも60に近い場合、ブラウザは、その後60PXイメージをロードします、ブラウザの実装によって異なります。

ビューポートが61pxの場合は、実際に大きな150pxイメージを読み込むことは意味がないため、60pxをダウンロードする必要があります。

ビューポートが149pxの場合、拡大した60px画像は醜いので、150pxの画像をダウンロードする必要があります。

これは少なくともChromeでどのように実装されているかです。