mardi 21 avril 2015

Load images only in certains resolutions

Here is the thing. I have a header at the top of my page which have two images, one of them is only visible when the view port is large ( > 940) and the other only shows 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?

Aucun commentaire:

Enregistrer un commentaire