[MUSIC]

Art direction is a technique for drawing attention to the most important part of

an image as it's viewed on different devices.

Let's say that we have a photo of a person that's taken from a wide angle,

like our banner image.

On large screens, this probably looks fine and

can be helpful because the surrounding environment provides some context.

However on a small screen, the image may be resized

to the the point where we can't even see the person anymore.

In these cases, we need to do some art direction, and

provide different crops and focal points for our image.

We've already been doing a little bit of art direction,

by using different image sources, with different crops.

But there's more that we can do.

For instance, our banner image looks pretty good when in landscape, but

what if a device has a portrait orientation?

Then we just have a really small image,

when typically a banner image should be large and impactful.

It would be better if we provided a square crop of the image.

This is something we'll have to do in an image editing tool, like Photoshop, so

let's take a look.

Now, I've already created some square crops of our images,

but I just want to show you what this looks like.

So I'm going to open the image folder in workspaces and

I'll expand this a little bit so we can see the names of the files.

And here we have our wide banner images.

And you can see the crops there.

So we've already been doing a little bit of art direction.

But here I have banner square large and banner square medium.

These square images have a different aspect ratio than our wider banner images.

So we only want them to display when the browser has an aspect ratio

that's thinner than it is wide.

Or in other words when its in portrait mode.

The source set and sizes attributes don't give us tight control over

which image gets chosen to be displayed.

Like I said earlier,

Chrome will always use the highest resolution image it has in cache.

While it's better to use source set, and sizes most of the time,

if we absolutely have to chose the source image ourselves,

like in the case of art direction, then we should use the picture element.

And that is what we'll learn about next.