This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Image Downloads and Performance" Lesson
[00:00:00]
>> Jen Kramer: Then we come to my favorite part of all of this which is the background images. And the place to get this URL is in the instructions. And there is a URL here from Tim Kadlec in the very last line of the instructions. And I'm gonna pull up this page because I think this is just totally cool stuff.
[00:00:20] And I wish, Tim, if you're out there watching, please update your article. This would be awesome. So this is actually from five and a half years ago. And I haven't found anybody else who has done this kind of work. But this is really interesting stuff. So the question Tim Kadlec asked was what happens with various types of HTML and CSS, which images actually download?
[00:00:44] So as an example here, here's test one. So if I have a div with an ID of test one, and an image tag inside of that, and I write a media query that says don't display test one, so test one is display none, so we're not displaying the div around the image, does the image actually download?
[00:01:04] And so he ran that test. And, shockingly, the image did, in fact, download, okay, which is actually the answer you would expect. And he has a whole series of these tests. So if it was a background image, and we said display none at some point in time, would the image download?
[00:01:26] So there's a whole bunch of these. And I would encourage you to spend some time with this article cuz it's really interesting reading about what images download where. And, again, I apologize that it's a dated reference. But I haven't found anybody else who has updated this. And if somebody out there knows, I'd love to hear about it because I think this is a really valuable teaching reference.
[00:01:46] But the one I'm gonna scroll down to here is test number five. I think the one that I want. Yes, so test number five is this.
>> Jen Kramer: Actually, we'll start with test number four. So here's test number four. Let's think about these as background images, okay. So our HTML is super simple.
[00:02:10] It's just a div with an ID of test four, okay. And in our CSS, outside the media query, we download one image, okay. And inside the media query, we download a second image.
>> Jen Kramer: So how many images download? And the answer is some browsers are downloading both of them, okay.
[00:02:34] So the best way to deal with a background image is actually with test number five here. And in test number five, it's the same HTML. But we're gonna have two different media queries. And we put our background image inside those media queries. If we do that, then basically the browsers downloaded a single image, whatever the appropriate sized image is.
[00:02:57] Make sense? Okay, so this is really important for performance. We know we're downloading only one image. Again, they're older browsers but,
>> Jen Kramer: We're gonna take past results as an indication of future performance.