This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

What is pixel density responsive images pixel ratio dp px in webdesign

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_84

Comments

Video transcript

Hi there, this video is all about responsive images. The reason it's so long is because there are a few different methods. This video is just going to be an overview, showing you the pros and cons of each of them. It's a little bit of a murky world, so if you're finding it hard up until this point, don't worry, it's not you, it's the Internet. Responsive images are a little bit tough. We're going to talk about SVGs, we're going to find all the tricks, like setting the image to 100%, we're using the CSS Cover method. We'll also look at the Source Set method, where we switch our images, depending on browser size, and to understand it all, we need to talk about something called Pixel Density, or the pixel ratio, or the dots per pixels, DPPX. There's lots of words for it. Basically it's how good a quality the device that your audience is viewing your images on. Let's talk about all that now in the video.

So first let's describe why we need responsive images, and then we'll cover the different ways of doing that. So basically we want, when everybody-- when our audience comes to our website, we want to give them the very best quality image we can, for the size of their device. So if you're on a really old cell phone, they only need this little itty-bitty version, because the screen can't display any better quality than this. So you just give it exactly what it needs, and why do you bother doing that? Because, file sizes, this thing here is, you can see, is huge. There's no point forcing this person, who's on a mobile phone that's using maybe slow internet, to download this giant file when they're only going to be able to see the kind of quality from something this size. So we need to work out a way of saying, small budget devices, crappy screens, you get this one, but super sexy, really high pixel density devices, you get this really big nice one. So it looks beautiful on the screen that you've spent amazing amounts of money on. 

So responsive just means it changes for the images. We kind of got that, that's easy enough, right? Now how do we decide? This is where it gets a bit murky. Physical size is one thing, we all know that physical size doesn't mean amazing quality, right? We've all got our phone sitting in that second drawer down in our bedroom, that has got tape on it, and it's old, and it's budget, and you turn it on and you're surprised how bad it looks. When you first bought it many moons ago it looked great, you're like, "Man, that's iPhone 3, look at the quality", but now you kind of compare it to newer models, and you're like, "Wow, that is," you can count the pixels. So it's not just about physical size, because your old phone and your new phone are physically, like in your hand are about the same sort of size. It depends on how old you go, if you got an One Touch XL, or an old Nokia, that's different, but just kind of any old smart phone versus new smart phone, they're the same size. 

So why-- what's different then? It's about pixel density. So we're going to talk about that. So it's a mixture of pixel density and physical size. It's a combination of both to decide what image gets loaded up. So physical size is easy, we don't really need to discuss that one. If you've got a really big iPad Pro it needs a bigger image, because it's just bigger, whereas the physical size of a cell phone is a lot smaller. So you can use the smaller image, kind of. Pixel density is the oddball, so let's discuss that. 

So I'm going to discuss pixel density. It's also gets referred to as the pixel ratio. Some people call it dots per pixels, or DPPX. That's the shortened version of dots per pixel, we're all talking about the same thing. We're talking about how good quality this thing is on different displays. Now I'm going to give you my good overview, well, as best as I can do it. If you want to go down this rabbit hole a little bit more, this is probably a really good article, Peter Nowell, I've left a link for it in your notes, in your Exercise Files, under Project3, there it is there. It's on Medium, and you can kind of see what it's doing, right? 

So this is a reasonably good example. So this is an inch, let's say, and it is one big colored block, but if I divide that colored block into four parts I get a bit more detailed. I can do some things, I can color this one, not this one, this one. So I'll give it a little bit more detail with this pixel density. This is twice as much as this, then I can do three times as much by cutting into 3 pixels. You can imagine, if I cut this up into like 1000 little lines and cubes, I can actually start drawing pictures. Gives me a lot more squares so I can actually get some details in there. That's a reasonably good picture. This one, I like the best though, if I scroll down, this kind of shows it, this is your old phone, this is your new phone. This is just showing the display for one, and then two. It goes up to three, some phones go four. So you can imagine, they keep cutting these little squares up, you can just get really, really, really amazing detail. 

So we talked about pixel ratio, sometimes it's called Retina. So Mac, I think owns the word Retina. Nobody else seems to use it. Google seems to use something called High DPI. We're all talking about the same thing again. Pixel Ratio, Pixel Density, and Retina is the way Mac deal with it, so Pre-Retina, they're like my Macbook Pro that I've got in front of me here has a Retina screen. So it kind of took the old-style Mac to this new beautiful one. These little squares are oversized obviously, for examples. 

Now why is it important? Here's my little example. This little image here we talked about earlier on. We can have something that's physically this size, say cell phone - I'm going to zoom in - but it actually needs a lot larger image, twice the size that I can shrink down, because if I zoom in on this image, if I zoom in close enough, you start to see, actually it's made up of little cubes, like we saw over here, little cubes, but from far enough away our human brains can't tell the difference, between, like real life and a bunch of dots. So what we need to do is, if I want an image, so this is my really crappy phone, this is my, let's say now, it's my beautiful phone, I need to give it a different image, I can't give it that, sorry. I need to give it this image that is squished down to about that size, because I need all those extra pixels, and sometimes that doesn't work. 

I'll try my explanation over here. So let's say this is my bad phone, and I need an image for it that is high DPI, or Retina, or has a Pixel Ratio of 2 instead of 1. I'm going to copy it and paste it, and line it up. So I need double the pixels. So what I do is I have to squish it down, and then I need to copy and paste it so I've got this. So you can see, the ratio-- the image is still the same size, but I've got a lot more dots that I can play around with. Does that help with Pixel Density? So although this image over here is the same size as the original, where is it? Oh, can't do, but let's say I've got two images, the small one, and the bigger one that I've squished down, this one's physically the same size, but it has a higher Pixel Density. 

So the file size is a lot huger. So when I load my bad mobile phone, I give it this image, that has a Pixel Density of 1, but my fancy phone get something that's physically the same size, but it has a Pixel Density of 2, or 3, or 4. You can imagine, we keep grabbing these, and we copy and paste it, and we make a smaller version, and we keep making it smaller until the phone gets the image it wants. It just means that I can do better detail. Do better detail? Hope you get what I mean? 

So same physical size but Pixel Density is a lot tighter, so that the file size is a lot bigger. So two things to consider, the physical size of the device just might be bigger, but also, that same device might have a pixel density of 2, or 3, or 4, and the crazy part is, you can have 1.5, 1.75. Oh man, it gets messy in terms of what image is perfect for which device, because there's so many devices, but let's move on and actually just show you how to implement them, rather than just talking about what it is. 

I guess we needed to cover this, so that we can decide which method at the moment is best. Let's talk about method number one, for exporting really good responsive images. The best one is an SVG, so that's why these little meat icons are here. Problem with SVG, it needs to be a really certain look. So you can tell these are really kind of icons, kind of Clipart style logos. Work really good for SVG, and they scale. You don't have to make different sizes, like we're going to have to do with images, though they scale for infinity. They'll get bigger and bigger, they'll go in the size of a mountain, if you want them to, and the file size will still be teeny-tiny, mainly because these are more of a mathematical equation, than they are actual a group of colored pixels. 

These are just, lots of anchor points, and XY coordinates, and they do really well as an SVG, like a JPEG or a PNG, it's just a way of exporting these guys. I've done it in an earlier video in this course, how to export them from all the different programs. So we're going to leave SVG there. The next method and the one that I use the most is the 100% width method. Just stretching it to fit the device. It's not the best method, the only reason I use this so often, is that there is no really good way of doing it at the moment. There will be, it's just a-- nobody's figured out the absolute amazing rule yet. Just when I feel like, "Ah, this will solve all the problems," it either doesn't have good browser support, or it's really hard to implement. So in all honesty I'll fall back on this method a lot. It has some perks because it's super easy to do, it has some big drawbacks. The main one is, this is my website, see this handsome man in the background here. I'm a big screen, it shows me a reasonably good quality version of it, but if I get down to a small screen, I'm going to right click, go to 'Inspect', if yours hasn't turned on at this little device preview to kind of go from, not viewing it to viewing it, where's our-- my phone, I’m going to use iPhone4. 

So see this image here, it's exactly the same as that large image that was there. This is it here, I've kind of put it in another window. So this ginormous image, unfortunately loads on a really small screen. So if this person's on a really slow internet connection, and they have to download it, they have to download the giant version, even though they can't display it on their device. So that is just the image set to 100%. So whatever container that it's in goes kind of fills it up to 100%. 

The other thing we've done in this course is very similar. 100% is very similar to the cover, remember, in the CSS we said, in this image here we said, all right, this image we want you to cover as a CSS property, so that when I adjust the size, can you see it adjusts, gets smaller and bigger. So same sort of thing, the cover does do 100%, but it does some fancy things when it-- we can move it in the middle and center it, and stuff. So that is method number two, easy, but you can tell it has some drawbacks mainly to do with just loading one image for everybody, it's not really good for Page Load Speed. So Google's not going to like your page as much as it would if it got, kind of really, as small as file sizes as it can get. 

All right, next method. The next method is similar to the one I just talked about, the 100% width. You can just force a size. This is the project we're working on, I'm just going to throw in an image. It's case sensitive so we're going to add an image. I've got some images in my folder, I've got the Pug, he's back. And what you can do is, let's have a little look at him. Where is he? The bottom here-- I'm going to turn this off actually, turn off my device preview, there's my pug; hello, pug, and he's displaying at his giant self, as big as he can. Unfortunately he's at a pixel density of 1, and it's a little hard to see on screen, probably on your video, but I can tell he's not a good quality image. 

So what you can do is you can squish him, like we did here in Illustrator. Remember, we grabbed this, we said, let's just make this smaller, and we squished him up to get a better Pixel Density, but the trade-off is the physical size gets smaller. That's something to consider, so when you are exporting your image, you're probably going to have to export bigger than you need, twice the size, if you plan on squishing it by half. So let's have a look. You can, in your HTML do something interesting, you can say, "I can add a style, and I can add a width," normally do this in CSS, but this is this kind of hack to get this going, and let's say I want to make it-- what size is it? I think it's 500 pixels across, I've already checked. 

If you're not sure how to check, on a Mac, under Project3, I've copied an image across, right-click it, 'Get info'. On a PC it's something similar. There must be some sort of 'Get properties'. You can tell him, he's 500 pixels. So what I'm going to say is, actually you're 250 now. So I'm just going to, like force him to be half the size as he was, and hopefully now, there he is. He's our dude, he is half the size but twice the quality, and my screen that I'm looking at physically in the real world, has a Pixel Density of 2. It's a high DPI or Retina screen, so this looks magical. If I squished him down again, come on, Math, 1 to 5, that will do. That is a quarter, but the quality is no better. There's no extra, like depth to the pug. So there's no need for me to go that low in this screen. So that's a nice easy fix, very similar to the last one. I've just given mine a width, and the browser has guessed the height. 

Now the next method is this one here called the Source Set. So we've done the source for images, we're going to look at this thing called Source Set, and this is, in my opinion the best way to implement images that changes sizes, depending on the width of the browser. It has good browser support, and in terms of being a Designer it's not hugely impactful, in terms of the amount of work you need to do. There are other methods that we're not going to cover in this course. I've left them out mainly because of bad browser support, or super complicated, or requires coding, that's kind of outside of the scope of this course. 

Now what we'll do, instead of this video getting epically long, I'll cover the Source Set in the next video in better detail. The crux of it is that these different images will load on a different width of the browser size. So 500, 1000, 1500, if this kind of Source Set doesn't be-- can't be used by the browser because it's an old browser, it will just use the regular old image we've got, and we're going to give it this small version because, if you've got a really old browser you've probably got a really old screen, but let's carve this out into its own video and talk about Source Set.