WHAT SIZE IS MY IMAGE?

Have you ever saved an image, thinking that it would be just the right size for your document, only to print it and it is the size of a postage stamp?

Even better, have you ever saved an image for an e-mail or your web page and it turns out HUGE?

If you have you are not only not alone, but you are in very good company. Sizing of digital images is one of the “computer” things that persistently perplex even the most technologically savvy. In fact it is one of the more simple concepts to understand (and use to your advantage) once a few basic concepts are clear in your head.

PIXEL (synonymous with Dots)

Most images (particularly, photo’s and web pages) are made up of pixels of different colors. The arrangement of these dots make up what you see as the image. Most likely the period at the end of this sentence is made up of a single pixel. In fact, most of the images that you see are made up of small dots that blend together at a distance to form the picture.

Even photographs taken with your camera make pictures using this principle. They just take it to, or near the molecular level.

Many of the early impressionists would use this same concept to create pictures that made no sense close up, but from a distance were amazingly detailed and flowing images. Georges Seurat’s Sunday Afternoon on La Grande Jatte is a great example. To really get the feeling for this watch Ferris Buhler’s Day Off. I know it sounds dumb, but aside from being a classic movie, it has a scene with this particular painting in which they step in gradually, right down to where you can see the actual canvas. Out of context, it really illustrates this point well.

To show you what I am talking about here, I have placed two copies of the same image below. On the left is the image as it is intended to be seen. On the right, it is blown up (through browser code only) to show the detail. I must reiterate, these are both calling up the SAME image file.

Note how, blown up, you can see each block of color separately. It actually becomes difficult to even see what the image is. When the image is reduced to proper size, the blocks all come together to create the windmill.

Again, each block that makes up these images is called a pixel. By counting the pixels wide and the pixels high, we come up with a measurement that tells us the amount of information in the picture. In this case the image is 36 pixels wide by 50 pixels high. Thus it would be called a 36 x 50 image.

If you measured an inch on your photo at the size you want it, this measurement is how many pixels you would count in that inch. Again, this is really a measure of the quality of the picture. This measurement is expressed ###dpi, or if the image was to be represented at 300 dots per inch, you would then say it is at 300dpi.

So why is this important to know?

The number of pixels wide and high, and the DPI are both necessary to get the size and quality of the image correct.

In my image program all I have to do is tell it what size in inches/centimeters and it saves it to that size. Why do I care about all this other confusing stuff?

I get that one a lot. Editing programs often, to make things more simple, set a default or average setting that they think will work for most things. For instance, my wife’s image editing program that came with her camera sets all the pictures at 150dpi. This works OK for some things, but is really not acceptable for most things. Let me show you, using the windmill image again:

This image is 36×50 pixels. I knew that was the size I wanted because most computer monitors show pictures at 72dpi. I wanted a half inch wide image, so I took half of 72 and it came up 36. Restated, this image is a half inch wide at 72dpi.

Notice I stated the size two ways, “36×50 pixels” and “a half inch wide at 72dpi”. The WxH measurement is generally preferred in most applications.

When professionals are discussing the size of a button on a page they are working on, they are thinking, “I would like this to end up about an inch wide by half an inch high.” Again, they know most monitors show images at 72dpi. Rather than confusing the issue with all of the other information, they will ask for a “72 by 36” button. When they are making the button, it does not matter if they choose 1dpi, 72dpi, or 1,000,000dpi, he will end up with the button being the size he wants.

Most of the advertising banners and the like that you see on web pages are standardized sizes set, not by inches, but by pixels wide by pixels high. This makes sure that any image that goes in that space will be the intended size.

There are times when you will still use the “ruler” measurements. Usually these are applications where a set dpi has been specified or is expected. My printer specs out at 600dpi. What this means is that when my printer prints an image, it will print out with 600 different dots of color in an inch. This lets me make pictures that have enough detail that you have a hard time telling them from a photo. If I always set my photos at 600dpi, I will know that I am getting the finest quality image possible, with any size print, on my printer. There is no point in saving it at 1200dpi, because my printer will either print it out too large, or all of that extra information will just be wasted disk space.

The one thing to remember is that when specifying a “ruler” measurement, to be accurate, there must either be an agreed upon or specified dpi. If this is not the case you will most likely end up with something you did not want.

On the next page I will show you some comparisons of what happens when you change various settings.

OK, remember I said most monitors show their images at 72dpi. Web browsers don’t care what the ruler measurements are in most cases. Watch what happens when I change various settings:

36×50 pixels / 1in x 1.389in at 36dpi

36×50 pixels / 0.5in x 0.694in at 72dpi

36×50 pixels / 0.25in x 0.347in at 144dpi

36×50 pixels / 36in x 50in at 1dpi

The point here is that if the pixels stay the same, you can represent the measurement/dpi expression in an almost infinite number of ways.

 

So what happens when you change the pixels? This will also change the dpi or the ruler measurements. Look at what happens.

72×100 pixels / 1in x 1.389in at 72dpi

72×100 pixels / 0.5in x 0.694in at 144dpi

144×200 pixels / 0.5in x 0.694in at 288dpi

As you can tell the measurements are almost useless on your browser. All it cares about is how many pixels wide by how many high. I think you should be getting the idea now.

CONCLUSION

Essentially, both ways of representing the size of an image are correct and valid. Some are just simpler in some circumstances than others to work with.

To summarize what happens when you change one figure in the equation:

• If you raise the pixels, either the ruler measurement or the dpi must go up.
• If you raise the ruler measurement, either the pixels must go up, or the dpi must go down.
• If you raise the dpi, either the pixels must go up, or the ruler measurement must go down.

Or for the mathematicians:

P = R x D

where P equals the pixel measurement, R equals the ruler measurement, and D equals the dpi.

(Don’t let the math scare you. If you got it before that, you most likely had it correct.)

Anyway, in my humble opinion, you are in most cases better off if you use the pixel measurements. This will minimize the possibility of sizing errors and confusion. Using that as your base, you will soon be able to work back and forth from dpi to pixels and feel comfortable doing it.

Good luck!