What is pixel density responsive images pixel ratio dp px in webdesign
Daniel Walter Scott
What is pixel density responsive images pixel ratio dp px in webdesign
Daniel Walter Scott
Lesson Info
83. What is pixel density responsive images pixel ratio dp px in webdesign
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
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.
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding