x-picture

Implements the <picture> element interface using Polymer, a Web Components polyfill.

There is much left to do and document, so please feel free to contribute.

Using x-picture

To use x-picture, simply include the Polymer library and a <link> to x-picture.html.

    <script src="path/to/polymer/polymer.min.js"></script>
    <link rel="import" href="path/to/x-picture.html" />
        

From there, you can use <x-picture> the same way you would <picture>. List your sources using either srcset or src attributes, and include the media query that matches the intended source in the media attribute.

    <x-picture alt="Description of content for accessability">
        <source srcset="http://www.fillmurray.com/300/600 1x, 
                        http://www.fillmurray.com/600/1200 2x" />
        <source srcset="http://www.fillmurray.com/400/600 1x, 
                        http://www.fillmurray.com/800/1200 2x" 
                        media="(min-width:400px)" />
        <source srcset="http://www.fillmurray.com/500/600 1x, 
                        http://www.fillmurray.com/1000/1200 2x" 
                        media="(min-width:500px)" />
        <source srcset="http://www.fillmurray.com/600/600 1x, 
                        http://www.fillmurray.com/1200/1200 2x" 
                        media="(min-width:600px)" />
        <source srcset="http://www.fillmurray.com/700/600 1x, 
                        http://www.fillmurray.com/1400/1200 2x" 
                        media="(min-width:700px)" />
        <img src="http://www.placecage.com/c/800/800" alt="Nic Cage" lazyload>
        <p>Paradoxally, I am invisible AND accessible.</p>

    </x-picture>
        

<source>'s are source order dependent with the last match winning. This is done to follow the cascading nature of CSS and to encourage a mobile (content) first approach.

Content to show if polymer fails.