Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Art direction is a technique for drawing attention to the most important parts of an image as it's viewed on different devices.
[MUSIC]
0:00
Art direction is a technique for drawing
attention to the most important part of
0:04
an image as it's viewed on different
devices.
0:09
Let's say that we have a photo of a person
that's taken from a wide angle,
0:12
like our banner image.
0:16
On large screens, this probably looks fine
and
0:18
can be helpful because the surrounding
environment provides some context.
0:22
However on a small screen, the image may
be resized
0:27
to the the point where we can't even see
the person anymore.
0:32
In these cases, we need to do some art
direction, and
0:35
provide different crops and focal points
for our image.
0:38
We've already been doing a little bit of
art direction,
0:43
by using different image sources, with
different crops.
0:46
But there's more that we can do.
0:49
For instance, our banner image looks
pretty good when in landscape, but
0:52
what if a device has a portrait
orientation?
0:57
Then we just have a really small image,
1:00
when typically a banner image should be
large and impactful.
1:03
It would be better if we provided a square
crop of the image.
1:07
This is something we'll have to do in an
image editing tool, like Photoshop, so
1:13
let's take a look.
1:18
Now, I've already created some square
crops of our images,
1:20
but I just want to show you what this
looks like.
1:25
So I'm going to open the image folder in
workspaces and
1:28
I'll expand this a little bit so we can
see the names of the files.
1:34
And here we have our wide banner images.
1:37
And you can see the crops there.
1:40
So we've already been doing a little bit
of art direction.
1:42
But here I have banner square large and
banner square medium.
1:45
These square images have a different
aspect ratio than our wider banner images.
1:53
So we only want them to display when the
browser has an aspect ratio
2:00
that's thinner than it is wide.
2:05
Or in other words when its in portrait
mode.
2:08
The source set and sizes attributes don't
give us tight control over
2:11
which image gets chosen to be displayed.
2:16
Like I said earlier,
2:19
Chrome will always use the highest
resolution image it has in cache.
2:20
While it's better to use source set, and
sizes most of the time,
2:26
if we absolutely have to chose the source
image ourselves,
2:30
like in the case of art direction, then we
should use the picture element.
2:34
And that is what we'll learn about next.
2:39
You need to sign up for Treehouse in order to download course files.
Sign up