The main prob;em with responsive design is how it handles images. This is easier with a static website but when using a CMS and losing the control over content to the website administrator and/or the client images may get added that are larger than the ideal width or images that after the are reduce to a smaller size become in recognisable.

The Hopefull cure is a new image syntax, headed by Mathew Marquis.

An example draft of the proposed syntax from 18th June 2012 looks like this:

<source srcset="small.jpg 1x, small-highres.jpg 2x" />
  <source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x" />
  <source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x" />
<img src="small.jpg" alt="Description of image subject." />

The chain of events followed by the above markup pattern are:

  1. If the picture element is unsupported, the img contained therein is shown as fallback markup.
  2. If picture is supported, use media attributes to determine which source element best suits the user’s viewport.
  3. Once an appropriate source element has been selected, the srcset attribute determines which image source is best suited to the user’s screen resolution. If only a single resolution is necessary, the src attribute will function as expected.

This is available at: