Preview
Video Player
00:00
00:00
Adding Sizes
6:52the source-set attribute lists the various image resources available to the browser. Optionally, we can also include the sizes attribute, which takes one or more CSS media conditions and ends with a length unit. This tells the browser how much space the image should take up in the layout.
As we've learned, the source set attribute
set lists,
0:00
the various image resources available to
the browser.
0:03
Optionally, we can also include the sizes
attribute.
0:07
Now this is a little bit confusing,
0:11
so if you don't understand at first, don't
worry.
0:13
I'm going to explain it a few different
ways, and provide a code example.
0:17
The sizes attribute takes one or
0:23
more CSS media conditions, and ends with a
length unit.
0:26
This tells the browser how much space the
image, should take up in the layout.
0:32
This doesn't actually set the width of the
image, we do that in our CSS.
0:37
Rather, similar to the length value we
gave in the source set attribute,
0:42
it provides the browser with either an
exact number or
0:47
a rough guess on the size of the image in
the layout.
0:51
This helps the browser figure out, which
source image to fetch.
0:55
So, what's the difference between the
length values in the source set attribute,
1:00
versus the media conditions and length
values in sizes?
1:05
In the source set attribute,
1:10
we're telling the browser the native width
of the image in pixels,
1:11
just like the width we might see in an
image editing program like Photoshop.
1:16
In the sizes attribute,
1:21
we're telling the browser how much space
that image will take up in the layout?
1:23
Because, remember images can be resized by
the browser.
1:28
For instance a 2X image at 1,000 pixels,
1:32
will actually take up the equivalent of
500 pixels in the layout.
1:35
This is a subtle difference,
1:40
so let's take a look at an example that
makes this more clear.
1:42
So, let's say that we wanted our banner
image to only
1:48
take up half the layout, so maybe we could
leave room for a title over here.
1:53
Or something like an advertisement over
here, and have a half width banner image.
2:00
To do that we'll change the banner image
class to max width 50%.
2:05
So, let me jump into my work space here.
2:12
And there's our banner image with the
class banner image,
2:16
and, let's go to our CSS.
2:22
So we'll go to main.css, and
2:24
if I scroll down here, to where it says
profile layout,
2:29
we have this banner image class and right
now it says min-width 100%.
2:36
Let's change that to max-width 50%.
2:39
So, I'll Save that out.
2:44
And lets go back, and refresh the page.
2:50
And now, the image is taking up half the
width.
2:54
Now, the image that has been chosen by
Chrome,
2:58
is a source where the subject is too far
away.
3:01
And the cropping doesn't fill quiet right.
3:04
So, lets add the sizes attribute to the
banner image.
3:07
So just to make sure we're getting image
here.
3:13
lets open up the dev tools with the
cache disabled and I'll refresh there and
3:16
that is indeed the image that it's giving
us so, let's go back to our work space.
3:22
And, let's go to index.html.
3:29
And first, let's try writing a media
condition using the sizes attribute.
3:36
So when the browser hits 1,024 pixels,
3:42
we also know that that's the maximum width
for our wrapper,
3:46
because in our CSS here it says wrapper
max-width 1,024 pixels.
3:51
So, if the image is taking up 50% of that,
we know that it's 512 pixels.
4:00
So, right here, we can add the sizes
attribute.
4:07
And we'll add one of those media
conditions.
4:17
So we'll say min-width is 1,024 pixels.
4:20
Followed by a space, and then 512px.
4:27
So, we'll save that out, and lets go back
to the browser.
4:34
And with the cache disabled we'll refresh.
4:39
And you can see that we're getting a
slightly better crop,
4:42
so this works a little better, but we
still have a problem.
4:45
Chrome will always use the largest image,
available in the cache.
4:49
So even though when our page loads at the
largest size we get a better crop,
4:53
we are still loading in images that are
too large,
4:59
when the browser is at a smaller size.
5:03
So let's size that down, so we can see
that.
5:06
And the images are too small.
5:10
So in addition to our immediate condition,
let's also add a plain length value.
5:13
And, when the browser is at a size value
that's smaller than 1024 pixels,
5:21
the wrapper stretches from edge to edge.
5:27
So, you can see there's our rapper
stretching to both sides.
5:31
So we know that our 50% image is taking up
exactly half the viewport width.
5:37
We are using a mobile first approach, so
we should put this value in.
5:43
Before this first media condition.
5:49
So, let's do that now.
5:56
I'll say sizes 50 viewport width
5:58
followed by a comma, and then we have our
second media condition here.
6:04
So let's save that out, and we'll go back
to the browser, and refresh.
6:10
And now, if we just size this down and
refresh,
6:15
we're getting the proper crop that we
want.
6:19
As I size this up, it should pop to the
crops that we would expect.
6:24
So it looks like it's using the small and
medium sized images there.
6:32
Like I said the sizes attribute can be a
little confusing.
6:37
Be sure to check the notes associated with
this video for more resources, and
6:41
try experimenting on your own, to see how
different media queries and
6:45
values impact the results.
6:50