Preview
Video Player
00:00
00:00
Srcset with Picturefill
8:27To 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.
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