誰にでもこのsrcsetのどこが間違っているのか分かりますか？

Question

私は対応力のあるWordpressのウェブサイトを構築しています。ブログフィードには、タイトルと画像を持つストーリーのリストがあります。 - 140x140px（ストーリーがリストに表示されている）

480PX上ワイド - 360x190px（3の列に表示されるストーリー）

1. アップワイド479pxに次のように画像サイズがなければなりません

   私はこれにSRCSETを使用して、140x140pxイメージをブラウザ用に最大479px、360pxイメージをブラウザ用に480px以上読み込むようにしました。

   私はグーグルで、サイズやsrcsetについては文字通りあらゆる種類のドキュメンテーションを読んでいましたが、私は頭に浮かべることができません。これまでのところ私は、次のを作ってみた：

   <img 
    
       src="http://placekitten.com/140/140" 
    
       srcset=" 
    
       http://placekitten.com/140/140 140w, 
    
       http://placekitten.com/360/190 360w" 
    
       sizes=" 
    
       (max-width: 479px) 140px, 
    
       (min-width: 480px) 360px, 
    
       100vw" 
    
       alt="" 
    
       class="lazyload" 
    
   />

   残念ながら、このすべてが行う140x140pxの画像に設定されている画像の実際のSRCにもかかわらず、すべての幅で360x190pxを表示しています。

   私が逃したものは誰でも見ることができますか？私はそれが私が最も混乱しているサイズだと思う。私は文書化されたようなメディアクエリを追加しましたが、適用されないようですか？

   ありがとうございました！

Answer 1

<img>要素でこのsrcset戦略は、ブラウザがまだを画像をキャッシュしていないという事実に依存していることに注意してください。この戦略は、ブラウザの帯域幅を節約することを目的としています。したがって、広いビューポートから始めると、ブラウザは2つの画像のうち大きい方を取り出すだけで、サイズを変更しても小さい画像にフォールバックしなくなります。

あなたは、さまざまなビューポートのブレークポイントで画像をロードするようにブラウザを強制する代わりに<picture>を使用する場合：**

<picture alt="" class="lazyload"> 
 
    <source srcset="https://via.placeholder.com/360x190" media="(min-width: 480px)" /> 
 
    <img src="https://via.placeholder.com/140x140" /> 
 
</picture>

Answer 2

下記のコードを確認してください。

<picture> 
 
       <source class="img-fluid" srcset="//www.fillmurray.com/140/140" media="(max-width: 479px)"><img class="img-fluid" src="//www.fillmurray.com/360/190"> 
 
      </picture>