How to use a lower resolution image for mobile?

Question

I'm designing a responsive site using media queries to change the layout as the viewport size changes.

For mobile, I think it would be beneficial to use a lower resolution image to save on page loading times and bandwidth.

How would I disable the high quality image and replace it with the lower quality image using CSS?

Thank you.

Answer 1

Using the HTML5 picture element, you can specify inline media queries to size your images:

<picture>
 <source srcset="sm.png" media="(max-width: 400px)">
 <source srcset="mid.png" media="(max-width: 800px)">
 <source srcset="lg.png">
 <img src="lg.png" alt="MDN">
</picture>

The element will degrade gracefully to show the image tag in browsers that don't support it.

Read more about the picture element on MDN.

Also, a JS polyfill in case the img tag fallback isn't enough!

Answer 2

At the time of this writing, the picture element has virtually no browser support.

So here are two alternatives:

• If the image is sourced in the CSS you can prevent it from loading with display: none.

• If the image is in the HTML img tag consider that the browser calls images from the src attribute. You can work around this by using the the data attribute instead. Apply data to all images and add src only when you want to load them.

HTML

  <img data-src="http://i.imgur.com/60PVLis.png" height="100" width="100" alt="">

JS

  $(document).ready(function() {
       $(this).find('img').each(function() {
         $(this).attr("src", $(this).data("src"));
       });
    });