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 websites which 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 therefor save bandwidth and speed up page loading. Basic usage of the <picture> element looks like this:
<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>
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 desktop.png, if you have between 480 pixel and 1024 pixel it will download tablet.png and for a device with less than 480 pixel in width it will download mobile.png. 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 none!
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 will work in all kinds of browsers.
Picturefill - A Polyfill for the <picture> Element
In the following I will focus on the Version 2 of Picturefill as it is the way to go until native browser support appears.
Let's See Some Code
For the async attribute to work you may need to add HTML5Shiv for older browsers (like Internet Explorer 9).
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:<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>
This code, will work in every major browser. Try it out and make sure to resize your browser window to see the changes!
Why Not Modify The <img> Element?
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: sizes and srcset. 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:<img sizes="100%, (min-width: 40em) 80%" srcset="images/mobile.png 400w, images/tablet.png 800w, images/desktop.png 1200w"/>
In my opinion responsive images are a great way to improve the browsing experience on a mobile device. Who want's to wait around for a high resolution image I cannot even see on my small screen? (tweet this) 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?
Photo by Antoine Lefeuvre