Preview
Video Player
00:00
00:00
The Picture Element
9:24The <picture> element is a container used to specify multiple source files for a child image element.
The picture element is a container used to
specify multiple source files for
0:00
a child element.
0:05
That sounds confusing, so
0:07
let's take a look at the documentation on
the Mozilla Developer Network.
0:08
You can find a link to the documentation
in the notes associated with this video.
0:13
So here it says the html picture element
is a container used to specify multiple
0:17
source elements for a specific image
element contained within it.
0:23
The browser will choose the most suitable
source according to the current layout.
0:29
Constraints of the box the image will
appear in of the page and
0:35
the device it will be displayed on, so
that's like a normal or high DPI device.
0:40
This is much easier to understand with an
example, so
0:46
let's jump into our workspace and check it
out.
0:51
So first I need to change this banner
image back to what we had originally.
0:55
So let me open our css and go to main dot
css.
1:01
And let's scroll down here to that banner
image class, and
1:07
remember it said mend with 100%.
1:11
So lets save that.
1:15
Go back and refresh.
1:18
And there we have that same
1:20
banner that we had before going from edge
to edge of the layout.
1:23
So when the browser is in portrait
orientation, I
1:28
want to replace our wide banner image with
the square images that I showed earlier.
1:32
So, let's just see what that looks like
real quick.
1:38
I'll open up the Chrome dev tools and make
sure the cache is disabled.
1:40
And when I resize the browser, so that it
is
1:45
thinner than it is tall, so essentially in
a portrait orientation,
1:50
you can see that we have this wide banner
image.
1:56
But we want to show one of those square
images, so that we have a large and
1:58
impactful banner image.
2:03
Even though it is square, so let's resize
this and let's open up our workspace.
2:06
We'll close the CSS because we don't need
that,
2:14
and I'm just going to actually delete this
entire image element,
2:19
we will be typing some similar stuff here
but
2:24
it's a little bit confusing to just copy
and paste so let's just start fresh.
2:28
So I'm going to first type out a picture
[SOUND] element.
2:33
And this is not a self-closing element.
2:36
You do, in fact, need the closing tag
there.
2:39
And let's open up an image element and
that is self-closing.
2:42
So we'll do that.
2:48
And right here, let's just do the classic
source attribute,
2:50
and we'll say image/banner-medium.jpg.
2:56
And we'll use the same alt text that we
had before.
3:04
Photograph of Nick Pettit
3:08
in front of trees [SOUND] and
3:13
then the class banner image.
3:18
So, let's just save that out and refresh
the page.
3:23
And that is what I was hoping to see
there.
3:28
The picture element behaves like an
invisible span.
3:31
We won't apply any CSS to it because it's
3:36
the not the element that's going to be
displayed.
3:39
Rather it's the child image element inside
of it.
3:42
Now that image needs some sources.
3:47
So similar to the audio and video
elements.
3:50
Will use the source element to specify our
image sources, so
3:53
first, let's add our banner images like
before.
3:58
So, I'm going to go back to my workspace
here.
4:02
And inside of this picture element, I'm
going to add a source.
4:07
So, I have the image element here, and
that' s what's actually going to display
4:12
an image, but we can provide an additional
source element.
4:18
So we'll say source and this is a self
closing element.
4:23
And, we'll use the source set attribute,
and
4:30
just like before, we'll type in the same
source set,
4:35
so image/banner-large.jpg with a space and
4:40
then our width descriptor of 2048 pixels
[SOUND] and then followed by a comma.
4:45
We'll say image, banner-medium.jpg and
4:53
that's 1400 across and then finally.
4:57
I'll say image-banner-small.jpeg and that
is 800.
5:01
Let me just format these a little better.
5:09
There we go.
5:12
So, let's save that out and switch back to
our preview.
5:14
And I'll refresh the page.
5:19
And, as you can see, it's now displaying
the larger crop that we had before.
5:20
And if we go down to a smaller size and
refresh to get that large
5:27
image out of the cache, you can see that
we now have the small crop.
5:31
So let's go back up here just to see if
this is working properly.
5:36
And, as you can see, it did not select the
larger images but
5:43
that is to be expected with the picture
element.
5:48
So we'll refresh the tapes there and
5:51
now you can see that it is choosing the
source that you would expect.
5:54
So far we have what we created before,
5:59
however we only want these images to
display in landscape.
6:02
Everything else should display in portrait
mode.
6:07
So let's add another source with our
square images.
6:09
And let's add a media attribute to our
first source.
6:14
So I'm just going to hop back into my
workspace here.
6:19
And we need to add the media attribute.
6:26
[SOUND]
6:30
[BLANK_AUDIO]
6:33
To our first source.
6:35
And we want to say orientation, landscape
and
6:37
this should actually be in parenthesis.
6:42
[SOUND].
6:46
So we'll save that out and
6:51
we also need to add a second source here
that uses our square images.
6:53
So lets just copy and paste this whole
thing.
6:58
[SOUND].
7:01
So we'll have a second source.
7:02
And we'll just change what's different.
7:04
Now, because this first source is being
specific saying
7:08
it only should display in orientation
landscape, we don't actually need
7:13
a second media attribute here because this
is going to be for everything else.
7:19
Now instead of the banner images here we
want the square versions.
7:25
And for those we have the large and medium
versions.
7:31
There is no small version, so we'll
[SOUND] remove that and
7:39
remove that trailing comma there.
7:42
And these sizes are slightly different, so
7:44
the large one is 1000 pixels across, and
the medium one is 800 across.
7:48
So let's save that out, and we'll go back
to our preview, and
7:55
refresh, and now when we resize the
browser,
8:00
you'll see that it switches over to the
square crops.
8:08
And you can even see when I go to the
smallest size here.
8:11
I get the smaller version.
8:19
And when I go up a little bit.
8:23
[BLANK_AUDIO]
8:25
It will start to switch over to those
banner images
8:28
just like you'd expect and that's it.
8:33
Now we're able to display the images that
we want.
8:36
You'll also notice that Chrome will swap
the sources and
8:39
won't always just use the largest
resolution available.
8:44
This is exactly the behavior that we want,
because at any time,
8:48
the user could switch between portrait and
landscape mode.
8:52
With the source set and sizes attribute
along with the picture element,
8:57
we can handle images for just about any
responsive layout.
9:01
Some of these concepts can be confusing at
first but
9:06
if you spend some time experimenting with
these powerful tools,
9:10
you'll be able to create images that are
better tailored for
9:15
your responsive layouts and ultimately,
build a better experience.
9:19