Today I released version 2 of picturePolyfill, the real picture element polyfill.

Responsive Images

The great news about version 2 of PicturePolyfill is that it supports the real picture tag, and it gives you the ability to create responsive images TODAY.

To have responsive images, include the picturePolyfill.min.js script in your page and mark up your images as you see below.

The markup

To support HD (Retina) displays

<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">
    <source srcset="img/480x480.gif,   img/480x480x2.gif 2x"/>
    <source srcset="img/768x768.gif,   img/768x768x2.gif 2x"   media="(min-width: 481px)"/>
    <source srcset="img/1440x1440.gif, img/1440x1440x2.gif 2x" media="(min-width: 1025px)"/>
    <source srcset="img/1920x1920.gif, img/1920x1920x2.gif 2x" media="(min-width: 1441px)"/>
    <noscript>
        <img src="img/768x768.gif" alt="A beautiful responsive image"/>
    </noscript>
</picture>

To support only standard resolution displays

<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">
    <source srcset="img/480x480.gif"/>
    <source srcset="img/768x768.gif"   media="(min-width: 481px)"/>
    <source srcset="img/1440x1440.gif" media="(min-width: 1025px)"/>
    <source srcset="img/1920x1920.gif" media="(min-width: 1441px)"/>
    <noscript>
        <img src="img/768x768.gif" alt="A beautiful responsive image"/>
    </noscript>
</picture>

If you have an image server for automated scaling

<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440">
    <source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/>
    <source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" media="(min-width: 481px)"/>
    <source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720" media="(min-width: 1025px)"/>
    <source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960" media="(min-width: 1441px)"/>
    <noscript>
        <img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440" alt="A beautiful responsive image"/>
    </noscript>
</picture>

Demo

Here’s the picturePolyfill demo on GitHub.io

More info

I encourage you to look at the clean, self-explaining javascript code of picturePolyfill.

To know more about the script and about the script, read the picturePolyfill project page on GitHub.

Please drop a comment to tell me what you think about the script.