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 ?


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:

  • Actually media queries work perfectly fine for background images, see timkadlec.com/2012/04/media-query-asset-downloading-results – DisgruntledGoat Feb 13 '17 at 1:44
  • @DisgruntledGoat background images are YUK for actual page content, not only do they not count as page content by search engines they can unnecessary bloat your code if your using them for page content on many pages. The methods listed are intended for page content, not surrounding template elements. Generally a website would want to use <div> or another similar tag for a background not <img>. Back in 2012, we didn't have SRCSET :) – Simon Hayter Feb 13 '17 at 10:21
  • @SimonHayter, what should be best way out of all your suggestions? – Sangeeta Feb 13 '17 at 15:23
  • 1
    @Sangeeta Srcset or Zurb Interchange. Personally I prefer Zurb because it has minimal markup and easier to use that srcset. – Simon Hayter Feb 13 '17 at 21:03
  • @Sangeeta You could use Zurb Interchange div, see jsfiddle I made here for you: jsfiddle.net/SimonHayter/7a8ba66k – Simon Hayter Feb 17 '17 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.