How to use a lower resolution image for mobile?

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"));
       });
    });

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!