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

2.4 Using CSS to Selectively Show Images

Using CSS to selectively show images is possible. But you would have to show those images as backgrounds, which sometimes means some extra unnecessary code. Plus, images are meant to be used within HTML most of the time, using the IMG tag. That's the proper, semantic way of doing it. Plus, this approach won't always work. Consider WordPress. The, WordPress has a visual editor that you can use to quickly add images. And that editor doesn't know about CSS backgrounds. It only uses the IMG tags, so. If you're counting on CSS backgrounds to display images, it's not going to work, but how exactly would it work if you need a background image? Well, let's find out. For this exercise, we're gonna use three pictures, and we're gonna display those differently, depending on the view port size. So, the first one is a desktop picture. That's 1,024 pixels wide. And we wanna display that when the minimum width screen is 768 pixels. Then, we have a tablet one that's 768 pixels wide. And we wanna display that when the maximum width is 768. And then, we have a mobile picture that's 320 pixels, and we want to display that when the screen size is a maximum of 320 pixels. So, let's do a simple div with a class of image and then, let's add some CSS here. So, I will target the image first, and I would do background. Let's set fallback to transparent, and then URL IMG desktop.jpg. And we're going to set this to no-repeat, starting from top left. All right, so, now if we refresh, well, nothing happens. And that's because this div is empty. If we were to have some content inside, we would get a glimpse of that picture. But without the content, the stuff we gotta do is actually set the width and height manually. So, in my case the width is gonna be 1,024 pixels, oops. And the height will be 564 pixels. Okay now we're getting somewhere. So, this is the first desktop picture. When I resize the view port here, you'll see that the picture doesn't do anything. It's not fluid. So, to make it fluid, we gotta do background size, and this is a CSS3 property, so be careful with browser support. We're gonna set the width to 100%, and the height to auto. And now, if we refresh, you'll notice that it still doesn't do anything, and that's because we gotta set a max-width to 100%. So, now, you'll notice that it will be fluid, and it will actually stop here at its 100%, it won't go beyond that value, which is a good thing because the image will not get distorted. Now, the thing is, when I get to 768 pixels, which is about here, I want to display a different image, the tablet one. So, the way I would do that is with media queries. So, I would do something like this. Media only. Screen and max-width, set it to 768 pixels. And inside, I'm basically gonna copy this code for the image, and then change the source to tablet.png. Change the width, 768 pixels, the height, 423, and these two will stay exactly the same. So now. [BLANK_AUDIO] When I resize, when I get to the, to this break point, the image changes, which is really nice. Now, when I go this low, to 320, I want to change to my mobile size. So, what I can do is copy this, change my max-width to 320 pixels, change this to mobile. Make sure I change the width and the height, and we're all set. So, now, I get from a mobile image to a tablet image to a desktop image. And all of that is made with simple CSS. If I want here, I can also target retina screens, or screens with a different DPI count. So, I would do something like media, and then webkit min device pixel ratio, set that to two, or min resolution to lets say 192 DPI, yeah, and here, let's just say load retina images, and this will effectively target retina devices, so if you wanna load a different image, like one that's twice the size for a retina device this is the way to do it. Now, what about performance? Well, there is good news and bad news. It seems the browser pre-loader doesn't touch our images inside media queries. As we see here, only the desktop image is loaded at run time, followed by the tablet image when our media query condition is met. That's good. It means no unnecessary images are being downloaded. The problem is the smaller images are not pre-loaded. Which means there will be a small flicker between image changes, between the moment the first image is hidden and the second image is downloaded and displayed. Now, you might think, hold on, when we look at a, a website on a mobile device we don't resize the window like you do here. Well that's true, but you might rotate it. Like, if you have a phone, you'll, you might change it from portrait to landscape or vice versa, in which case, the window width will change. Plus we're not only talking about mobile phones. Even on desktops, when you're working on, when you're viewing a website on a browser, you might resize it to fit other windows in there. So this case applies everywhere. So, as you can see, there are pros and cons to this approach. It's not a perfect solution, but there are cases when it will be enough. Now, there's one more thing I'd like to talk about here, and that is art direction. As you've learned in the previous lesson, art direction is about conveying the right message through an image and picking an image that's suitable for the medium it's being displayed on. Background images give us the option of using the same image and displaying it in different ways using media queries. Check it out. So, let me walk you through the set-up here. We have an image on the top, some text, and an image on the bottom. And, actually these two are fluid images, both of them. Now, the thing is, when I get to a smaller screen size, let's say a tablet In portrait, instead of this whole image resized, maybe I just want to show a crop. And if you are using CSS backgrounds, you can definitely do that. So, lets check it out. In here, I have the simple image and then a div with a class of image that uses the same image as a background, so what I'm gonna do here is copy this media query, and I'm gonna set the condition to be max-width 768 pixels. So, when we go below this width, I wanna show things a bit differently, so what I'm gonna do here is I'm gonna say I want a crop that's, let's say 700 by 700. So, let's actually see this in the browser here properly. And what we're looking at is actually this image, right here. Now, so you can see that the size is already changed. Now for the max-width, I'm gonna set this to auto. And then, the background size, I'm gonna set it to auto auto. Okay, this means the background doesn't resize anymore. It doesn't re-scale to fit my view port. And that's exactly what I want, because what I'm gonna do now is, I'm gonna take my image and move it just to show different parts of it, and I've already done the math here, so I won't bore you. What we can do is set the background position to minus 2,500 pixels and minus 1,633 pixels. So, now, when we refresh, we only get that portion of the image that we want. On larger displays we get the full image re-sized, but on a tablet, for example, we only get the cropped version that's focused on the actual subject of the, of the photo. And now, compare this with the one on the top. You can see that as far as art direction is concerned, this is a much better approach. These numbers here are only available, of course, for this particular image and these particular sizes. And I had to go through a bit of trial and error before I got them. So, if you're planning to use this to show a crop of the images, you know, it's, it's not really a very good solution, because it's very time-consuming. And if you change the image, you're gonna have to do it all over again. But, if you need it, it's there. You can use it. So, what's the conclusion? Should you use CSS to selectively display images? Well, you could, but it's definitely harder and less semantic than a pure HTML approach. Plus, you need to consider the art direction problem. So, what exactly would be the perfect solution for responsive images? What would be an ideal approach for it? Well, let's think about it and try and figure it out.

Back to the top