Sizing the screen resolution
A number of pixels the display of device has, horizontally and vertically, and the color depth measuring the number of bits representing the color of each pixel makes up the screen resolution. The higher the screen resolution, the higher the productivity we get.
In the past, the screen resolution of a display was important since it determined the amount of information displayed on the screen. The lower the resolution, the fewer items would fit on the screen; the higher the resolution, the more items would fit on the screen. The resolution varies according to the hardware in each device.
Nowadays, the screen resolution is considered a pleasant visual experience, since we would rather see more quality than more stuff on the screen. That is the reason why the screen resolution matters. There might be different display sizes where the screen resolutions are the same, that is to say, the total number of pixels is the same. If we compare a laptop (13'' screen with a resolution of 1280 x 800) and a desktop (with a 17'' monitor with the same 1280 x 800 resolution), although the monitor is larger, the number of pixels is the same; the only difference is that we will be able to see everything bigger on the monitor. Therefore, instead of seeing more stuff, we see higher quality.
Screen resolution chart
|
Code |
Width |
Height |
Ratio |
Description |
|
QVGA |
320 |
240 |
4:3 |
Quarter Video Graphics Array |
|
FHD |
1920 |
1080 |
~16:9 |
Full High Definition |
|
HVGA |
640 |
240 |
8:3 |
Half Video Graphics Array |
|
HD |
1360 |
768 |
~16:9 |
High Definition |
|
HD |
1366 |
768 |
~16:9 |
High Definition |
|
HD+ |
1600 |
900 |
~16:9 |
High Definition plus |
|
VGA |
640 |
480 |
4:3 |
Video Graphics Array |
|
SVGA |
800 |
600 |
4:3 |
Super Video Graphics Array |
|
XGA |
1024 |
768 |
4:3 |
Extended Graphics Array |
|
XGA+ |
1152 |
768 |
3:2 |
Extended Graphics Array plus |
|
XGA+ |
1152 |
864 |
4:3 |
Extended Graphics Array plus |
|
SXGA |
1280 |
1024 |
5:4 |
Super Extended Graphics Array |
|
SXGA+ |
1400 |
1050 |
4:3 |
Super Extended Graphics Array plus |
|
UXGA |
1600 |
1200 |
4:3 |
Ultra Extended Graphics Array |
|
QXGA |
2048 |
1536 |
4:3 |
Quad Extended Graphics Array |
|
WXGA |
1280 |
768 |
5:3 |
Wide Extended Graphics Array |
|
WXGA |
1280 |
720 |
~16:9 |
Wide Extended Graphics Array |
|
WXGA |
1280 |
800 |
16:10 |
Wide Extended Graphics Array |
|
WXGA |
1366 |
768 |
~16:9 |
Wide Extended Graphics Array |
|
WXGA+ |
1280 |
854 |
3:2 |
Wide Extended Graphics Array plus |
|
WXGA+ |
1440 |
900 |
16:10 |
Wide Extended Graphics Array plus |
|
WXGA+ |
1440 |
960 |
3:2 |
Wide Extended Graphics Array plus |
|
WQHD |
2560 |
1440 |
~16:9 |
Wide Quad High Definition |
|
WQXGA |
2560 |
1600 |
16:10 |
Wide Quad Extended Graphics Array |
|
WSVGA |
1024 |
600 |
~17:10 |
Wide Super Video Graphics Array |
|
WSXGA |
1600 |
900 |
~16:9 |
Wide Super Extended Graphics Array |
|
WSXGA |
1600 |
1024 |
16:10 |
Wide Super Extended Graphics Array |
|
WSXGA+ |
1680 |
1050 |
16:10 |
Wide Super Extended Graphics Array plus |
|
WUXGA |
1920 |
1200 |
16:10 |
Wide Ultra Extended Graphics Array |
|
WQXGA |
2560 |
1600 |
16:10 |
Wide Quad Extended Graphics Array |
|
WQUXGA |
3840 |
2400 |
16:10 |
Wide Quad Ultra Extended Graphics Array |
|
4K UHD |
3840 |
2160 |
16:9 |
Ultra High Definition |
|
4K UHD |
1536 |
864 |
16:9 |
Ultra High Definition |
Considering that 3840 x 2160 displays (also known as 4K, QFHD, Ultra HD, UHD, or 2160p) are already available for laptops and monitors, a pleasant visual experience with high DPI displays can be a good long-term investment for your desktop applications.
The DPI setting for the monitor causes another common problem: the change in the effective resolution. Consider the 13.3" display that offers a 3200 x1800 resolution and is configured with an OS DPI of 240 DPI. The high DPI setting makes the system use both larger fonts and UI elements; therefore, the elements consume more pixels to render than the same elements displayed in the resolution configured with an OS DPI of 96 DPI. The effective resolution of a display that provides 3200 x1800 pixels configured at 240 DPI is 1280 x 720. The effective resolution can become a big problem because an application that requires a minimum resolution of the old standard 1024 x 768 pixels with an OS DPI of 96 would have problems with a 3200 x 1800-pixel display configured at 240 DPI, and it wouldn't be possible to display all the necessary UI elements. It may sound crazy, but the effective vertical resolution is 720 pixels, lower than the 768 vertical pixels required by the application to display all the UI elements without problems.
The formula to calculate the effective resolution is simple: divide the physical pixels by the scale factor (OS DPI / 96). For example, the following formula calculates the horizontal effective resolution of my previous example: 3200 / (240 / 96) = 3200 / 2.5 = 1280; and the following formula calculates the vertical effective resolution: 1800 / (240 / 96) = 1800 / 2.5 = 720.
The effective resolution would be of 1800 x 900 pixels if the same physical resolution were configured at 192 DPI. Effective horizontal resolution: 3200 / (192 / 96) = 3200 / 2 = 1600; and vertical effective resolution: 1800 / (192 / 96) = 1800 / 2 = 900.
Calculating the aspect ratio
The aspect radio is the proportional relationship between the width and the height of an image. It is used to describe the shape of a computer screen or a TV. The aspect ratio of a standard-definition (SD) screen is 4:3, that is to say, a relatively square rectangle. The aspect ratio is often expressed in W:H format, where W stands for width and H stands for height. 4:3 means four units wide to three units high. With regards to high-definition TV (HDTV), they have a 16:9 ratio, which is a wider rectangle.
Why do we calculate the aspect ratio? The answer to this question is that the ratio has to be well defined because the rectangular shape that every frame, digital video, canvas, image, or responsive design has, makes shapes fit into different and distinct devices.
