Skill Level Intermediate
- [Chris] Hi, this is Chris Converse. And in this episode we'll take a look at creating responsive images using the image element in HTML. Using the source set attribute, we'll direct the browser to use different images based on the users screen size and the size of our images. And in a future episode, we'll take this one step further by taking a look at the picture element. So, if you'd like to follow along with me, download the exercise files and let's begin by opening the HTML file in a text editor, and a web browser. Once you have the HTML file open in a browser, you'll see the lay out we're gonna be working with. We have an image here that's taking up the full width of the page and in the HTML file, if I scroll down here, you'll see that I've included the CSS in line.
I've done this so that we can see the relationship between what's happening in the CSS and what we're gonna be setting up in the HTML and then if I continue to scroll down, once we get into the body area here we can see I have a main element then an article element, and inside of the article element, we have a header, an image tag, and a few paragraphs. And it's this image tag that we're gonna be adding our source set attribute to. Now before I add the source set attribute, I'm gonna come in here and break these attributes on separate lines, just so this is easier to see, and then after the alt attribute, we'll add our source set.
I'll type srcset="" I'm also gonna come in here and break the quotes on separate lines, again, just so it's easier to see. And now the value for the source set is going to be a series of images. We'll start by typing images/ Then we'll type photo_small.jpg Then a comma. Next we'll specify the medium image. So, images/photo_medium.jpg then a comma and then the last one will be large.
And I'll just duplicate the line before and change medium to large. And now, in addition to specifying the individual files, we'll also need to specify the width of these images. So, the large image has a width of 1200 pixels. The medium has a width of 800 pixels. And the small has a width of 450 pixels. So, let's get our cursor, after images/photo_small.jpg and before the comma, let's hit a space and we're gonna put in 450 and then a W.
So we're specifying here that the small jpg file has a width of 450 pixels. Next, after the _medium.jpg let's hit a space. The original file width here is 800 pixels, so we'll put 800w and then finally, for the large image, we'll add a space and put in 1200w. With our source set attribute in place, let's save our HTML. Let's go back to the browser. I'm gonna decrease the width of the browser so that the width is under 450 pixels.
Then I'll come up here and I'll hit reload. And we'll now see that the image is replaced with the small jpg file. Next, let's resize the browser between 450 pixels and 800 pixels. Then I'll come up and hit reload. We'll see the medium image being used and then I'll bring the browser width above 800 pixels. Reload once more and now we'll see the large image being used. So, what's happening here is the browser is choosing the image based on the width of the overall viewport. Now, it is worth noting here that the browser takes into account the resolution of the device when choosing the image, meaning it reacts to the hardware pixels and not the software pixels.
On a 3X display, for example, you'll see the 1200 pixel image when the viewport width is only 450 pixels wide. Now, if you wanted to override this default behavior, maybe to keep a user from downloading extra data, you can add another image in the source set, specifying the medium image, and setting the measurement to 3X, which targets a device with a pixel density of three. Now another case where we would get an image larger than what we need is if we were using the image at a smaller size than the full width of the browser.
So, to demonstrate this, let's go back to our HTML file. I'm gonna decrease the width of my browser, hit reload again, and now let's go into our CSS and change the width of the image and then we'll coordinate our HTML to the CSS. Let's scroll up. Let's find the article, space, image rule. Let's come in here and change the width to 50%. Let's add another property of float. We'll set the float to left. And then let's come up here and change the margin. So we'll keep the margin top at five pixels.
For the right, we'll set this to 20 pixels. We'll keep the bottom at 20 and the left at zero. With this in place, we'll hit Save. Go back to the browser, let's hit reload. We'll now see that the image is much smaller, however, it's still using the medium sized jpg file. So to account for this, let's go back to our HTML, let's scroll down let's find our image element. Now before the source set attribute, I'll just hit a return. And let's come in here and set another attribute called sizes. So I'll type sizes="" and all I wanna do here is specify that the image is being used at roughly half of the width of the viewport.
I'm gonna type in 50 and then vw for viewport width. And this tells the browser that even though the viewport is a certain width, the size of the image is roughly half of that. With this in place, we'll hit save. Go back to the browser, let's hit reload and now we'll see that we're looking at the small jpg image even though the browser width is in between 450 and 800 pixels. And then I'll come in here and increase the width of the browser to above 800 pixels, come up here and hit reload, we'll see that we're now still looking at the medium sized image, even though the browser width is wider than 800 pixels.
So using the source set attribute gives us flexibility for switching images, as well as built in support for detecting device resolution. And as for the subject of Responsive Imagery, we've only scratched the surface. If you'd like to learn more, I'd recommend taking Responsive Images by Morten Rand-Hendricksen, which is also available here in the library. With that, I'll conclude this episode, and as always, thanks for watching.