"UX Basics" was retired on August 31, 2018. You are now viewing the recommended replacement.
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
The <picture> element is a container used to specify multiple source files for a child image element.
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 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
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