Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started
Soon you’ll be able to throw away your polyfills and workarounds – responsive images are on the way!
Resize, optimise, editorialise and art-direct your images based on different screen sizes and contexts
Finally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. The <picture> element and a couple of new attributes for the <img> element are behind a flag in Chromium 37 and shipping in Chromium 38 (so coming soon in Opera), in Firefox Nightly and are being implemented in WebKit (although it remains to be seen if Apple will ship it in the next version of Safari).
The new <picture> element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, we’ve prepared this article full of examples.