Responsive Pictures
Introduction
Making images responsive has become the next biggest headache of web designers and developers.
A proposal for the HTML5 specification was the element:
<picture> <source media="(min-width: 60em)" srcset="/images/banner-1024.jpg" /> <source media="(min-width: 35em)" srcset="/images/banner-600.jpg" /> <source src="/images/banner-320.jpg" /> <img src="/images/banner-320.jpg" alt="SEO text here"/> </picture>
As no browser supports the picture element, the above code will not be rendered except for the img element.
This jQuery plugin self-executes to replace picture elements with an img pointing to the appropriate image source. It will use the first picture source with a valid media query, so it is strongly recommended to place the largest image source first. If the picture source does not have a media attribute, the plugin shall set it as having min-width:0 (show on all browser sizes).
Usage
<script type="text/javascript" src="/path/to/jquery.html5pictures.js"></script>
Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.
Use the above html with the largest image first scaling down.
This plugin self-executes so there is no need to call any init functions.