メディアクエリを使用して、異なるデバイスに使用されるすべての画像の要求を回避するにはどうすればよいですか？

Question

知りたいのですが、メディアクエリを使用して、さまざまなデバイス用に作成したすべての画像をロードしないようにする方法を教えてください。現在、私のマークアップは以下のようになっています：

    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-lg">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-md">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-sm">
    <img src="/media/1062/lg.png" alt="Fresh from garden" class="visible-xs">

上記は、デバイスに関係なくすべての画像をロードし、モバイルデバイスのページをより重くします。私はrazor cshtmlを使用しており、これを実装する最良の方法を探しています。

助言がありますか ？

Answer 1

ブラウザは、表示または非表示に関係なく、すべての画像をダウンロードするため、CSSベースのメディアクエリは使用しません。 HTML5マークアップまたはJavascriptを使用して、目的を達成できます。

ここにあなたが始めるべきいくつかの方法があります：

• Img Srcset（HTML5マークアップ）
  • <img sizes="100vw" srcset="sm.jpg 400w, md.jpg 800w, lg.jpg 1600w" src="sm.jpg">
• 画像（HTML5マークアップ）
  • <picture> <source media="(min-width: 36em)" srcset="lg.jpg 1024w, md.jpg 640w, sm.jpg 320w" sizes="33.3vw"> <source srcset="cropped-lg.jpg 2x, cropped-sm.jpg 1x" /> <img src="sm.jpg" /> </picture>
• Zurb Foundation Interchange（JavaScript）
  • <img data-interchange="[sm.jpg, small], [md.jpg, medium], [lg.jpg, large]">
• Koen Vendrikのレスポンシブ画像（JavaScript）
  • <img data-src-base='/' data-src='<480:xs.jpg,<768:sm.jpg,<960:md.jpg,>960:lg.jpg'>
• ResponsiveJS（JavaScript）
  • <img src="sm.png" data-min-device-width-641="md.png">
• レスポンシブImg（JavaScript）
  • <img id="img1" src="example.jpg" style="max-width:100%;" />
• lazySizes（JavaScript）
  • <img sizes="(min-width:1000px) 930px, 90vw" data-srcset="sm.jpg 500w, md.jpg 640w, lg.jpg 1024w" data-src="md.jpg" class="lazyload">
• ImagerJS（JavaScript）やや古いがまだ機能している
  • <div class="delayed-image-load" data-src="example{width}" data-alt="text"></div>