Skip to main content

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

Lesson 83 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

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

Lesson 83 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

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

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Form Check Marks

03:04
74

Multi Line Form Text Box

02:18
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

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

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

11:18
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final 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

Bonus Materials with Purchase

Exercise Files
Completed Files

RELATED ARTICLES

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

Recent

Articles

RELATED ARTICLES

Recent

Articles