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 ?

Improve this question
1

1 Answer 1

Reset to default
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:

Improve this answer
9
  • Actually media queries work perfectly fine for background images, see timkadlec.com/2012/04/media-query-asset-downloading-results
    – DisgruntledGoat
    Feb 13, 2017 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, 2017 at 10:21
  • @SimonHayter, what should be best way out of all your suggestions?
    – Sangeeta
    Feb 13, 2017 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, 2017 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, 2017 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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