Want to create a responsive site with responsive images today, making sure that the browser will fetch only one image per picture, at the perfect resolution for the user's screen?
picture tag is perfect for this purpose, but still not supported by all browsers. You could wait until all old browsers disappear from the place, or you can use it along with the
picture polyfill, picturePolyfill 2.
PicturePolyfill 2 is a responsive images approach that you can use today that uses the real
picture element along with children
source elements with
PicturePolyfill is fast and easy to use because:
- markup & go: it uses the picture tag, easy to markup, and futureproof
- loading performance: it serves only one image to your website users, no double HTTP requests are made
computing performance: it's designed and coded keeping performance in mind. For example, it doesn't execute while a smooth (animated or manually dragged) browser resize is in progress (avoiding useless DOM parsing and useless HTTP requests to mid-breakpoints images that the user might not need) and it caches the
support to HD (Retina) displays easily made via the
Differences with picturefill
picturePolyfill is better than picturefill because:
- it's 15x faster on IE 10, 8x faster on mobile Safari, 6x faster on Firefox and Safari, 4x faster on Chrome and Opera see performance test
- it uses the real
- it gives you the ability to choose a default image that you want to show on Internet Explorer desktop, without the need to add any comment
Here are the performance test results:
Markup pattern and explanation
With HD (Retina) images support
To support HD (Retina) images, mark up your responsive images like this.
<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>
Without HD (Retina) support
If you don't need to support HD (Retina) images, you can mark up your responsive images like this.
<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif"> <source src="img/480x480.gif"/> <source src="img/768x768.gif" media="(min-width: 481px)"/> <source src="img/1440x1440.gif" media="(min-width: 1025px)"/> <source src="img/1920x1920.gif" media="(min-width: 1441px)"/> <noscript> <img src="img/768x768.gif" alt="A beautiful responsive image"/> </noscript> </picture>
Notes about the markup
data-default-src attribute: the image URL that you want to load in IE Desktop < 10.
data-alt attribute: the alternative text that will be set in the
media attribute: any media query, but it's adviced to use a
min-width media query to follow the "mobile first" approach.
src attribute: the image URL at the corresponding
srcset attribute: comma separated URLs and scale at the corresponding
img/768x768.gif, img/768x768x2.gif 2x
img tag in
noscript, but this will make browsers to fetch the fallback image during page load, causing unnecessary overhead.
img is appended and updated
The script searches in the
source tags and selects the last matching
srcset. When found, picturePolyfill will generate an
img element inside the
picture tag, with the corresponding
src attribute is then updated at browser resize (see computing performance section above to read about performance at browser resize).
Server-side scaling/cropping tool
Responsive images can be quite complicated to be served on your website if you have to: pre-scale them at many different resolutions; name them; and maybe change their size when developing a new release of your site.
It's then a good practice to have a server-side picture scaling service (like pixtulate) to scale the images for you, just in time, starting from only one big image.
If you want to use an image server, you can code your HTML like the following:
<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440"> <source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/> <source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" media="(min-width: 481px)"/> <source src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720" media="(min-width: 1025px)"/> <source src="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>
Note that you should serve double resolution images (double width and double height) for HD/retina displays, as you can see in the "With HD (Retina) images support" section of this readme.
- Download picturePolyfill from GitHub
- Include the minified file in your project script directory
You can install the latest version of picturePolyfill using bower
bower install picturePolyfill
To use picturePolyfill, just include the script tag at the end of your html file, in the
head section of your
HTML pages, OR just before the closure of the
defer attribute in the
script tag will prevent the script download to block page rendering while in progress.
<html> <head> Your HEAD content <script src="picturePolyfill.min.js" defer></script> </head> <body> Your BODY content </body> </html>
At the end of the body section
<html> <head> Your HEAD content </head> <body> Your BODY content <script src="picturePolyfill.min.js"></script> </body> </html>
picturePolyfill executes automatically at page load and at browser resizes.
picturePolyfill is intentionally exposed to the global space, so you can call it as you need it.
For example, if your AJAX call changes a portion of your DOM, after your new DOM has been injected on the page, just call
window.picturePolyfill(theChangedElement) to make picturePolyfill to parse a only the changed portion of the DOM.
picturePolyfill supports all modern browsers and down to Internet Explorer 7 (it wasn't tested on IE6).
- On Modern Browsers, Internet Explorer 10 and above: the images will be loaded depending on the matched media query
- On Internet Explorer 7 to 9: the content of the
data-default-srcattribute will be used to reference the image source.
Size and delivery
picturePolyfill.js compresses to around 910bytes (~0.88kb) after minify and gzip. To minify, you might try these online tools: Uglify, Yahoo Compressor, or Closure Compiler. Serve with gzip compression.