Load images only in certains resolutions

Question

I have a header at the top of my page which have two images, one of them is only visible when the viewport is large ( > 940) and the other only showed on mobile. To achieve this behavior, I'm using Bootstrap 3 and their defined sets of media queries:

<header class="container">
   <div class="row">

      <div class="col-lg-4 hidden-xs">
        <img src="img/hi-res-logo.png">
      </div>

      <div class="col-xs-12 visible-xs">
        <img src="img/small-logo.png">
      </div>

  </div>
</header>

So far, no big deal, the previous code does the job well, but what I want is prevent the load of the large image file itself on mobile to avoid unnecessary data consumption... so how to achieve that?

may be use the `srcset` `img` attribute. http://www.html5rocks.com/en/mobile/high-dpi/#toc-srcset — Gaël Barbin, Apr 21 '15 at 23:01
That's really dependent on the browser. Some browser are smart enough not to download the images if the parent has `display: none` -- There are several question on SO about this subject. You could also have one image (the smaller size) and use JS to replace the SRC. — kel, Apr 21 '15 at 23:01
@kel, enlighten me please, I found nothing with this specific subject — WSD, Apr 21 '15 at 23:04
@JoshGuzman Here is a post about the images not downloading depending on the browser, http://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading. As far as the image SRC thing, there are plugins that you could get more info from or use like, http://luis-almeida.github.io/unveil/ -- hope that helps! — kel, Apr 21 '15 at 23:08

score 1 · Accepted Answer · answered Apr 21 '15 at 23:13

1

Set image as a background and use media query in CSS.

<div class="container">
    <div class="row">
         <div class="col-lg-4" id="my-div"></div>
    </div>
</div>

CSS

@media (max-width: 700px) {
    #my-div {
        background-image: url('img/small-logo.png');
    }
}
@media (min-width: 700px) {
    #my-div {
        background-image: url('img/hi-res-logo.png');
    }
}

answered Apr 21 '15 at 23:13

Ruslanas Balčiūnas

7,310
3
24
41

I think redefine some media queries it's better than use the mobile data of users! – WSD Apr 21 '15 at 23:27

score 0 · Answer 2 · answered Apr 24 '15 at 14:57

**I think it is better to use single media query in this case.**   
#my-div {
    background-image: url('img/hi-res-logo.png.png');
    width: 100px; /*image width - please change as per your image*/
    height: 100px; /*image height - please change as per your image*/
}
@media (min-width: 700px) {
   #my-div {
       background-image: url('img/small-logo.png');
       width: 200px; /*image width - please change as per your image*/
       height: 200px; /*image height - please change as per your image*/
   }
}

Load images only in certains resolutions

2 Answers2