A Unified solution to <picture>

*A Unified solution to <picture>*

Perhaps there's a very simple way to support both pre- and post-layout
queries with <picture>, and sacrifice neither functionality or performance.

If image dimensions are specified in-markup, and more than one resource
matches the provided media queries, then image fetching occurs after CSS is
downloaded, instead of during pre-parse. This will cause <picture> to have
exactly the same performance characteristics as *background-image*, instead
of *img, and permit the final image selection to be performed based on CSS
sizing constraints.*

*I've written up the details here: *
https://gist.github.com/nathanaeljones/5047077

---

I also propose the expansion of the Use Cases and Requirements document to
include:

*11. The solution SHOULD offer an method to leverage breakpoints defined in
CSS.*
*12. The solution SHOULD support a simplified syntax to support primary use
cases 3.1 and 3.4 (preferably a list of images and their dimensions), in
order to reach users of content management systems and those without
detailed knowledge of CSS media queries.*

This allows complexity to be moved from HTML to CSS, and removes the need
for high-volume repetition of breakpoint logic.

Authors who wish to use responsive web design will be able to use a CSS
framework or snippet and matching CSS classes on <picture> to achieve
responsive images - a path much less intimidating than CSS media queries,
and much easier for CMSes and authoring tools to support (how would a GUI
for media queries be designed)?

I fear for adoption of <picture> unless we can make it CMS and 'non-coder'
friendly.
Thanks,
Nathanael