1 00:00:00,000 --> 00:00:04,462 [MUSIC] 2 00:00:04,462 --> 00:00:09,163 Art direction is a technique for drawing attention to the most important part of 3 00:00:09,163 --> 00:00:12,530 an image as it's viewed on different devices. 4 00:00:12,530 --> 00:00:16,990 Let's say that we have a photo of a person that's taken from a wide angle, 5 00:00:16,990 --> 00:00:18,690 like our banner image. 6 00:00:18,690 --> 00:00:22,290 On large screens, this probably looks fine and 7 00:00:22,290 --> 00:00:27,370 can be helpful because the surrounding environment provides some context. 8 00:00:27,370 --> 00:00:32,000 However on a small screen, the image may be resized 9 00:00:32,000 --> 00:00:35,240 to the the point where we can't even see the person anymore. 10 00:00:35,240 --> 00:00:38,750 In these cases, we need to do some art direction, and 11 00:00:38,750 --> 00:00:43,240 provide different crops and focal points for our image. 12 00:00:43,240 --> 00:00:46,390 We've already been doing a little bit of art direction, 13 00:00:46,390 --> 00:00:49,870 by using different image sources, with different crops. 14 00:00:49,870 --> 00:00:51,630 But there's more that we can do. 15 00:00:52,800 --> 00:00:57,050 For instance, our banner image looks pretty good when in landscape, but 16 00:00:57,050 --> 00:01:00,880 what if a device has a portrait orientation? 17 00:01:00,880 --> 00:01:03,060 Then we just have a really small image, 18 00:01:03,060 --> 00:01:07,540 when typically a banner image should be large and impactful. 19 00:01:07,540 --> 00:01:13,650 It would be better if we provided a square crop of the image. 20 00:01:13,650 --> 00:01:18,310 This is something we'll have to do in an image editing tool, like Photoshop, so 21 00:01:18,310 --> 00:01:18,870 let's take a look. 22 00:01:20,550 --> 00:01:25,850 Now, I've already created some square crops of our images, 23 00:01:25,850 --> 00:01:28,290 but I just want to show you what this looks like. 24 00:01:28,290 --> 00:01:34,020 So I'm going to open the image folder in workspaces and 25 00:01:34,020 --> 00:01:37,380 I'll expand this a little bit so we can see the names of the files. 26 00:01:37,380 --> 00:01:40,620 And here we have our wide banner images. 27 00:01:40,620 --> 00:01:42,060 And you can see the crops there. 28 00:01:42,060 --> 00:01:44,460 So we've already been doing a little bit of art direction. 29 00:01:45,710 --> 00:01:53,490 But here I have banner square large and banner square medium. 30 00:01:53,490 --> 00:02:00,580 These square images have a different aspect ratio than our wider banner images. 31 00:02:00,580 --> 00:02:05,240 So we only want them to display when the browser has an aspect ratio 32 00:02:05,240 --> 00:02:08,360 that's thinner than it is wide. 33 00:02:08,360 --> 00:02:11,730 Or in other words when its in portrait mode. 34 00:02:11,730 --> 00:02:16,830 The source set and sizes attributes don't give us tight control over 35 00:02:16,830 --> 00:02:19,520 which image gets chosen to be displayed. 36 00:02:19,520 --> 00:02:20,770 Like I said earlier, 37 00:02:20,770 --> 00:02:24,875 Chrome will always use the highest resolution image it has in cache. 38 00:02:26,605 --> 00:02:30,795 While it's better to use source set, and sizes most of the time, 39 00:02:30,795 --> 00:02:34,865 if we absolutely have to chose the source image ourselves, 40 00:02:34,865 --> 00:02:39,325 like in the case of art direction, then we should use the picture element. 41 00:02:39,325 --> 00:02:41,215 And that is what we'll learn about next.