Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Responsive Images!
You have completed Responsive Images!
Preview
To make sure these new pieces of HTML work in old browsers as well as current browsers, we can include a piece of JavaScript known as a polyfill. In this case, we'll be using a polyfill called picturefill.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The source set and sizes attributes, along
with the picture element,
0:00
allow us to deliver the most optimal image
assets.
0:05
If a device has a large display with a 1x
pixel density, or
0:08
if it's a small mobile screen with double
pixel density we can use these elements
0:13
to more carefully craft the experience,
rather than wasting bandwidth or
0:19
delivering images that are too low
resolution.
0:24
To make sure these new pieces of HTML work
in old browsers as well as current
0:28
browsers we can include a piece of
JavaScript known as a polyfill.
0:33
A polyfill will implement specific
features in browsers that
0:39
don't support those features natively.
0:43
That way we can code to the HTML standard,
browsers that support our
0:45
HTML natively will work as intended, and
browsers that don't will use the polyfill.
0:51
In this case we'll be using a polyfill
called picturefill.
0:57
I've included a copy of picturefill in the
workspace associated in this video, but
1:01
if you want to learn more, check out the
link to picture fill in the notes.
1:06
Now let's take a look at our workspace and
see what we have so far.
1:11
So here is actually what it will look like
when we're all finished.
1:17
We'll have two different images here.
1:21
There's a banner image at the top and then
what I'm calling a profile picture here.
1:23
You could easily say that this is a blog
post or
1:28
any other kind of site that you'd like.
1:32
And when I re-size the browser here, we'll
get different images and
1:34
different crops on those images, and we'll
get into all of that very soon.
1:42
But here is what our workspace should look
like when we first start out.
1:48
It should just be this block of text.
1:54
So let me go into the code here in my
workspace, and
1:57
just give you a quick tour for some
context.
2:02
So we have the head here, and there's
pretty standard stuff in there.
2:05
We're including normalize.css, just to
create a level playing field with our CSS.
2:10
There's a Google font I'm including and
then, I have main.CSS here.
2:16
And we're not going to be writing any CSS,
2:21
but if you'd like to take a look at that,
you can.
2:23
Up at the top here, we have some basic
styling.
2:27
Tthere's a few helper classes, just to
make the page look nice.
2:31
There's a few layout classes, and I'll be
using this profile image to
2:36
style that image of a flower, and then we
have a few media queries.
2:41
But despite this being a course about
responsive design,
2:47
we actually don't need to worry about
these media queries a whole lot.
2:50
We will change a few things in the CSS but
not much.
2:55
So in our HTML here, we also have this
content-block helper class,
3:00
and then we have a block of text here, but
we're going to be focusing on images.
3:05
The first thing we need to do is add the
picturefill polyfill.
3:11
When we include this into our HTML we're
also going to add an async attribute.
3:15
This doesn't change the way the polyfill
or our HTML will behave.
3:21
Rather it's just a small front end
performance improvement
3:26
that tells the browser it can load this
script asynchronously.
3:30
Meaning that it won't block HTML
rendering, and
3:34
will just load whenever it can.
3:37
We can only add the async attribute to
scripts that have no dependencies,
3:40
because this can be loaded in at any time.
3:45
If, for example, we were loading in jQuery
and a jQuery plugin,
3:47
we couldn't add async because the plugin
depends on jQuery being present.
3:52
But in this case we can use it, so let's
do that now.
3:59
So here in my workspace,
4:02
I am going to put a space just below
main.css.
4:05
And then, I'm going to type, script, then
the source attribute, src.
4:11
And I have a file here in my JavaScript
folder, called picturefill.min.js.
4:18
So that is the picturefill polyfill, and
it's been minified for
4:25
us, for better front-end performance.
4:29
So I'm going to say picturefill.min.js,
and
4:31
then I will type the async attribute, and
the async attribute does not need a value.
4:36
So we can just leave that as is with no
equal sign.
4:43
And now, if we save that out, picturefill
will be included into our page.
4:48
So if we switch back and refresh, we
shouldn't notice anything different.
4:54
But, if we view the page source, we should
see that picturefill is now included.
4:58
And if you want to test that really quick,
you can click on it and oops,
5:04
it's actually not working so let's see why
that is.
5:08
Oh, it's because it's in the JavaScript
folder.
5:13
So I actually need to say js followed by a
slash.
5:17
And now, if I refresh this page source,
5:21
there it is, so it's being loaded in
properly.
5:27
So that's exactly why it's important to
just run a quick check,
5:29
make sure it's being included because
there's no visual changes on the page.
5:33
So now that that's being properly
included,
5:37
we can go ahead and move forward.
5:43
Now, I just want to show you really quick
that we have some images here in
5:46
the image folder, and these have already
been sized appropriately,
5:51
but of course you would use your own
images.
5:56
So if we click on each one of these, we
can see the resolution in pixels and
5:59
it also gives us a preview of file size,
so that's nice.
6:06
So, there are small, medium, and large
banners here and
6:10
they're all at different crops.
6:14
So, just to show some contrast between the
large and the small here, you can
6:16
see how those are pretty different, and of
course the medium is somewhere in between.
6:21
We also have square versions of that same
image, and we'll be using those later on.
6:26
And then we have the image of a flower I
was showing you earlier, and
6:31
we have that at 1x and 2x resolutions, so
we'll be using those very shortly.
6:34
We can use the source set, or src
attribute on any normal image element.
6:42
However, instead of just using one file,
6:48
like we would with the more typical source
attribute.
6:51
The source set attribute allows us to
specify multiple files for a single image.
6:54
For example, we could provide a 2x image
for
7:01
devices that have double pixel density and
a 1x image for more traditional screens.
7:04
The magic here is that we don't know when
the browser will choose each file.
7:10
It's not specified and it's up to browser
vendors
7:16
to make the most intelligent choice about
which file to deliver.
7:19
That might not sound desirable but in most
cases, this is actually a good thing.
7:24
We can be more explicit about choosing
files using the picture element, which
7:30
we'll learn about later on, but it's often
best to just use the source set attribute
7:35
on an image element because, in essence,
it makes our site more future friendly.
7:40
If browser vendors come up with a better
way to choose sources, or
7:45
new devices come along, this
implementation will leave the hard
7:49
thinking out of our code, and in the hands
of the browser.
7:53
Using the picture element, we can do a
more custom implementation, but
7:57
our custom implementation, might be
slightly worse than any new and
8:01
improved browser algorithms that come
along in the future.
8:06
Still, when we learn about the picture
element, we'll learn about some instances
8:10
why we do need more granular control than
what the source set attribute can provide.
8:14
Now that we understand more about the
source set attribute,
8:22
we're ready to learn how to use it.
8:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up