javascript - 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!