Resolute Resolutions - Understand On-Screen Resolutions

by Jason Brink

For someone who is not a graphic designer or web developer, resolution can be something that is very hard to understand. As a developer specializing in Content Management Systems that allow website owners to add things to their own websites, this is a problem I come across often when teaching my clients to modify their web pages.

Let us discuss for a moment the basics that make up a digital image. The majority of digital images available on the Internet are “raster” images. This means that each pixel in this image is recorded individually. This is different from “vector” images, which are calculated in curves and lines. For the purpose of this tutorial we will be dealing only with the “raster” images.

For many years, it has been known that if you place a series of colored dots next to one another, the eye will perceive them as a solid. This has been used in the printing industry for hundreds of years, in fact every single piece of printed material you come across in modern society is printed this way. A pixel is a single dot in this image.

You will have heard the term “DPI.” This stands for “Dots Per Inch”. The human eye is capable of perceiving somewhere around 200 DPI naturally. At levels less than that, we are increasingly able to see the pixels in the image.

Screen resolutions vary from monitor to monitor, but the “standard” measurement is mistakenly thought to be 72dpi for all on-screen displays. This is a throwback to the days of yore on some of the earlier computers. The earliest Macintosh screen contained exactly 72 viewable pixels per inch (because it is what their dot matrix printer was capable of printing), and while modern equipment is capable of displaying much greater resolutions, 72dpi is still mistakenly considered to be the “standard.” That being said, the DPI an image is saved at will have nothing to do with the way it is finally viewed on screen. If you have an image that is 72x72 pixels, it will display as exactly 1x1” on a 72dpi monitor, but .5x.5” on a 144dpi monitor. This particular file could be saved at any number of DPI settings, but these settings are usually for the benefit of the program saving them. Adobe Photoshop is responsible in a great part for the misunderstanding surrounding this. What controls the display size on your screen is not the DPI setting of the image, but the numbers of pixels making up the physical size of the image. For instance, our 72x72 pixel square could be saved at 72dpi, or 300dpi, and it would still be 72 pixels across.

Ok, now that we have covered the basics of what pixels and DPI are, lets move onto the actual images themselves. Many people misunderstand how to use images when building their web pages. This generally manifests itself in one of two ways...

1. Image too large for the page in both physical size and layout size
2. Image too large for the page in physical size, but constrained to the correct size in the layout.

Let is stop for a moment and define a couple terms to help you better understand how these processes work. These are not industry standard terms, but simplified to help the novice user understand what is at work.

1. Physical Size – This is the actual size of the image on your hard disk. Depending on the type of image being used, the ratio of the size of the file (i.e. 19kb) to the dimensions of the file (154 x 200 pixels) changes.
2. Layout Size – This is the size the image will take when displayed on a web page.

There are of course other ways and combinations that images can be displayed in, but these are far and away the most common, so we will work with them. Let us work with a couple images from my collection to demonstrate these problems.

istvan.jpg
450x687 pixels
80.6kb

We will go ahead and use this image of my great grandfather in a sample page layout.

We can plainly see with this first example that the image is too large, and is pushing the rest of the page elements around and throwing off the layout of the page. Our first impulse to correct this problem is to go ahead and add a couple extra tags to the image code. We began with <img src=”../images/istvan.jpg”>, and we will modify it to show things in a more complementary light. <img src=”../images/istvan.jpg” height=”200”>. I chose 200 pixels, because I thought about 3 inches of screen height would be a good amount.

This is what we get… Ah, all better?

But wait? Why do things seem to be taking forever to load. Ahh, I see the problem! This image is still too big, even though it displays on the page correctly. We remember that the image is actually (pixel numbers), but we have just constrained it to a much smaller space. Though we have done this, it is still necessary for the computer to load the ENTIRE image, even if it is compressing it on screen. The best thing we can do is to size things back down to a more manageable size. If you are displaying something on a screen, simply make the physical size of the image match the desired layout size. This will help keep everything in the correct layout pattern, and make everything look just the way you want it. It will also help greatly with bandwidth usage and page load times.

I hope this has been helpful to you in understanding the way screen resolutions work! If you have any questions or comments, please contact me at This e-mail address is being protected from spam bots, you need JavaScript enabled to view it If you need any graphic design, web development, or photo restoration, think Jason’s Professional Graphics – Where Quality Counts!