The industry is gaining considerable momentum towards implementing the < picture > element and the srcset attribute. Both of these could finally offer a standard solution to the gnarly problem of providing a mature and consistent approach to implementing images effectively, especially within Responsive Websites, and potentially also bringing some Web Performance benefits.

Ahead of full take-up, and considering future-legacy-browers, there is an updated version of Scott Jehl’s PictureFill: https://github.com/scottjehl/picturefill.
As such, you can seriously considering implementing a better images approach *today*.

First steps to try:
- grab a copy of picturefill.js
- Use the < picture > element as such:

          
          <picture > 
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            <source srcset="/image1_big.jpg" media="(min-width: 1000px)">
            <source srcset="/image1_medium.jpg" media="(min-width: 800px)"> 
            <source srcset="/image_small.jpg"> 
            <!--[if IE 9]></video><![endif]--> 
            <img srcset="/image_fallback.jpg" alt="context">
          </ picture >
          
          

Demo : How do you like them apples?

In this demo, I change image payload/response size at 800px and 1000px, and change the visual (different asset requested) below 800, with a separate alternative image requested for non-javascript.

I am using a server-side Dynamic Imaging system to make the image manipulations on the fly (using query string parameters to specify the width, quality, and sharpening to be applied at-request time):

srcset="https://images.amplience.com/i/benco/Apple_Row2.jpg?w=1400&qlt=80&unsharp=0,1,1,7" media="(min-width: 1000px)"

srcset="https://images.amplience.com/i/benco/Apple_Row2.jpg?w=800&qlt=80&unsharp=0,1,1,7" media="(min-width: 800px)"