Resolutions for screens and images

Clarify digital resolution's meanings, resolve confusion, and strike a balance between image quality and file size in this informative article.

Resolutions for screens and images
Pixel art on a matrix of bricks.

The word resolution is to a large extent a technical term used by digital producers. To the consumer it mostly translates as sharpness, clearness of a display (and has impact on file size and bandwidth). We all turn into producers, and this article can help you navigate the topic of resolution. The information will give you good understanding of the different kinds of resolution and help you produce sharp looking images and video’s for your audience.

So let's jump right in! The word resolution is being used to describe these three different concepts:

  1. Screen resolution: physical pixels in a screen
  2. Point resolution: points used to show something on a screen
  3. Image resolution: pixels used to represent a digital image or video frame

Here is an image to illustrate the different values these concepts will give:

Overview of different resolutions (GBKSoft)
Overview of different resolutions (GBKSoft)

Let's go into a bit more depth for all three different uses of the word resolution, and the differences will get much clearer.

Screen resolution

The resolution of a screen is pretty factual, and this is a physical property. It typically says something like: the screen resolution is 1080 by 780 pixels. So you could take a magnifying glass and examine the screen. You would actually see these pixels as a tiny hole radiating coloured light.

@Ariel Waldman, Left: iPhone 6S, Right: iPhone X
@Ariel Waldman, Left: iPhone 6S, Right: iPhone X

Some typical screen resolutions with an aspect ratio of 16:9 are QHD (2560 x 1440) and 4K UHD (3840 x 2160).

Point resolution

The resolution of display refers to how many points are used to show something on the physical screen. This also is often called screen resolution.

Let’s take an iPhone 12 Mini as an example. The screen has 1.080 physical pixels horizontally and 2.340 pixels vertically. The resolution for display of this device is 375 points by 812 points.

Different point resolutions for iPhones (UX Collective)
Different point resolutions for iPhones (UX Collective)

For a long time these two kind of resolution matched 1 on 1. One pixel in the image matched the physical pixel in the display. Now that the screens have become so good (the eye can’t see individual pixels any more at the right viewing distance) there are more physical pixels than virtual pixels.

This site gives you information of the screen you are currently using: https://www.mydevice.io

Image resolution

Take a deep breath, there is one more meaning of resolution that is thrown around. The resolution of a digital image and video.

Here, the term is used to explain how many pixels were used to represent the image or video frame. In traditional television this is a pretty well-defined set of standards, on digital devices it can take many measures or shapes.

Let’s say you shoot a picture with a 12 mbps camera, the resulting photo will have a resolution that might have a height of 3024 pixels and a width of 4032 pixels. If you shoot a video with the same device, it probably will give you an option to pick a resolution. For instance: 720p, 1080p or 4K.

So here the word resolution also get its notion of sharpness of the image. When it can be captured and displayed in high resolution (so with many pixels) our eyes will see a more clear picture. Because it involves more data to represent, the image file size and/or bandwidth for streaming will increase.

Example of image resolution and zooming in. Left image has resolution of 4000 x 3000 pixels
Example of image resolution and zooming in. Left image has resolution of 4000 x 3000 pixels.

Summary

In this article, I tried to resolve some of the confusion around the meaning of the word resolution in the context of screens and digital images. The term is sometimes used for different things that have overlapping meaning.

How many lights points does a physical screen have (screen resolution), how many points will be the default display for interacting with it (point resolution) and how many discrete, coloured dots can a camera capture and store (image resolution).