7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Using the Picture Element

The picture element is in the HTML spec. And you can think of it like an enhancement of the IMG element, and the way you use it is very simple. You basically wrap the IMG element in a picture. And that picture can have multiple sources. And those sources will return a URL for the image, which will be sent to the IMG element, which, in turn, will display that image on the page. So, let's have a look at how it's done. Using the picture element is really simple. Here, we have the same basic markup that we used in a previous lesson to establish the baseline. You can actually place the picture element inside a figure. It, it's no problem. So what you would do is say picture. You would place the IMG inside it, and then, in addition to the IMG, you can have multiple sources. So, you would have source, and this has a self closing tag. And inside, you can do media and you can set various conditions. For example, let's say that if my page has a minimum width of 480 pixels, then I will have the following source set. Yeah, and that's how it works, basically. It's very similar to what we used before. The only difference is this has a bit more markup, but in my opinion, it's a bit clearer, and a bit easier to use, and plus you can use these media queries without sizes. You can also use the sizes attribute if you want, but we won't do it in this case, so apart from this source, I can have another one. I can have as many sources as I want inside a picture element. So, for this one, let's say, if I have a maximum width of 480 pixels, which means on, I am on a very small screen, then, I'm gonna change my source set to a single image. So, let's say food one, and let's do a crop in this case. And the crop will be 480 pixels in width. And by default, if the browser doesn't support picture, we'll just use the IMG source here. Which is food one. Now, let's take this and apply it everywhere else. Now, let's take a look, and let's start by resizing our page here. So, when I get to this size, the images become fluid. But when I get to this size, which is around here,. My images change. So, instead of the big one, this one, I see this one, which is a crop. So and the same goes for, for the other images. So we go from this to this. From this to this. And so on. [BLANK_AUDIO] This actually solves the art direction problem because on low screen sizes, we can choose to display a different image. And not just a resized version, but a cropped version as well. And it goes the other way around, so if I have a really big view port, I can choose to display a larger image there, which shows maybe even more, so in terms of performance, well, it's pretty similar to what we used before. Here we are loading the large images and the real difference becomes really obvious here, when we're loading the crops, yeah so we have one megabyte here. Now, you can also target retina or high DPI displays. For example, if you were to put another entry here in the source set, and you would say IMG food one retina.jpeg two x, then the browser will know when we're dealing with a retina display that has twice the number of pixels as a typical display, it will load the Retina image, and that's how you use the newly added picture elements. Now, since you have a bit more control over what images you want the browser to display, you can also play around with different image formats, so let's find out how.

Back to the top