Understanding Image Resolution for Web Display

R-coding determines whether an image in a page will appear low-res or high-res. Is it going to appear blurry and pixelated or sharp and crisp with a lot of detail? To understand how this works, it's helpful to understand a little bit of the history of how websites have developed on different devices. So going way back in the early days of the web, screens prior to things like iPhones and iPads and mobile devices, when we just had desktops and laptops and things, the bigger the screen, the more pixels it had.

So in the beginning, we had small screens and eventually they got bigger by adding more pixels. And those pixels, which are just square blocks, that's all a pixel is. It's just a square block of color information.

Um, more pixels in that case meant bigger displays because for the most part, those physical pixel sizes were the same. So kind of like measuring like inches, more inches is bigger. If your pixel sizes are the same, more pixels equal bigger display.

But that is not always the case where we sometimes have smaller pixels versus bigger pixels nowadays. So the idea is that when the iPhone 4, talking a long time ago here now, there was no physical difference in the size of the display, the size of the device. In fact, the devices look the same, but the screens were different because they shrunk the pixels in half.

They doubled the amount of pixels width-wise and height-wise. So effectively every old pixel got cut in half and divided into a two by two grid. So each pixel was half the size as it was before.

Now this had so many pixels per inch, so it was higher resolution. Resolution is how many pixels per inch. At some point, when you have enough pixels per inch, they are so small the human eye can't see them.

That's why Apple in its marketing terms called this a retina display, because it was at the limits of your human retina. You couldn't see anything higher resolution. At least that's what they were marketing.

And it looked great. The size of the device was the same, but they packed more pixels into the same space, which meant that really for one of the first times there was a dramatically different size pixel. It was half the size.

So in the old iPhone, this iPhone display was 320 pixels wide. The new one was twice that, 640 pixels wide. They didn't just double the width, they also doubled the height.

But most times we just think about the width. When I first heard about this, I kind of freaked out a little bit. I'm like, wait, how is this going to work? We'd never seen a device like this.

And because I was thinking of all the web pages that I had coded, if I coded, let's say a div tag or something, or an image to be 320 pixels wide, that would fill out the display. And if code was being taken literally, 320 pixels now would only be half the display. So I was like, how is this going to work? I made my images to be 320 pixels.

I've coded them in my code to be 320 pixels. I didn't want them to be shrinking to be half the screen size because the screens were the same physical size. I still wanted it to take up the full display width.

So what Apple and eventually Google with Android and all modern devices, because high-res displays have since come to the Mac and Windows. So all high-res displays work this way, not just the iPhone 4. This is just an illustration of the first time it shifted to it. But these new high-res displays, they know they're on a high-res display.

And in this case, it's a 2x display because they doubled the number of pixels. And so they take whatever we write in code and they just double it. If I write 320 pixels in my code, which on a 1x or low-res display, it would be interpreted at the same size.

It would not do any math to it. So 320 pixels would be 320 hardware pixels. 320 coded pixels, whether that's coded in HTML or CSS on a 2x display.

We call these 2x displays because they doubled the number of pixels, of course. So they double the number of pixels in my code to match the hardware. So the software pixels or coded pixels, when I say 320, that'll be doubled.

Now they do this in other things like type size, for example. For fonts, if I said 20 pixels, I now need 40 pixels on the iPhone 4 or any high-res display, any 2x display. Since then, of course, we've even gotten 3x displays, which have three times the number of pixels.

So instead of just doubling the number of pixels, they tripled it in the same physical space. The great news is we don't have to worry about what kind of devices people are viewing these things on. We just continue to write our pixels as if they are 1x pixels, and 2x devices will double them.

3x devices will triple them. We keep writing the same code we've always written. We say 20 pixels in our CSS, and that will become either 40 or 60, depending on how high-res the display is.

We don't have to worry about that. The physical size is still going to be the same. Now what it does mean for us when it comes to images is in the original image, if I only make the image 320 pixels, that is going to look low-res on both displays.

I need to now have an original detail in the image to take advantage of that display. Kind of think of it this way. If you have a black and white image and you view it on a color display, it doesn't make it color.

It's still black and white. If you take a low-res image and just view it on a high-res display, it doesn't make it better. It doesn't add clarity and quality to it.

The display is capable of better. Just like a color display is capable of displaying color, but it doesn't add it to a black and white image. It's the same thing with high-res.

So the idea is that we're going to have an image that has twice as many pixels. Not because we want it to be twice as big, but because we want it to be the same size, but just packing more pixels into the same effect. So that instead of something being pixelated and blurrier, it's going to be sharper.

Now I've exaggerated the effect here just for the sake of demonstration, but notice same size, just blurrier, less detailed versus sharper. We're not going for twice the size. We're going for twice the number of pixels packed into the same physical space.

So our coding determines the size in the web page. We need to work with a combination of what is my original image and then am I bringing it in at that size or am I bringing it in half that size to cram those pixels tighter together to squeeze them into more pixels into the same space. So I've got a company logo here, in this case the Netflix logo, and these are PNG images.

I couldn't find, let's say, let's pretend for a moment that I couldn't find a vector version of this. Sometimes when you're looking for company logos and maybe you know you're working with a company and you want to say this is a client and maybe on their website they don't have an SVG or scalable vector graphic version of this, which would always be preferable if we can find an SVG version of this because then we don't need to worry about resolution. It's going to, vector graphics use the full resolution of the display that you're on.

But let's say you could only find a pixel-based version of this. Now depending on what you find that's going to determine whether this is going to be sharp or not so sharp. So in here I have two different versions of the image and I want to see how we can code these into the page properly to make them either low res or high res.

In this case, this particular image is 120 pixels wide. I'm not going to worry so much about the height as I am going to worry about the width. So this one is twice that, right? This is a 2x.

And because I have this same image twice, just so I know that this is the high res, I named it at 2x. Just so I know that that's twice the size of this. So this here is 120 pixels.

So this would be 240, exactly twice the size. And this means twice as many pixels. So I have more clarity.

I have a sharper image. There is more detail, especially in these kind of diagonals here versus this one here where it's kind of more chunky. And we're going to see this when we see it in the page here.

All right. So I've got those two images and I'm going to show this here in this demonstration file. I'm going to preview this in my browser.

All right. So I've got some placeholders here ready for us to put this in. All right.

So I'm going to put this in as a low res 1x and then some high res images. Okay. All right.

So here, let's put this image in here. And I want to put it here, the low res image displayed at its native size, meaning I want to put this image in here. This is in my images folder and it's the company logo.

I'm not going to worry about the ALT for right now. Let's just focus on this. This is not a final page or anything.

I just want to focus on size right now. So at its native size, without me having to say anything, it's going to come in at the size it was created. This is the 1x version.

Remember, that is 120 pixels. So while I could say with 120, I technically don't have to, but let's be clear here just so we know. This is its normal size, 120 pixels.

Okay. And actually, let me put this, let me put it above. So it's right there.

Okay. So right there it is. So this is a 1x image displayed at its normal native size.

Now the 2x image, let's display that again at its normal native size. So essentially bringing in the same image, this is just twice the pixel dimensions. Okay.

And this width is 240. Now these are the original sizes. Again, if I look at this one, this is 240.

So these are their native sizes and bringing it in at those native sizes, because this is twice the width of this, because it has twice as many pixels, of course it's bigger, but that's not the point of high res images. Right now, both of these look low res, meaning they're not super sharp. When I look at this at a normal size on my high quality display, my 2x retina display as Apple calls them, this one looks blurry, the same as this.

This is just bigger. That's all. I didn't make this high res because I allowed it to come in at its normal native resolution.

If I want to actually make this high res, I need to take this one, this high res image, and I need to shrink it to half the size, making it the same size as the original. The only difference is this one has twice as many pixels built into it. So it's going to be the same size as this one, but it has twice as many pixels inside of it.

So it's going to be sharper. It's going to be crisper. Now when I look at the difference between these two things here, this one is much sharper than this one.

Now, if you're not looking at this on a high res display, these might look exactly the same. So I'm going to zoom in on this just so we can see this better. And also, I'm going to just comment these out for a moment.

I'm going to hit command slash. Now, the slash that I'm talking about is this slash. So command slash comments out that code.

This is the start of an HTML comment. This is the end of an HTML comment. Anything inside is ignored.

You can actually write comments to yourself, like if you want to hit command slash or control slash on Windows. This is a note. So you can leave little notes to yourself, and the browser will not render that.

Maybe to-do items if you're not finished with something, or just notes for you to remember in the future. So I'm just going to comment that out for a moment just so we can more directly compare these two. And when we look closely here at the difference, this is sharper than this.

This looks more pixelated and jagged. Again, if I zoom in even closer here. So this all looks sharper, and this looks blurrier and more pixelated.

So especially here in the L, this looks more blurry and not as well defined. This is sharper. So viewed at the normal size, this definitely looks sharper, definitely looks crisper.

It's getting it to work is that the image that I put into it has twice the number of pixels as this. So the idea is that when you're coding this, whatever size you want it to be in your web page, your image needs to be two times that size. If you want an image that's 120 pixels in code, it needs to be 240.

If your image is 120 pixels in your code, if it is 120, that's a one-to-one relationship. That's a 1x low-res image. It's only when your image is twice your dimensions.

And this can be specified in HTML or CSS. But when that image is two times that, then it's high-res. I wouldn't worry about going to 3x, even though there are 3x displays.

To be honest, 2x displays, they look great. You don't really see the difference between 2x and 3x. Keep in mind that 3x is not only three times the width, but also three times the height.

That is nine times the total number of pixels as an original 1x. That is a massive image compared to a 1x. Already 2x is twice the width and twice the height.

So you need to be careful about file sizes for those. But the difference between 1x and 2x, you can see. The difference between 2x and 3x, you can't really see them.

So I don't think it's worth the file size of a 3x. So I wouldn't worry about those. Coming back to our Hipster page here, previewing this in my browser.

This is an SVG file, so I don't need to worry about that. That is already high-res. Same thing for these vector logos down here.

Those are high-res. But our background image, that was low-res. I had mentioned that that was 1280.

And our max width here was 1280. This original image, 1280 wide. If you double that, 2560.

This image is twice the number of original pixels as this. And I'm going to swap that in. So I'm going to go to my CSS, which is where we defined this background image.

And I need to find that hero. And I'm going to switch from this one to this one. So I can say at 2x.

Not because that is some magic code that makes it 2x. No, I'm simply switching to this other image here. That's all I'm doing.

Save that. Come back to my browser. And when I hit refresh, you might not notice a huge difference between these.

When you would notice a difference is if things got enlarged more. But actually, let's just see. Let's see if we notice any difference here.

I'm going to open up two tabs. I'm going to refresh this here so it's the low-res version. And I'm going to open up another tab here.

And this one is going to be my 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 low-res. And if I switch back and forth, when I look in the little fine details of the bubbles, this doesn't look quite as detailed. When I look at the fine details of the coffee beans also.

And what I'm going to do is I'm going to zoom in on this to make this bigger. I'm going to zoom in. Oh, actually, both of them were already zoomed in.

Okay. And now, as I switch back and forth, this is sharper. This is a little more blurry.

Is there a big difference in this case? No. Photographs are much more forgiving. When it comes to things like logos, things that have sharp, crisp edges, the more detailed your stuff is, the more you'll notice.

So things like text, you definitely notice. If there was type in this, then we notice more of a difference. But because there are some areas that are kind of already blurry to begin with, there isn't a huge difference that's noticeable.

And that is an important thing to understand about 1x versus 2x. 1x is decent quality. It's what we 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.

It's just not as good as 2x. Now, again, when it comes to type and crisp, sharp details, that's where you're going to notice it more. So things like icons or crisp, sharp type and things like that, that you're going to notice a bigger difference there.

But when it comes to just photos, especially photos that are kind of blurrier or have some soft areas that don't have a lot of sharp details, you're not going to notice nearly as much of a difference between 1x and 2x. So just keep that in mind as well. Finally, here, we don't need to have both of them.

I just wanted to be able to show you a comparison between both. But moving forward, I just do 2x for everything. So just to be clear here, I wouldn't need this 1x.

That was just because I wanted to show you the before and the after. I could just delete that image. I can just get rid of it.

And if I'm just having 2x, why even bother saying that it's 2x? If all of your images are high res, we could just call them normal image names. This can link to that normal image. It just has to be that that image is twice the pixel dimensions of where you want to use it, and that will make it high res.

In other words, you can take any image, and if you just scale it down by 50%, you make it high res. The only limit is how big are you starting with. The smaller your image, the smaller your final result will be.

Like this image, at 60 pixels wide, it could be 2x. This image here, at half the size, 120, could be 2x. Any image can be 2x.

It's just going to be half the size in your code. So it's a combination of what you put in, and then how big you code that in your web page. Your code determines the final resolution of that.

So give this a try in exercise 6b.