Lessons

Lesson Info

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

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 S. V. G. S. We're going to find all the tricks like setting the image to 100% or using the CSS cover method will 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 D. P P X. There's lots of words for it basically. It's how good our quality, the device that your audience is viewing your images on. Let's talk about all that now in the video. Alright, so first let's describe why we need responsive images and then we'll cover the d...

ifferent ways of doing that. Okay 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. Okay And so if you're on a really old cellphone 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, Okay, 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. Okay, 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 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. Okay, 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 draw down in our bedroom that is got tape on it and it's old and it's budget and you turn it on and you're surprised at how bad it looks when you first bought it many moons ago. It looked great. You're like, man this iphone three, 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 hands are about the same sort of size. It depends on how old you go if you got one touch tactile or an old nokia. Okay that's different. Okay um but just kind of any old smartphone versus new smartphone they're the same size. So why what's different then? Okay it's about pixel density. 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 it's easy. We don't really need to discuss that one. If you've got a really big ipad Pro it needs a bigger image. Okay because it's just bigger whereas the physical size of the cell phone is a lot smaller. Okay so you can use a smaller image. Kind of pixel density is the oddball. So let's discuss that. Alright so I'm going to discuss pixel density. It's also gets referred to as the pixel ratio. Some people call it the dots per pixels or D. P. P. X. So that's the shortened version of dots per pixel. We're talking about the same thing. Okay we're talking about how good quality this thing is on different displays and 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. Um This is probably a really good article. Peter. Noel. Okay I've left a link for it in your notes. Okay in your exercise files under project three. Okay. 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 Gabe and it is one big colored block. But if I divide that colored block into four parts I get a bit more detail. I can do something so I can color this one not this one this one so I get a little bit more detail with this pixel density. Okay this is twice as much as this. Then I can do three times as much by cutting into three 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 reason a 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. Okay and 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 own the word retina. Okay nobody else seems to use it. Google seems to use something called high D. P. I. We're all talking about the same thing again pixel ratio pixel density and retina is the way mack deal with it. So pre retina and 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. Okay this little image here we talked about earlier on and we can have something that's physically this size say cellphone zoom in. Okay but it actually needs a lot larger image twice the size that I can shrink down because if I zoom in on this image right 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. Okay but from far enough away our human brains can't tell the difference between 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. Okay this is my and 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. Okay 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 okay and I need an image for it. That is high D. P. I. Or retina. Okay or has a pixel ratio of two instead of one. I'm gonna copy it and paste it and line it up. So I need double the pixels. What I do is I have to squish it down. Okay 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. Okay where is it all can undo? But let's say I've got two images. The small one and the bigger one that I've squished down. Okay this one's physically the same size but it has a higher pixel density. So the file size is a lot huger. Lot huger. So when I load my bad mobile phone I give it the this image okay that has a pixel density of one. But my fancy phone get something that's physically the same size but it has a pixel density of two or three or four. 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 and it just means that I can do better detail, do better detail. I 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. Okay. But also that that same device might have a pixel density of two or three or four. And the crazy part is you can have 1.5, 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. Alright, let's talk about method number one for exporting really good. Responsible images. Okay, the best one is an SVG. Okay, so that's why these little meat icons are here. Okay, so the problem with the SVG, it needs to be a really certain look. Okay, so you can tell these are really kind of icons kind of clip art style logos work really good for SVG and they scale. Okay. You can you don't have to make different sizes. Like we're going to have to do with images though. The scale for infinity. Okay. They'll get bigger and bigger they'll go in the size of a mountain if you want them to the file size will still be teeny tiny, mainly because these are more of a mathematical equation than they are actually a group of colored pixels. Okay. These are just lots of anchor points and X, Y coordinates and they do really well as an S V G. Okay, like a Jpeg or 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 gonna 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 okay. It's just nobody's figured out the absolute amazing rule yet. Just when I feel like, oh yeah, that's all 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 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. Okay. If I'm on a big screen, it shows me a reasonably good quality version of it. But if I get down to a small screen right click and inspect, okay if yours hasn't turned on had this little device preview, they're going to go from not viewing it to viewing it as our My phone. I'm going to do an IPhone four. So see this image here. It's exactly the same as that large image that was there. Okay, this is it here I've kind of put it in another window. So there's joy enormous image Unfortunately loads on a really small screen. So if this person is 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%. So the other thing we've done in this course is very similar to 100% is very similar to the cover. Remember in the CSS we said in this image here we said, alright, this image we want you to cover as a CSS property so that when I adjust the size, Okay, can you see it adjusts, okay, gets smaller and bigger. So the same sort of thing cover does do 100 but it does some fancy things when 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 is 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. Alright, let's next method. Alright. The next method is similar to the one I just talked about 100% width. Okay. You can just force a side. So this is the project we're working on. I'm just going to throw an image. Uh Okay. Nothing it's case sensitive. So we're going to add an image. Okay, I've got some images in my folder. I've got the pug. He's back. Okay. And what you can do is let's have a little look at him. Where is he the bottom here? I'm gonna turn this off actually turn off my device preview. Here'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 one and it's a little hard to see on screen but 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 hear an illustrator. Okay, remember we grabbed this and we said let's just make this smaller. Okay. And we squished him up to get better pixel density. But the trade off is the physical size. It gets smaller. That's something to consider when you are exporting 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. Already checked. Okay. If you're not sure how to check on a Mac. Okay. Under my project three I've copied it an image of a cross, right click it. Get info on a pc. It's something similar. There must be some sort of get properties. Okay you can tell him he's 500 pixels. Okay so what I'm going to say Is actually a 2:50 now. So I'm just going to like force him to be half the size as he was and hopefully now okay 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 is has a pixel density of two. Okay it's a high D. P. I. Or retina. Screen. So this looks magical. If I squished him down again. Okay come on math. 125. Hello? Okay that is a quarter but the quality is no better. There's no extra like death to the pug. That's tiny hat. Um 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 minor width and the browser has guessed the height. Now the next method is this one here called the source set. Okay 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 and 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. Okay so 500. 2500 if this kind of source it doesn't be can't be used by the browser because it's an old browser It'll just use the regular old image we've got and we're going to give it the 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.