WEBVTT 00:00.000 --> 00:05.200 Our coding determines whether an image in a page will appear low-res or high-res. 00:06.160 --> 00:12.000 Is it going to appear blurry and pixelated or sharp and crisp with a lot of detail? 00:13.120 --> 00:18.080 To understand how this works, it's helpful to understand a little bit of the history of 00:18.640 --> 00:25.280 how websites have developed on different devices. So going way back in the early days of the web, 00:26.160 --> 00:33.040 screens prior to things like iPhones and iPads and mobile devices when we just had desktops and 00:33.040 --> 00:39.280 laptops and things. The bigger the screen, the more pixels it had. So in the beginning we had 00:39.280 --> 00:44.560 small screens and eventually they got bigger by adding more pixels and those pixels which are just 00:44.560 --> 00:49.120 square blocks. That's all a pixel is. It's just a square block of color information. 00:50.000 --> 00:56.320 More pixels in that case meant bigger displays because for the most part those physical pixel sizes 00:56.320 --> 01:02.800 were the same. So kind of like measuring like inches, more inches is bigger. If your pixel sizes are 01:02.800 --> 01:10.080 the same, more pixels equal bigger display. But that is not always the case where we sometimes have 01:10.080 --> 01:15.280 smaller pixels versus bigger pixels nowadays. So the idea is that when the iPhone went from the 01:15.280 --> 01:21.040 iPhone 3 to the iPhone 4, it was talking a long time ago here now. There was no physical difference 01:21.040 --> 01:26.160 in the size of the display. The size of the device, in fact the devices looked the same, 01:26.160 --> 01:31.760 but the screens were different because they shrunk the pixels in half. They doubled the amount of 01:31.760 --> 01:39.360 pixels width wise and height wise. So effectively every old pixel got cut in half and divided into a 01:39.360 --> 01:46.640 two by two grid. So each pixel was half the size as it was before. Now this had so many pixels per 01:46.640 --> 01:51.840 inch. So it was higher resolution. Resolution is how many pixels per inch. At some point when you 01:51.840 --> 01:57.040 have enough pixels per inch, they are so small the human eye can't see them. That's why Apple in 01:57.040 --> 02:02.080 its marketing terms called this retina display because it was at the limits of your human retina, 02:02.080 --> 02:07.280 you couldn't see anything higher resolution. At least that's what they were marketing. And it 02:07.280 --> 02:14.240 looked great. The size of the device was the same, but they packed more pixels into the same space 02:14.240 --> 02:19.920 which meant that really for one of the first times there was a dramatically different size pixel. 02:19.920 --> 02:27.920 It was half the size. So in the old iPhone, this iPhone display was 320 pixels wide. The new one 02:27.920 --> 02:33.360 was twice that, 640 pixels wide. They didn't just double the width, they also double the height, 02:33.360 --> 02:38.320 but most times we just think about the width. So when I first heard about this, I kind of freaked 02:38.320 --> 02:41.840 out a little bit. I'm like, wait, how is this going to work? We had never seen a device like this. 02:42.560 --> 02:48.560 Because I was thinking of all the web pages that I had coded, if I coded let's say a div tag or 02:48.560 --> 02:56.320 something or an image to be 320 pixels wide, that would fill out the display. And if code was being 02:56.320 --> 03:02.400 taken literally 320 pixels now would only be half the display. So I was like, how is this going to work? 03:02.400 --> 03:08.800 I made my images to be 320 pixels. I've coded them in my code to be 320 pixels. 03:08.800 --> 03:13.040 I didn't want them to be shrinking to be half the screen size because the screens were the same 03:13.040 --> 03:19.920 physical size. I still wanted it to take up the full display width. So what Apple and eventually 03:19.920 --> 03:25.440 Google with Android and all modern devices because high res displays have since come to the Mac 03:25.440 --> 03:30.560 and Windows. So all high res displays work this way, not just the iPhone 4. This is just an 03:30.560 --> 03:36.560 illustration of the first time it's shifted to it. But these new high res displays, they know 03:36.560 --> 03:42.880 they're on a high res display. And in this case, it's a 2x display because they doubled the number of 03:42.880 --> 03:50.560 pixels. And so they take whatever we write in code and they just double it. So if I write 320 pixels 03:50.560 --> 03:58.320 in my code, which on a 1x or low res display, it would be interpreted at the same size. It would 03:58.320 --> 04:06.160 not do any math to it. So 320 pixels would be 320 hardware pixels. 320 coded pixels, whether that's 04:06.160 --> 04:13.120 coded in HTML or CSS on a 2x display. We call these 2x displays because they doubled the number of 04:13.120 --> 04:20.080 pixels, of course. So they double the number of pixels in my code to match the hardware. So the 04:20.080 --> 04:26.400 software pixels or coded pixels, when I say 320, that'll be doubled. Now they do this in other things 04:26.400 --> 04:34.480 like type size, for example, for fonts. If I said 20 pixels, I now need 40 pixels on the iPhone 4 04:35.280 --> 04:40.400 or any high res display, any 2x display. Since then, of course, we've even gotten 3x displays, 04:40.400 --> 04:45.040 which have three times the number of pixels. So instead of just doubling the number of pixels, 04:45.040 --> 04:50.400 they tripled it in the same physical space. The great news is we don't have to worry about what kind 04:50.400 --> 04:57.040 of devices people are viewing these things on. We just continue to write our pixels as if they are 04:57.040 --> 05:04.320 1x pixels. And 2x devices will double them. 3x devices will triple them. So we keep writing the same 05:04.320 --> 05:11.040 code we've always written. We say 20 pixels in our CSS, and that will become either 40 or 60, 05:11.040 --> 05:15.600 depending on how high res the display is. We don't have to worry about that. The physical size is 05:15.600 --> 05:21.680 still going to be the same. Now what it does mean for us when it comes to images is in the original 05:21.680 --> 05:30.320 image, if I only make the image 320 pixels, that is going to look low res on both displays. I need to 05:30.320 --> 05:37.440 now have an image that 640 pixels, because the hardware does have 640 pixels. I need the original 05:37.440 --> 05:43.120 detail in the image to take advantage of that display. I'm kind of thinking of it this way, 05:43.120 --> 05:48.000 if you have a black and white image and you view it on a color display, it doesn't make it color. 05:48.000 --> 05:52.880 It's still black and white. If you take a low res image and just view it on a high res display, 05:52.880 --> 05:58.720 it doesn't make it better. It doesn't add clarity and quality to it. The display is capable of 05:58.720 --> 06:04.240 better, just like a color display is capable of displaying color, but it doesn't add it to a black 06:04.240 --> 06:09.840 and white image. It's the same thing with high res. So the idea is that we're going to have an 06:09.840 --> 06:16.080 image that has twice as many pixels, not because we want it to be twice as big, but because we want 06:16.080 --> 06:22.480 it to be the same size, but just packing more pixels into the same effect. So that instead of 06:22.480 --> 06:27.280 something being pixelated and blurrier, it's going to be sharper. Now I've exaggerated the effect 06:27.280 --> 06:33.040 here just for the sake of demonstration, but notice same size, just blurrier, less detailed, 06:33.040 --> 06:38.320 versus sharper. So we're not going for twice the size. We're going for twice the number of pixels 06:38.320 --> 06:47.760 packed into the same physical space. So our coding determines the size in the web page. 06:47.760 --> 06:53.440 So we need to work with a combination of what is my original image, and then am I bringing it at 06:53.440 --> 06:59.680 that size, or am I bringing it in half that size to cram those pixels tighter together to squeeze 06:59.680 --> 07:06.880 them into more pixels into the same space. So I've got a company logo here. In this case, the next 07:07.680 --> 07:14.000 Netflix logo, and these are PNG images. I couldn't find, let's say, let's pretend for a moment that 07:14.000 --> 07:18.000 I couldn't find a vector version of this. Sometimes when you're looking for company logos, 07:18.000 --> 07:22.560 and maybe you're working with a company, and you want to say this as a client, and maybe on their 07:22.560 --> 07:28.640 website, they don't have an SVG or scalable vector graphic version of this, which would always 07:28.640 --> 07:33.600 be preferable if we can find an SVG version of this, because then we don't need to worry about 07:33.600 --> 07:38.320 resolution. It's going to vector graphics use the full resolution of the display that you're on. 07:39.200 --> 07:44.160 But let's say you could only find a pixel-based version of this. Now, depending on what you find, 07:44.160 --> 07:48.480 that's going to determine whether this is going to be sharp or not so sharp. So in here, 07:48.480 --> 07:53.520 I have two different versions of the image, and I want to see how we can code these into the page 07:53.520 --> 08:01.120 properly to make them either low res or high res. In this case, this particular image is 120 pixels wide. 08:01.440 --> 08:04.160 I'm not going to worry so much about the height as I am going to worry about the width. 08:04.800 --> 08:10.160 So this one is twice that, right? This is a 2x. And because I have this same image twice, 08:10.160 --> 08:15.280 just so I know that this is the high res, I named it at 2x, just so I know that that's twice the 08:15.280 --> 08:22.560 size of this. So this one here is 120 pixels, so this would be 240, exactly twice the size. 08:23.120 --> 08:29.360 And this means twice as many pixels, so I have more clarity. I have a sharper image. There is 08:29.360 --> 08:35.920 more detail, especially in these kind of diagonals here, versus this one here, where it's kind of 08:35.920 --> 08:40.880 more chunky. And we're going to see this one we see it in the page here. All right, so I've got 08:40.880 --> 08:45.680 those two images, and I'm going to show this here in this demonstration file. I'm going to preview 08:45.680 --> 08:51.040 this in my browser. All right, so I've got some placeholders here ready for us to put this in. 08:52.080 --> 08:57.200 All right, so I'm going to put this in as a low res 1x, and then some high res images. Okay, 08:57.840 --> 09:04.640 all right, so here, let's put this image in here. And I want to put it here, the low res image 09:04.640 --> 09:10.880 displayed at its native size, meaning I want to put this image in here. This is in my images folder, 09:10.880 --> 09:15.040 and it's the company logo. I'm not going to worry about the alt for right now. Let's just focus on 09:15.040 --> 09:20.080 this. This is not a final page or anything. Just want to focus on size right now. So, 09:21.200 --> 09:25.200 at its native size, without me having to say anything, it's going to come in at the size it was 09:25.200 --> 09:32.960 created. This is the 1x version. Remember, that is 120 pixels. So, while I could say with 120, 09:32.960 --> 09:38.880 I technically don't have to, but let's be clear here just so we know this is its normal size, 120 pixels. 09:39.760 --> 09:46.320 Okay, and actually, let me put this, let me put it above. So, it's right there. Okay, so, 09:47.440 --> 09:52.800 right, there it is. So, this is a 1x image displayed at its normal native size. 09:53.600 --> 09:59.920 Now, the 2x image, let's display that again at its normal native size. So, essentially, 10:00.400 --> 10:10.080 bringing in the same image, this is just twice the pixel dimensions. Okay, and this width is 240. 10:10.080 --> 10:16.560 Now, these are the original sizes. Again, if I look at this one, this is 240. So, these are their 10:16.560 --> 10:23.200 native sizes. And bringing it in at those native sizes, because this is twice the width of this, 10:23.200 --> 10:29.200 because it has twice as many pixels, of course, it's bigger. But that's not the point of high-res 10:29.200 --> 10:37.040 images. Right now, both of these look low-res, meaning they're not super sharp. When I look at this 10:37.040 --> 10:44.400 at a normal size on my high-quality display, my 2x retina display as Apple calls them, this one 10:44.480 --> 10:50.240 looks blurry, the same as this. This is just bigger, that's all. I didn't make this high-res, 10:50.240 --> 10:55.760 because I allowed it to come in at its normal native resolution. If I want to actually make this 10:55.760 --> 11:01.760 high-res, I need to take this one, this high-res image, and I need to shrink it to half the size. 11:02.800 --> 11:09.360 Making it the same size as the original, the only difference is this one has twice as many 11:09.360 --> 11:15.680 pixels built into it. So, it's going to be the same size as this one, but it has twice as many 11:15.680 --> 11:20.880 pixels inside of it, so it's going to be sharper. It's going to be crisper. So, now, when I look at 11:20.880 --> 11:27.040 the difference between these two things here, this one is much sharper than this one. Now, if you're 11:27.040 --> 11:31.040 not looking at this on a high-res display, these might look exactly the same. So, I'm going to zoom 11:31.040 --> 11:36.960 in on this, just so we can see this better. And also, I'm going to just comment these out for a 11:36.960 --> 11:41.520 moment. I'm going to hit command slash. Now, the slash that I'm talking about is this slash. 11:42.320 --> 11:49.040 So, command slash, comments out that code. This is the start of an HTML comment. This is the end 11:49.040 --> 11:53.920 of an HTML comment. Anything inside is ignored. You can actually write comments to yourself, 11:53.920 --> 12:00.560 like if you want to hit command slash or control slash on windows. This is a note. So, you can leave 12:00.560 --> 12:05.280 little notes to yourself, and the browser will not render that. Maybe to-do items, if you're not 12:05.280 --> 12:09.520 finished with something, or just notes for you to remember in the future. So, I'm just going to 12:09.520 --> 12:14.320 comment that out for a moment, just so we can more directly compare these two. And when we look 12:14.320 --> 12:22.400 closely here at the difference, this is sharper than this. This looks more pixelated and jagged. 12:22.400 --> 12:28.240 Again, if I zoom in even closer here. So, this all looks sharper, and this looks blurrier and 12:28.240 --> 12:34.560 more pixelated. So, especially here in the out of this looks more blurry and not as well defined. 12:34.560 --> 12:41.200 This is sharper. So, viewed at the normal size, this definitely looks sharper, definitely looks 12:41.200 --> 12:46.880 crisper. It's meant to be the same size. But the trick to getting it to work is that the image 12:46.880 --> 12:54.080 that I put into it has twice the number of pixels as this. So, the idea is that when you're coding 12:54.080 --> 13:00.320 this, whatever size you want it to be in your web page, your image needs to be two times that size. 13:00.960 --> 13:10.240 So, if you want an image that's 120 pixels in code, it needs to be 240. If your image that is 120 13:10.800 --> 13:18.240 pixels in your code, if it is 120, that's a 1 to 1 relationship. That's a 1x low res image. 13:18.240 --> 13:24.960 It's only when your image is twice your dimensions. And this can be specified in HTML or CSS. 13:24.960 --> 13:30.720 But when that image is two times that, then it's high res. I wouldn't worry about going to 3x, 13:30.720 --> 13:37.120 even though there are 3x displays. To be honest, 2x displays, they look great. You don't really see 13:37.120 --> 13:43.760 the difference between 2x and 3x. Keep in mind that 3x is not only 3 times the width, but also 3 times 13:43.760 --> 13:51.680 the height. That is 9 times the total number of pixels as an original 1x. That is a massive image 13:51.680 --> 13:57.040 compared to a 1x. Already, 2x is twice the width and twice the height, so you need to be careful 13:57.040 --> 14:03.920 about file sizes for those. But really, the difference between 1x and 2x, you can see, 14:03.920 --> 14:07.920 the difference between 2x and 3x, you can't really see them. So, I don't think it's worth the 14:07.920 --> 14:14.720 file size of a 3x. So, I wouldn't worry about those. Coming back to our hipstered page here, 14:15.360 --> 14:20.400 previewing this in my browser. This is an SVG file, so I don't need to worry about that. That is 14:20.400 --> 14:26.400 already high-res. Same thing for these vector logos down here, those are high-res. But our background 14:26.400 --> 14:32.320 image, that was low-res. I had mentioned that that was 1280, and our max width here was 1280. 14:33.200 --> 14:42.400 This original image, 1280 wide. If you double that, 2560. This image is twice the number of 14:42.400 --> 14:48.560 original pixels as this. And I'm going to swap that in. So, I'm going to go to my CSS, which is 14:48.560 --> 14:53.520 where we define this background image. And I need to find that hero. And I'm going to switch from 14:53.520 --> 15:00.320 this one to this one. So, I can say, at 2x, not because that is some magic code that makes it 2x. 15:00.320 --> 15:06.880 No, I'm simply switching to this other image here. That's all I'm doing. Save that, come back to my 15:06.880 --> 15:14.960 browser. And when I hit refresh, you might not notice a huge difference between these. When you 15:15.040 --> 15:23.680 would notice a difference is if things got enlarged more. But actually, let's just see. Let's see if 15:23.680 --> 15:29.040 we notice any difference here. I'm going to open up two tabs. I'm going to refresh this here so 15:29.040 --> 15:34.320 it's the low-res version. And I'm going to open up another tab here. And this one is going to be my 15:34.320 --> 15:40.400 at 2x. And I'm going to save that. So, this is going to be my high-res. And this is going to be my 15:40.400 --> 15:47.280 low-res. And if I switch back and forth, when I look in the little fine details of the bubbles, 15:48.000 --> 15:54.080 this doesn't look quite as detailed. When I look at the fine details of the coffee beans also. 15:54.080 --> 16:00.160 And I'm going to zoom in on this to make this bigger. I'm going to zoom in. Oh, actually both of 16:00.160 --> 16:05.280 them were already zoomed in. Okay. And now, as I switch back and forth, this is sharper. 16:05.600 --> 16:12.160 This is a little more blurry. Is there a big difference in this case? No. Photographs are much 16:12.160 --> 16:18.000 more forgiving. When it comes to things like logos, things that have sharp crisp edges, the more 16:18.000 --> 16:23.040 detailed your stuff is, the more you'll notice. So, things like text, you definitely notice. So, 16:23.040 --> 16:27.680 if there was type in this, then we notice more of a difference. But because there are some areas 16:27.680 --> 16:32.560 that are kind of already blurry to begin with, there isn't a huge difference this noticeable. And 16:32.560 --> 16:39.040 that is an important thing to understand about 1x versus 2x. 1x is desync quality. It's what we 16:39.040 --> 16:47.200 used to look at all the time. And it's not that 1x is bad and 2x is amazing. 1x is good. It's fine. 16:47.200 --> 16:52.560 It's just not as good as 2x. Now, again, when it comes to type and crisp sharp details, 16:52.560 --> 16:58.240 that's where you're going to notice it more. So, things like icons or crisp sharp type and things 16:58.320 --> 17:02.080 like that, that you're going to notice a bigger difference there. But when it comes to just photos, 17:02.080 --> 17:05.840 especially photos that are kind of blurrier or have some soft areas that don't have a lot of 17:05.840 --> 17:11.120 sharp details, you're not going to notice nearly as much of a difference between 1x and 2x. 17:12.560 --> 17:18.720 So, just keep that in mind as well. Finally here, we don't need to have both of them. I just 17:18.720 --> 17:24.560 wanted to be able to show you a comparison between both. But moving forward, I just do 2x for everything. 17:24.560 --> 17:29.600 So, just to be clear here, I wouldn't need this 1x. That was just because I wanted to show you 17:29.600 --> 17:35.200 the before and the after. I could just delete that image. I can just get rid of it. And if I'm just 17:35.200 --> 17:40.880 having 2x, why even bother saying that it's 2x? You know, if all of your images are high res, 17:40.880 --> 17:46.640 we could just call them normal image names. This can link to that normal image. It just has to be 17:47.200 --> 17:53.680 that that image is twice the pixel dimensions of where you want to use it. And that will make it high 17:53.680 --> 18:00.960 res. In other words, you can take any image. And if you just scale it down by 50 percent, you make 18:00.960 --> 18:06.640 it high res. The only limit is how big are you starting with? The smaller your image, 18:07.600 --> 18:12.320 the smaller your final result will be. Like this image, at 60 pixels wide, it could be 2x. 18:13.520 --> 18:21.680 This image here, at half the size 120, could be 2x. Any image can be 2x. It's going to be half the 18:21.680 --> 18:28.560 size in your code. So it's a combination of what you put in and then how big you code that in 18:28.560 --> 18:36.320 your web page. Your your code determines the final resolution of that. So give this a try and 18:36.320 --> 18:45.440 exercise 6b.