Preview
Video Player
00:00
00:00
Using Srcset
10:41Using srcset, we can provide multiple image sources for different responsive resolutions and pixel densities. In this video, we'll learn how to implement the srcset attribute in Workspaces.
Before we jump back into our work space,
let's check out the Mozilla developer
0:00
network documentation for the source set
attribute.
0:04
You can find a link to the MDN docs in the
notes associated with this video.
0:09
So, here I have the Mozilla Developer
Network documentation open.
0:14
And you'll see that we have this srcset
attribute here.
0:21
And right here, it says this is a list of
one or more strings separated by commas,
0:25
indicating a set of possible images for
the user agent to use.
0:31
Each string is composed of a URL to the
image, and
0:37
optionally there is white space followed
by either a width descriptor.
0:41
So that is a positive integer followed by
a w.
0:47
Or, a pixel density descriptor.
0:51
And that is a positive floating point
number followed by An x so
0:55
that would be something like one x or two
x and so on.
1:00
So, lets see what this looks like in work
spaces.
1:05
So I'm gonna close this, first,
1:08
lets try out the pixel density descriptor.
1:12
So, right here, Inside of the div, with
the class profile description.
1:17
I'm going to open that up, and inside of
there, I'm going to say div with the class
1:23
profile-image and we've already set up
some styling for this in our CSS.
1:30
Basically, this will just be floated to
the left,
1:36
with a little bit of margin, I think.
1:40
And inside of here, we're going to open up
an image element,
1:42
and then this is a self closing element.
1:50
And I'm going to.
1:53
Hit enter a couple of times here to make
some space to work
1:55
because we're going to put a couple of
attributes inside of the image element.
1:58
So first, I'm going to use a normal source
and
2:04
we'll go inside of the image folder here
and
2:10
I have a file called photo-@ one x,
2:13
with a dash, and that's a JPEG image.
2:18
And then I'll give it an alt attribute.
2:24
And I'll say this is a photograph of a
flower.
2:28
Okay, I'll delete that extra space there.
2:33
So let's just save that out and switch
back to our preview and
2:36
hit refresh and now we can see that normal
one x image there.
2:42
So far so good.
2:46
However the screen that I'm using here is
actually a retina display,
2:47
so this is at two x.
2:53
So it can advantage of two x images.
2:55
So lets go back to our work space and
2:59
we're going to add these source set
attribute.
3:02
And inside of source set I'm going to type
a couple of sources.
3:07
I'll say image slash photo and
3:12
I'll use that same one x image, so we'll
say at one x
3:16
dot JPEG, and then followed by a space.
3:23
I'll give a pixel density descriptor so
there's a space and
3:30
then a one and an x now, if we save this
and refresh in our preview,
3:34
we should see that this is not quite
right.
3:39
That's because we need to add an x there.
3:45
Let's refresh, and there we go.
3:49
So, that's actually a good way of knowing
that Chrome is indeed using
3:51
the source set and not the source
attribute.
3:56
The reason we want to leave this here is
for
4:01
legacy browsers that do not yet recognize
the source set attribute.
4:03
We do have the poly fill, but just in case
that fails.
4:08
We have the regular source attribute there
however,
4:12
we also want to include a two x image and
if we go into our images folder.
4:16
You can see that we have this nice two x
image there.
4:20
So let's get that in there.
4:24
And the way we do that is by using this
same source set attribute and
4:26
we want the two x image to come first.
4:32
And we don't want two source sets, we just
want the one.
4:36
So we're going to use those same quotes,
4:42
and we'll say img/photo-@2x.jpeg.
4:45
And then a space followed by the pixel
density descriptor, so two x.
4:49
And then we'll put a comma there, and that
comma is going to separate.
4:55
These two different source images.
5:00
So if we save that out, we go back to the
browser.
5:03
Right now I can see some JPEG artifacts
here,
5:06
but if I refresh the page those go away.
5:10
And that's telling me that, that is
actually this two x image.
5:13
Now I can test this really quick, by
putting in one of our other images.
5:18
So lets tell the browser that actually our
two x image is
5:23
maybe this banner small.jpeg picture so,
5:28
lets just say banner small.jpeg I'll save
that out and when I go back and
5:33
refresh, now it's actually putting that
banner image in there.
5:38
So we know that this pixel density
descriptor is working.
5:42
So I'm just going to undo that and leave
it at that two x image and
5:46
there we go now lets add that banner up at
the top
5:52
using a width descriptor so will go back
here and
5:57
just outside of our content block here,
6:02
we're going to add an image and we'll
close that just like that.
6:09
And again we're going to create some space
here using enter and,
6:18
I'll give this a normal source to start
out.
6:23
So this is image slash banner, and
6:25
we'll use the medium resolution one for
the fallback.
6:29
And then, for the alt attribute, I'll say
Photograph of
6:36
Nick Pettit in front of some trees there
we go.
6:39
So lets save that and see if that's
working.
6:45
Okay, there's our image there.
6:48
I also need to give this a class
6:49
in our CSS called banner image.
6:54
So lets see if that's being applied.
6:59
There we go.
7:02
Now we have some better spacing there.
7:03
And now we need to use source set to give
these proper images so
7:06
let's say image slash banner dash large
dot jpeg.
7:14
And instead of using the pixel density
descriptor I'm going to use a width
7:21
descriptor.
7:26
Now, let's take a look at this image.
7:28
It's 20 48 across.
7:31
So that is the width that I want to use.
7:34
I want to tell the browser what the width
of this image is before it loads it.
7:36
And I'll explain that a little bit more
clearly in a moment but
7:42
lets just go ahead and finish typing this
out.
7:45
So we'll say img/banner-medium.jpeg.
7:48
And I know that's 1400 across.
7:52
And I'll put another comma there and list
out a third and final image,
7:55
hold banner-small.jpeg, and that is 800
across.
8:00
So, let's save that out and refresh the
browser.
8:09
And there you can see I'm actually getting
the large crop here and
8:14
that is what I was hoping for.
8:18
Now, you might be wondering, why are these
width descriptors necessary?
8:21
Shouldn't the browser know the width of an
image?
8:25
Well, the browser doesn't know the width
of an image until it's completely
8:28
downloaded so, we need to tell the
browser, hey, this source image is going
8:32
to be this wide, and that way it can
intelligently select the correct source.
8:37
One other thing I should point out is that
the behavior
8:43
of the source-set attribute is somewhat
unique in Google Chrome,
8:47
because Chrome is one of the few browsers
that supports this feature natively.
8:51
Chrome will always use the largest image
available in the cache.
8:57
A simple way to always keep the cache
clear while working
9:02
is to always keep the dev tools open.
9:06
So if we go ahead and
9:09
open up the dev tools, we can go to the
network tab here.
9:13
And there's a little checkbox that says
disable cache.
9:18
So we want to make sure that that is
checked and when we refresh the page,
9:22
Chrome will pull in the latest image so
let's re size the browser here.
9:29
And we'll go to one of these smaller sizes
and you'll see that it's still
9:36
using that large image, which really isn't
appropriate for this smaller size.
9:41
However, because we have the dev tools
open, and the cache is disabled.
9:46
We'll refresh, and now Chrome only knows
about this smallest image,
9:51
because it pulled the appropriate one,
using the source set attribute.
9:57
However, if I re size the browser you'll
see that it now popped to the medium crop,
10:02
and if I keep going you'll see that now
it's at the large crop.
10:10
And that's the largest image we have
available.
10:16
But once again, if I go down to the
smallest size It's still going
10:18
to use that large crop until I refresh the
page with the cache disabled.
10:23
So if you refresh the page, and you don't
see any change.
10:28
Make sure that you have the dev tools
open, and that your cache is clear.
10:32
Behavior will be different in other
browsers that are using the poly fill.
10:37