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 res

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

Answer 3

It's simple - create another image with less resolution, and put it with media queries.

Media Queries can help you hide and show elements based on screen resolution and media type.

A great resource would be this article about media queries on CSSTricks which covers different devices, platforms and res

Answer 4

you can develop your css spreadsheet file by adding display none for large images in mobile view, the new mobile browsers wont load large images if they contain display:none in css, allowing the page to load faster and also adding display non for small images in desktop view will do the same .