How to Create Responsive Images with Picturefill

How to Create Responsive Images with Picturefill
As more and more people browse the web on a mobile device you’ll find yourself optimizing websites for mobile frequently. The introduction of responsive design leads you to a website that will automatically resize the content based on the device screen size and orientation. Up until now there was no easy way to save bandwidth by using differently sized images based on the user actual screen size. With the new HTML element <picture> this will change. Learn all about the new <picture> element and how you can start using it today without native browser support. (tweet this) Let get started!
The <picture> Element
There is a great introduction for the new <picture> element on Tuts+ so I will not repeat everything here. Just to get you a basic understanding on how the <picture> element works let’s look at a quick code sample. The <picture> element strives to make it easy to define different image files for different screen sizes. The browser can then automatically select the best fitting image to download and therefore save bandwidth and speed up page loading. Basic usage of the <picture> element looks like this:
<pre class="brush: xml; title: ; notranslate" title=""><picture>
<source srcset="mobile.png">
<source media="(min-width: 480px)" srcset="tablet.png">
<source media="(min-width: 1024px)" srcset="desktop.png">
<img src="tablet.png" alt="A photo of London by night">
</picture></pre>
<p>How will the browser react to this code? It will download and display different images based on the screen size of the current device. For a device with 1024 or more pixels in width it will download <em>desktop.png</em>, if you have between 480 pixel and 1024 pixel it will download <em>tablet.png</em> and for a device with less than 480 pixel in width it will download <em>mobile.png</em>. You may be wondering why there is a <img> element inside the <picture> element? This is the fallback solution for any browser which does not understand the <picture> element. And now we are at the point where I have to tell you which browsers already support this new element. Sadly the answer is <strong>none</strong>!</p>
<p>But of course this article would be quite pointless if there were no solution to work around this issue. Luckily some folks have taken the time to implement a polyfill for this feature so you can start using it today! And of course this polyfill <strong>will work in all kinds of browsers</strong>.</p>
<h2>Picturefill - A Polyfill for the <picture> Element</h2>
<p>As the name says <a href="http://scottjehl.github.io/picturefill/" target="_blank">Picturefill</a> is a polyfill for the new <picture> element. This means that the Picturefill JavaScript will emulate the functionality of the <picture> element in any browser which does not support the actual element natively. That enables you to use the new <picture> element in all major browsers (including Internet Explorer 9). It's easy to use, you only need to add a single JavaScript file to your website and Picturefill will do all the work. But before you stop reading here and head over to their website let me tell you real quick that Picturefill comes in 2 different versions! Version 2 (which is still beta) is build with the current <picture> element specification in mind so you don't need to change the code once some browsers support <picture> natively. The older version 1.2 (currently marked as stable) on the other hand follows a slightly different syntax but is already more mature in it's implementation.</p>
<p>In the following I will focus on the Version 2 of <a href="http://scottjehl.github.io/picturefill/" target="_blank">Picturefill</a> as it is the way to go until native browser support appears.</p>
<h2>Let's See Some Code</h2>
<p>To use Picturefill in your website simply download the JavaScript file and reference it in the <head> section of your website.</p>
<pre class="brush: xml;"><pre class="brush: xml; title: ; notranslate" title=""><script src="picturefill.js" async></script></pre>
<p class="MsoNormal" style="margin-bottom: 0.0001pt;">For the async attribute to work you may need to add <a href="https://code.google.com/p/html5shiv/" target="_blank">HTML5Shiv</a> for older browsers (like Internet Explorer 9).</p>
<p>Now the code (as shown above) will work even if your browser does not support the <picture> element. Only for Internet Explorer 9 we need to add a little hack to get it to work:</p>
<pre class="brush: xml;"><pre class="brush: xml; title: ; notranslate" title=""><picture>
<!--[if IE9]><video style="display:none"><![endif]-->
<source srcset="mobile.png">
<source media="(min-width: 480px)" srcset="tablet.png">
<source media="(min-width: 1024px)" srcset="desktop.png">
<!-- [if IE9]></video><![endif]-->
<img src="tablet.png" alt="A photo of London by night">
</picture></pre>
<p>This code, will work in every major browser. <a href="http://scottjehl.github.io/picturefill/examples/demo-02.html" target="_blank">Try it out</a> and make sure to resize your browser window to see the changes!</p>
<h2>Why Not Modify The <img> Element?</h2>
<p>If you prefer you can do all of the above in the <img> element itself. Picturefill supports 2 new attributes to our well known <img> element: <strong>sizes</strong> and <strong>srcset</strong>. You can use the sizes attribute to define different image sizes. Next you'll use the srcset attribute to define the image filenames and sizes. This can look like this:</p>
<pre class="brush: xml;"><pre class="brush: xml; title: ; notranslate" title=""><img sizes="100%, (min-width: 40em) 80%" srcset="images/mobile.png 400w, images/tablet.png 800w, images/desktop.png 1200w"/></pre>
<p>Complicated? See the <a href="http://scottjehl.github.io/picturefill/examples/demo-01.html" target="_blank">Demo</a> or read Eric Portis great <a href="http://ericportis.com/posts/2014/srcset-sizes/" target="_blank">explanation</a> (including pictures).</p>
<h2>Conclusion</h2>
<p>In my opinion responsive images are a great way to improve the browsing experience on a mobile device. <strong>Who want's to wait around for a high resolution image I cannot even see on my small screen? </strong><a href="http://ctt.ec/fejNn" target="_blank">(tweet this)</a> The only thing missing in the approach is the added overhead for designers and developers. Maybe someone could provide us with a server extension / WordPress Plugin to automatically create different sized images based on the uploaded high resolution version? Wouldn't that be great?</p>
<p><em>Photo by <a href="https://www.flickr.com/photos/69797234@N06/" target="_blank">Antoine Lefeuvre</a></em></p>
<p></p>
</pre></pre></pre>