4

I want to know, how can I avoid loading all images I created for different devices using media query. Currently my mark up look like below :

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

above loads all images irrespective of device and makes page heavier for mobile devices. I'm using razor cshtml and looking for best way to implement this.

Any suggestions ?

Sangeeta
  • 173
  • 1
  • 3

1 Answers1

2

You wouldn't want to use CSS based media queries in any case because browsers will download all those images regardless if they are being shown or hidden. You can achieve what you want using either HTML5 markup or Javascript.

Here is just a few methods that should get you started:

Simon Hayter
  • 33,097
  • 7
  • 60
  • 119