Little Squares of Color

Little Squares of Color

What little squares? Where?

A majority of the images you will encounter are what is called “raster based.” This means that the images are made up of hundreds or thousands of little squares of color called pixels, laid out in rows and columns. The number of pixels in an image is determined by both the dimensions and the resolution of an image and these two terms are often confused for one another. While dimension and resolution are interrelated, they are two distinct properties and it is important to have an understanding of both, as well as how they influence each other.

A rose by any other name…

“Size” is one of the most confusing aspects of learning to work with raster based images, because the same word is often used to mean different things. For the sake of clarity, I will use the terms “dimension” (measured in pixels) and “size” (measured in inches). Like dimension and resolution, dimension and size are two distinct properties but often referred to by the term “size” — sometimes even in the same sentence. You can see why this gets a little confusing.

Dimension refers to the height and width of an image in pixels. For example, 600 pixels x 600 pixels or 600 x 600. Unless you “resample” your image (we’ll get to resampling later), this file will always be 600 pixels x 600 pixels in dimension, BUT it may not always be the same size (in inches).

Resolution refers to the number of pixels in an inch (ppi, also called “dots per inch” or dpi). The higher your ppi, the greater the quality of detail of your image. Note that I didn’t say anything about the size.

But it looked so much bigger on my monitor…

Now we’ll look at how dimension and resolution relate to each other and how this affects the way an image prints or displays. The preferred resolution for professional printing is 300 ppi or higher. Let’s call it 300 for the sake of easy math. At 300 ppi resolution, your 600 x 600 image will print at a size of 2 inches x 2 inches (300 pixels per inch x 2 inches = 600 pixels).

Some desktop printers will produce decent prints at only 150 ppi. At this resolution, your 600 x 600 image will print at a size of 4 inches x 4 inches (150 pixels per inch x 4 inches = 600 pixels). Fewer pixels per inch means more inches are needed to display the same number of pixels and the individual pixels will be bigger. This is one thing which creates those jagged stair step like edges in a poor quality image — too few pixels per inch, or “low resolution.”

Now, just to throw a little more confusion into the mix, monitors display at either 72 ppi (Mac) or 96 ppi (PCs). Yep, you guessed it — it looks bigger on the screen than it will actually print. Not only that, but a lower resolution file at the default zoom will look sharper on you monitor than it will look once you print it. This is why it is so important to know both the dimensions and the resolution of your file.

Wrong mushroom, Alice…

Ok — resampling. Resampling (upsampling or downsampling) is a way to change the dimensions and/or the resolution of your image. In upsampling, you are increasing either the dimensions or the resolution or both. There are a variety of ways to accomplish this, but the basic idea is this: the program either enlarges the pixels (increased dimensions, same resolution) or, based on the existing pixels, guesses what color pixels should be added and where (increased resolution, same dimensions) or both (increased dimensions and resolution). In downsampling, you are reducing either the dimensions by removing pixels or the resolution by reducing their size and cramming more of them into one inch or both.

Of all these processes, downsampling the dimensions is the most successful, quality-wise. Any of them can be work well or horribly, it really just depends how extreme a change you are trying to make.

Presto Change-o… Oh no!

One other thing to consider when working with images is proportion — the way that your height relates to your width. A common mistake made by people new to working with images is to not correctly maintain the proportions of an image.

Let’s say that your original image is a group photo of the people in your department. It is 4 inches tall and 8 inches wide. You want to fit this image into a space that is 4 inches wide. If you correctly maintain proportions by dividing both dimensions by the same amount, the new image will be 2 inches tall and 4 inches wide (4 divided by 2 is 2 and 8 divided by 2 is 4). If you change only the width so that your image becomes 4 inches tall by 4 inches wide, you will severely distort the image. Have you ever played with Silly Putty? Yeah, it’s like that. Suddenly everyone in your department looks like a strange alien being.

Maybe the change you make isn’t so drastic and they only look a little squished. Who’s going to notice, right? Wrong! Humans have an uncanny knack for recognizing distorted images, particularly of other humans. They might not be able to put their finger on what exactly is wrong when the distortion is subtle, but trust me, on some level the image will strike them as off and make them uncomfortable, even if only slightly. Why make that kind of impression when it’s so unnecessary?

In a nutshell…

The size (in inches) and quality of your images is determined by both the dimensions (in pixels) and the resolution (in ppi), so it is important to know the requirements for both. Because monitors display at a lower resolution than is appropriate for print, your images may look both larger and clearer on your monitor than when they are printed. In addition, a file which prints clearly on a home/desktop printer will require a higher resolution to come out clearly when professionally printed. And finally, maintaining the correct proportions when sizing your images may not seem like a big deal, but it can have an impact on the overall impression you make. There are, of course, other considerations to take into account when working with images, but you can go a long way by simply mastering these basic elements.