When working in responsive design, we frequently have to provide different images and use a series of media queries to display the right ones at the appropriate time. This works fine, but is a little labor intensive. Instead, we can use the upcoming <picture> tag to produce a neater effect.
Note
Support for the <picture> tag is still somewhat early; we have to use a polyfill to provide support for the tag for some browsers. For more details, it's worth checking the CanIUse.com site at http://caniuse.com/#feat=picture.
Let's dive in and take a look at how we can use the tag using these steps:
We'll start, as always, with setting up the markup for our demo. From the code download that accompanies this book, extract copies of the
picturefill.html,picturefill.css, andpicturefill.jsfiles; save these into the root,css, andjssubfolders of our project area, respectively.In the code download, there are three images we also need:
small.jpg,medium.jpg, andlarge.jpg; these need to go into theimgsubfolder as well.
Now, we have our demo set up. Next, try resizing the browser window smaller or larger. Notice how the two images change, albeit at different response points. The key to this is the use of the picturefill.js polyfill created by Scott Jehl. This aims to replicate the functionality of <picture> until such time as the browser supports it natively and we can remove the fall back.
The library is called using this script block—document.createElement is used to create a dummy picture fallback element, as it doesn't exist yet at this point:
<script>
document.createElement( "picture" );
</script>
<script async="true" src="js/picturefill.js"></script>We then provide the fallback code as follows:
<p>Here's how that renders in the browser. Feel free to resize to see it change.</p> <img sizes="(min-width: 20em) 80vw, 100vw" srcset="img/small.jpg 375w, img/medium.jpg 480w, img/large.jpg 768w" alt="A random image">
This is followed by the native <picture> element, which will be supported by Firefox, Opera, and Chrome within the next few versions of each browser:
<picture>
<source srcset="img/large.jpg" media="(min-width: 768px)">
<source srcset="img/medium.jpg" media="(min-width: 480px)">
<img srcset="img/small.jpg" media="(min-width: 375px)">
</picture>It's worth getting to know the <picture> element. While it means that we have to have our CSS media queries in-line, it produces a cleaner result as we don't need to use individual media queries in a separate style sheet.
Note
Rather than using plain PNG or JPG images, you may like to look at using WebP images instead. They are technically similar but provide a better compression rate. You may need to get additional support added to use them in applications such as GIMP (visit http://registry.gimp.org/node/25874).
A small word of warning: the <picture> tag is still very new, so expect there to be changes to the overall design before it is finalized. It may raise some important questions about whether using it is right for your needs and how it should be maintained within your code; for example, are you happy to use it, but accept that not every browser might support it yet? Are your needs such that you can't use it yet, but can live with using a polyfill as an interim measure?
If you do decide to use it, it will require careful planning in terms of implementing it. Thankfully, Scott Jehl's implementation (as used in this chapter), is close to the intended final version of <picture>; this should make the switchover relatively painless.
Note
To get an up-to-date picture (pun intended!) of the latest state of play with the <picture> tag and its use for responsive images, it's worth taking a look at the Responsive Image Community Group's site at http://responsiveimages.org/.
In the last exercise, we mentioned some different formats and that something similar to WebP is a better alternative; we can do even better by using SVG, when working responsively. How? Let me reveal all with a look at using it for improved scalability.