7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.3 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.5 The Solution: a Polyfill

Okay, first things first. What on Earth is a polyfill? I'm sure you've heard this term, but it goes something like this. Some browsers lack a certain functionality, so to make that available you kind of have to patch it up, fill the void. So, that's when you use a polyfill. This term was first nailed back in 2009 by Raymond Sharp, while writing the book called Introducing HTML 5, and on his blog, Remy explains the term Polyfill or Polyfiller is a piece of coat or plugin that provides the technology that you, the developer expect the browser to provide natively. So let's come back to our responsive images problem, and to the fact that the picture element is only supported in a handful of browsers. So to make that available in unsupporting browsers you can use something called Picturefill. This is a script developed by the guys at Filament Group with help from RICG or responsive images community group. You can find their website at responsiveimages.org. You should definitely follow them and stay up to date. Now lets see how we can use picturefill. The page we are going to use here is a very simple one, so we have the picture element which will display crop at low screen sizes, and a regular image at on bigger screens. The difference from what you've seen before is that we're using source set here on the image instead of an SRC and that's the prevent unsupporting browsers from downloading the typical image. This also has a drawback, in that browsers that have JavaScript disabled will only show the alt tag, because they won't be able to load picturefill to display an image so this bit right here will work really well on Chrome as you can see, it loads the large images. However, bring this into Firefox and it won't display any of the images. As you can see, no images were images were being downloaded and that's because Firefox doesn't understand the SRC attribute here from the images. So, to fix that you can go ahead and download picturefill. Simply clone it or download the zip, and the file you'll want to use is in the dist folder. It's one of these two, preferably the minified version, because it's smaller in size. So, what you would do is you would go here, and say script, source, picturefill, min, JS. Now, picture fill also supports asynchronous download, and you can do that using the async attribute here. This will basically tell the browser, Hey, download the rest of the elements while downloading the scripts. So, don't wait for me to finish downloading just take care of the rest. Now, if you do this, you'll get a performance benefit but it also means that if the browser encounters a picture element before the script was downloaded like this one, it won't recognize it. So to get around that you will need to do a script, and with some simple JavaScript here, you want to say something like document.createElement picture. And that will create the actual picture elements so that the browsers can recognize it. And if you're using the modernizer for example, you can skip can this step because that does it automatically. So with this done, let's have a look at our page in Firefox, and you'll see that it now downloads the images correctly. [BLANK_AUDIO] And it downloads the right ones actually, food1 large, just like Chrome, and let's resize this. Now it loads the medium ones, and now it loads the crops. Perfect. So that's basically how you can use Picturefill to add picture support in nonsupporting browsers such as Firefox. Now there are a few drawbacks to, to this approach. I already mentioned one of them, in browsers that don't support the picture element and have JavaScript disabled instead of the pictures, they'll get the alt text because we do not have a source for an image. We have a srcset instead. Another drawback is that some browsers like the ones on Android 2.3, and Internet Explorer 9 cannot see the sources inside the picture element. So for IE9 there is actually a very simple solution for this. You would have to use some conditional comments and add a video tag, and you would do something like this. If IE9 then, do a video with display none, and make sure you close it right here. Now, the other down side of using the picture element is that sources use media queries. So, this will only work in browsers that support the CSS3 media queries. So, there you have it, a pretty complete solution to our responsive images problem, but it's not the only solution. So coming up, we'll have a look at some different approaches.

Back to the top