Resolutions for screens and images

The exact meaning of resolution in a digital context is fuzzy. I will list the different uses of the word and resolve confusion. This article will help you find the sweet spot between sharp looking images and proper file size.

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

The word resolution is to a large extend 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 rigth 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)

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 colored light.

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 often is called screen resolution.

Let’s take an iPhone 12 Mini as 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)

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.

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, colored dots can a camera capture and store (image resolution).  

iPhone 12 vs Designers
On October 13th, Apple held an annual iPhone event and introduced four new iPhones. Most of the discussion was obviously about the new design and the features, so let’s get those out of the way: I…
What Dimensions & Resolution Should Be For iOS And Android App Design?
Does your application display accurately on any user’s device? Have you worked with optimized experience? When it comes to graphics, developers usually follow the rule of ‘one size fits most,’ which is not a correct solution. Undoubtedly, this is the simplest way, but it can crush the application vi…
mydevice.io : web devices capabilities