Technical aspects of computer visual system

Here’s a few technical aspects of computer visual system I wrote two months ago in response to a complaint regarding scroll bars in wiki articles on wide screens.

First, we have the sampled image dimension in pixel resolution. Then, we have the physical dimension of the monitor in inches. Finally, we have the all-so-important parameter no one gives a damn about called “dpi” or “dots per inch”.


Each inch of the screen consists of a number of dots. Each pixel of the digital image is physically displayed using a cluster of dots. Dpi value links the virtual dimension of an image to the physical dimension of a screen.

For example, 1024×768 pixels can be displayed using 1024×768 discrete dots and if we have the dpi to be 64, it will translate into a 16″ x 12″ (or a 20″ screen, diagonally). Increase the dpi to 128, it will become a 10″ screen.

In this manner, I can ramp up the dpi to 256 or higher and get things displayed in a 5″ monitor. However, I won’t be able to see a damn without a magnifier as the image’s details will be really small. Hence, to the user, the physical dimension (measured in inch) of the screen matters the most and is the determining factor whether I want to view the web page at 100%, 120% or 150% zoom ratio.

Zoom ratio:

Because physical devices don’t just shrink or expand, we invented the scroll bars to emulate expansions in physical dimension. Instead of having two 5″ screen side-by-side to double the area, we have one 5″ screen and a 50% scroll bar. In principle, the zoom ratio ties the emulated dimension to the actual dimension.

A screen at 200% zoom ratio will measure an image in inches the same as a 100% zoom screen of twice the physical size will. Arguably the resolution will seem lower if the screen didn’t have enough (or small enough) dots to meet dpi requirement. The effect is that we have lower resolution at a certain dpi above a certain zoom ratio.

Try this one exercise:

Adjust the browser’s zoom ratio and see the scroll bars:

1) Appears or widens when zoom out (smaller image, less scrolling)

2) Shrinks when zoom in (larger image, more scrolling).

Human perception has its limits, plus, some people are more impaired than others, they have their own preferences when it comes down to zoom ratio of the browser, which affects the interpretation resolution of the displayed image.

That’s why people who have 20″ screens will likely to view at 100% zoom (since the image resolution won’t be so small) and people who have 10″ screens will likely to zoom out to 200%  in order to emulate the effect of viewing a 1024×768 px image in 512×384 px (by design) monitor.

A common misconception I have seen over and over again is the rated p value of a monitor. When a monitor is rated at 1080p, it means we have 1920×1080 dots (or any multiple of the resolution) across your screen and it is fully capable of producing full HD images. It says nothing about the physical size of the hardware (or the actual size of the dots for the matter).

For this reason, it’s incorrect to assume a $100 monitor won’t get scroll bars and weird stuffs. It does, just as others do with $20 tiny monitor, at a certain zoom ratio. And since zoom ratio is dictated by the viewer’s eyesight, two same screens might not see the same layout the same. Saying the layout is uniformed across devices, even among those with the same dimension, is naive.


Published by


Self-learner, designer, author and programmer.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s