This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.

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

One of the biggest issues with images can be content management systems that write width/height attributes or inline styles. Finding ways to override this functionality is the key to retrofitting images. Be sure to verify browser compatibility with any inline image style techniques. Background images have responsive considerations too. One of the main techniques is to prevent the loading or requesting of backgrounds.

Get Unlimited Access Now

Transcript from the "Retrofitting Images" Lesson

>> [MUSIC]

>> Ben Callahan: So let's talk a little bit about images. A lot of times what I'm seeing as we work on retrofits is some kind of crazy stuff. Like a lot of times what's happening is the images as they're generated from the content management system are doing things like writing width and height attributes on the images themselves.

[00:00:33] Or literally sometimes even generating inline styles. The CMS itself that's just how it works. And so sometimes, so I've been trying to find some ways that we could kinda look at overriding some of those inline styles that have been defined. I think a lot of times we think well it's more specific fits in line or it's sort of it's gonna override any of our other styles but there's actually some really interesting ways That you can make these kinds of things work.

[00:01:02] So let me just show you quickly some of the tests I've built so there's just an image that's being loaded in a couple different ways, sort of left and right. Each of these tests has sometimes just a single test sometimes more. And below them you'll see again this is in a repository.

[00:01:21] But this image is in line, has no attributes. So no width or height. It has no inline styles. This one just has in the CSS a width of 100%. So we know this works right. We've experimented with this already. Next one down if you set an attribute in line width of 200.

[00:01:41] Okay, so it's just a standard HTML image tag with a width attribute on it. Not an inline style, the width attribute. You can actually override that, fairly successfully just with a style, width of 100%. When I started doing this, I didn't actually know that would work. I mean, I don't know, I never really tried that.

[00:01:59] If we keep going You can also use, actually Macs width won't work but you could also use Macs width if you set the width to be something much greater. So, this is the kinda stuff that I'm talking about that you can do where you're like defining max width as opposed to width and then setting a crazy width and the max will still be 100%.

[00:02:24] So you can do some kinda really tricky stuff with some of these max width and width rules working in tandem to override inline styles. I'm not gonna walk through all these but you'll see that if you go down here literally right here, Test 4 A. An inline style, so in my HTML, a style attribute that says width, 200 pixels, bang, imported.

[00:02:49] Like, there's no way that you should be able to override that, right? But if you just do width with an import, that doesn't override it. But you can see that we're able to get that working using a min width rule. So there's really some cool stuff you can do if you just start to experiment a little bit with some of these.

[00:03:06] Again this these tests are all out in that folder if you're interested in kind of looking through those. There's probably tons more testing that could be done on this but you get the idea. So, questions on that?
>> Ben Callahan: So let's talk about browser compatibility of some of those techniques.

[00:03:30] I tested that document that's in your repo on all of these and got, pretty much got really good support on this, with the exception of IE8 and min-width. So there's, as usual there's some sort of a caveat to all this. And it seemed like aspect ratio stuff was a little bit tricky in IE8 if there were attributes like height attributes.

[00:03:55] So you may need to be doing things like setting the height to auto in the CSS, so that it's basically allowing it to to use its own aspect ratio to define the height. But really good support. I mean even on mobile devices, so. Okay, questions on some of that stuff?

[00:04:15] So that's inline images. Background images is sort of a different way, a different story. One of the things that a lot of people, I think probably assume about when they're doing responsive and they're using like a media query and then doing a display none on an image. A lot of times though, that image is actually gonna be requested, most of the time, in fact.

[00:04:38] So putting that images in a background image inside of media query, doesn't mean that the image request is not gonna be made to the server. Now you can do some stuff with mutually exclusive queries and actually Tim, again, has done some really good testing on this. His article is there in the bottom but you can actually do some stuff where you display none the parent.

[00:05:03] And that will prevent the the request from being made. That's pretty well supported. But really what we're finding is that browsers manufacturers are pretty much just making all the requests that you list in your browser unless you're very very explicit about it. So if you're curious about how to prevent those requests from being made on the background images check out Tim's article he's got a couple solutions there.

[00:05:26] That kind of explain how you might be able to do that [COUGH].