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:

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!