What is Art Direction?

[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