2つのsrcsetイメージがロードされるのはなぜですか？

Question

レスポンシブなウェブテンプレートを開発するコンテキストでは、srcset属性を使用して現在のビューポートのサイズに応じて異なるイメージを読み込みます。これは一般的に問題なく動作します。しかし、生産モードでは、画像はDAM（Digital Asset Management System）からロードされ、特別なパラメータが要求された画像を拡大縮小してトリミングするために使用される。

<img src="{url}/s,x,586,y,0/{img_id}" 
    srcset="{url}/s,x,293,y,0/{img_id} 293w, 
      {url}/s,x,440,y,0/{img_id} 440w, 
      {url}/s,x,586,y,0/{img_id} 586w" 
    sizes="(max-width: 520px) 100vw, (max-width: 1010px) 40vw, 15vw" /> 

問題は、すべての画像が2回（440wと586w）ロードされるようになったことです。 これはキャッシングの問題ですか？

Answer 1

あなたのコードは完全にうまく見えます。ウィンドウのサイズを変更したり、タブレットを回転させたりしない限り、ブラウザは画像のうちの1つだけを読み込む必要があります。