The Picture Element9:24 with Nick Pettit
The <picture> element is a container used to specify multiple source files for a child image element.
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 up