This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.

Check out a free preview of the full CSS Grids and Flexbox for Responsive Web Design course:
The "Introducing Responsive Images" Lesson is part of the full, CSS Grids and Flexbox for Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Introducing responsive images, Jen describes the different challenges around the desktop, mobile, and tablet in today's modern web. She then covers how to use the new <picture> tag released in HTML 5.1 to solve these problems, along with how to address backward compatibility.

Get Unlimited Access Now

Transcript from the "Introducing Responsive Images" Lesson

>> Jen Kramer: The next thing that I have been asked to talk about for this workshop is responsive images. So here with our responsive images, we have two kinds of images that might be of interest to us, one is the big picture on a page that might look great on a desktop and we wanna go to a mobile dimension, we probably want to change that to a different type of image.

[00:00:25] So, we have those kinds of images that display on a page that with an image tag and we also have images that display on pages with background images, right?, fabulous. So that's what we're gonna talk about next, both of those approaches. Okay, so here we are, responsive images.

[00:00:45] So remember, images that resize is one of the key things, or the key properties that we need to remember for responsive design. And there's a whole bunch of different ways to do this. And as you've noticed, I've used a really lovely hack, to make this happen. We loaded one image in and I just stretch it to fit the screen, right?, super awesome hack.

[00:01:10] But, probably not the best approach, right. Cuz we can load a big image and then we can use our HTML properties to scale it, right? Not the best approach, why?
>> Jen Kramer: Why is that? Pardon?
>> Speaker 2: Pixelation?
>> Jen Kramer: Pixelation definitely could be a problem. It could get really pixelated as it gets big.

[00:01:30] What else could be a problem with that?, if we load one image and use it across all sizes?
>> Speaker 2: Load times?
>> Jen Kramer: Load times can definitely become a factor, right? We have a great, big, honking huge image on desktop, trying to display that on mobile, not the best experience in the world, right?

[00:01:48] We can have a server-side solution, right? So browser sends over to the server, hello, I'm a browser and my screen is so and so pixels wide and the server goes, cool, here's an image, right? It's the appropriate image to that, so those kinds of solutions are great and that is all the technology I'm gonna talk about for those solutions, but those are awesome, you can totally use those.

[00:02:12] How about this solution? Where we have a whole bunch of images, three or four image tags one after the other and then we're just gonna use display none or display inline or display block, to turn them on and off at various dimensions. What actually happens with that approach?

>> Speaker 2: It's still being loaded even though it's not being shown.
>> Jen Kramer: Now you're loading four images on the page, even though you're only displaying one. You're now loading three or four images on the page. They load in in the background, so they still download, not a good approach either.

[00:02:48] But there are some JavaScript solutions on the client side that will download just the right picture for your particular solution. So it will know exactly which image to download and just download that one picture. Okay, but even better than all of that is this brand new HTML tag called the picture tag.

[00:03:11] It was released as part of HTML 5.1 that was released in September of last year so it's now been out for a year. And as you can see here, the support for the picture tag is pretty good except for the usual suspects like Internet Explorer, we love Internet Explorer.

[00:03:27] But of course it works great in Firefox and Chrome and so forth, all right? And then we also have a picture fill, which is the picture tag polyfill that can be used to help backwards compatibility, All right. So if you wind up with a situation where you do have to support Internet Explorer, the Picturefill Polyfill is a great way of doing that.