Screen Resolutions

Originally Posted 10/28/24

So you've probably shopped for a new computer monitor or television before. Other than the size of the monitor or TV, the other thing often listed will be something like "1080p" or "4K" or "HD", but what exactly do they mean?

The Standard Resolutions

There are a few common screen resolutions:

But what does that all mean?

Let me break it down a bit further. The numbers are literally the amount of pixels horizontally and then vertically on a screen. So for 1080p, there are 1,920 pixels going along the screen horizontally, and 1,080 pixels going down the screen vertically, forming a grid. The "p" in 480p, 720p, 1080p, and 1440p stands for "progressive scan". This is as opposed to the ending being an "i" (so, 1080i for example) which would be an "interlaced scan".

Trying to figure out how to best explain how Interlaced video works compared to Progressive is a bit of a struggle for me, because I feel like I'm barely understanding how they both work. The best way to understand it I found was looking at this gif from the Wikipedia article on Interlaced Video.

The above gif is how Interlaced Video works - it goes through and displays every other row of pixels. So say it starts with all the odd rows, then it'll go back and show all the even rows, and just go back and forth. This happens fast enough where normally the human eye doesn't catch it, but during things with a lot of motion (fight scenes for example), this causes issues as the image doesn't look correct - things are a bit out of sync.

Progressive Scan, by comparison, shows the entire frame at once. A frame here is referring to one frame of video. Movies are often shot in 24 frames per second (fps). Each frame is an individual picture. When shown back fast enough (in this case, showing 24 in a single second), you get a video.

My understanding is Progressive Scanning is technologically harder, as well as Interlaced Scanning worked better on old CRT screens, and so that is why Interlaced Scanning is around at all.

Okay... but why does this matter?

Screen Size and Resolution matter because they impact how clear an image looks. I'll try to illustrate below, however it may not look great depending on the resolution of the screen you're using to view this on. We're going to take a look at the same image, at different resolutions, and hopefully you'll be able to see a difference. We're going to start with the original image, which has a resolution of 6034x4012 (above 4k). The subsequent images I resized so that they would be centered and fit horizontally within the new resolution (other than for the 480p version, which I fit vertically so that it would take up the full space).

Baseline image. 6034x4012

4k. 3840x2160

1440p. 2560x1440

2k. 2048x1080

1080p. 1920x1080

720p. 1280x720

480p. 640x480

Baseline image. 6034x4012

4k. 3840x2160

1440p. 2560x1440

2k. 2048x1080

1080p. 1920x1080

720p. 1280x720

480p. 640x480

Now, looking at all the photos next to each other, it's sort of hard to really tell a difference when they're this size. If you were to take a closer look at the photos, you'd see that the 480p one has definitely lost some image quality when you go to zoom in, but outside of that it looks fine. That's because there's one other important thing when it comes to screen resolution: Screen size and viewing distance.

Generally speaking, the bigger a screen the further away you can be from it and be able to see things fine. On a big screen with a lower resolution, if you sat right in front of it, you may be able to see individual pixels. This is generally not very pleasant, as the image may look a bit blocky. To see less pixels, you would want to sit a bit further away so they become less noticable. Another way that would let you notice the pixels less, would be to increase the screens resolution, so there were more pixels packed into the same area, meaning the pixels would be a bit smaller and harder to notice. This also means you can get sharper images as there are more pixels to represent the image better. This website outlines some screen sizes, their resolutions, their pixel density, and optimal viewing distance.

To sort of illustrate the point, let me show you the baseline image as well as the 480p image as a bigger size. On desktop, the images are set to both display with a height of 1080 pixels.

Baseline image. 6034x4012

480p. 640x480

Baseline image. 6034x4012

480p. 640x480

As you can see, once we make them a bigger size, the 480p image looks less in focus, more blurry. This is because there are simply less pixels to show the same information. From a distance, it would be hard to tell the differnece between the two images. But up close on a computer or phone, it's easier to see the 480p version is not as sharp.

One last thing

One thing I wanted to point out quickly, is if you're ever shooting video or taking photos, it is better to shoot with a higher resolution and then downsize it than the other way around. I mentioned earlier in this article some creators will shoot video in 8k and then downsize. This is because when you're going down in resolution, you can lose some pixels and the image will still look fine. However, if you had something like 480p footage and wanted to display it on an 8k device, it'll look really bad and pixel-y because the computer quite literally does not know what the extra pixels are supposed to look like. There is some technology out there that tries to fix this issue, however it's best to downsize than upsize.

Wrap Up

There was kind of a lot thrown at you at once there. The summary is simply: the higher the number for screen resolution, the sharper the image. For bigger screens, you want higher resolutions so things are easier to see. On smaller screens, resolution does not matter as much (when at the same viewing distance compared to a bigger screen). If you're looking for monitors or TVs, you want at least 1080p or higher now a days.

If you have any questions, suggestions, or corrections, please feel free to email me at steventanzimedia@gmail.com