- With the introduction of responsive web design in 2010, it quickly became clear we needed a better and more responsive solution to adding images to our webpages. That old and familiar one-image-fits-all-screens model was saw previously simply wasn't working. As with everything that happens on the web, the need for responsive images lead to several different, and in reality, competing proposals. And it wasn't until the summer of 2014 that different sites and the browser manufacturers finally came together to create one consistent specification that everyone could agree on.
Today, we're able to start using responsive images in our process thanks to the responsive images community group, or RICG. However, there's a big caveat here. Because the responsive images specification is so new, the browser support for responsive images is, let's call it, sub-optimal. If you go to caniuse.com and you look up srcset, you will see that currently the only browsers that support this new attribute are Chrome, Opera, Android browser, and Chrome for Android.
There is zero support in Opera mini, IE, or current version of Firefox. And there's limited support in Safari and iOS Safari. Now this is based on today, as of this recording. But it's unlikely to change in the near future. If you look up the picture element, you'll see the situation is even worse. For picture, the only browsers that support this markup are Chrome, Opera, and Chrome for Android. There is zero support for any other browser. And this is a bit of a problem if you want to use responsive images today.
It is also a situation that will change in the near future. And to be honest, this is fairly common when new things are introduced, either to CSS ot HTML. That's why this site, Can I Use, exists to begin with. But, if we want to use responsive images, it's a bit of a challenge. So, even though the specification exists, and everyone agrees on it, we can't really expect the end user to experience responsive images out of the box. Unless we bring the browser up to our standards by adding what's known as a polyfill.
This means, even though browsers are not ready to handle responsive images, we can, and should still use them. This is what's often referred to as paving the cow paths. We, designers and developers, need to start using responsive images today, and use them consistently to the specification, so that the browser manufacturers will implement these images as quickly and accurately as possible. By using responsive images markup, browser manufacturers will see that market is being used and will have an incentive to get their motors running and build in proper support.
I urge you to visit the Picturefill site you see here, and read through the documentation at your own leisure. It provides background information about the project, as well as multiple well-documented examples for best practice implementations. In this chapter, I'll show you how to build Picturefill into your projects so you can use responsive images markup right now and see the results in most browsers right away. And then, in the following chapters, I'll walk you through the proper implementation of responsive images in your HTML in detail.
- How responsive images work
- Adding Picturefill to your site
- Making regular images responsive
- Using the <picture> element
- Identifying breakpoints and layout changes
- Using the <picture> elements for image type fallbacks
Skill Level Intermediate
Q: When I use Firefox's Responsive Design View, the images aren't automatically reloading when I resize the window. What do I do?
A: This is a known bug that only affects Firefox version 38. If you update to Firefox 39 or later, this should be resolved (at the time of writing, Firefox 39 is slated for release June 30, 2015).