Pixels 101 Version 2.0
The word pixel—a mashup of picture and element probably dating back to the early ’60s—is now part of everyday vocabulary. But, for as much as we use the word, confusion persists about the relationship between pixels, resolution, and image size.
Using Pixels to Create an Image
To explain how these items work when creating an image and how they are related, let’s start with a very basic example—a simple black and white drawing of a smiley face. Since digital images are just a grid of horizontal and vertical pixels, we’ve created a 24 x 24 grid of squares, with each square representing one pixel. To recreate the smiley face on the grid, we need to fill in the pixels where the face intersects a square (figure 1).
figure 1
figure 2
figure 3
When we place the 24 x 24 grid over the smiley face (figure 1), some parts of the drawing intersect with squares on the grid, others do not. Some squares are completely covered, and some just barely intersect. But pixels can’t be partially filled in. So now what?
In order to decide whether or not to fill in a pixel, we need to set a threshold based on how much of the square is covered by the image. For our purposes, we decided to try a 50 percent threshold—if the square is more than 50 percent covered by our drawing, we will fill in that pixel (figure 2).
As you can see, the end result resembles our original smiley face, but the edges are pretty jagged (figure 3).
figure 4
figure 5
figure 6
It’s hard to give the appearance of a smooth, curved edge using a bunch of squares — but not impossible. If we work within the same size grid but add more squares, there are more pixels that can be filled in, the image becomes increasingly more defined, and edges begin to appear much smoother. Though the image area is the same, figure 4 now features a 48 x 48 grid (2,304 squares); figure 5, a 95 x 95 grid (9,025 squares); and figure 6, a 190 x 190 grid (36,100 squares).
Eventually, if we add enough squares, our eyes would no longer be able to perceive the rough edges, and the curves would look perfectly smooth.
figure 7
But in order to add more pixels in the same space, the pixels need to get smaller. The four squares in figure 7 show how the size of the pixel squares in our example decreased as the number of pixels increased.
This is a good illustration of how increasing the number of pixels does not necessarily mean the image will get larger. This is because pixels do not have a fixed size. They can be really, really big, or really, really small.
Pixel Resolution
Resolution defines how big or small the pixels in your image are and is measured in pixels per inch (ppi).
Let’s pretend for a minute that the pixel grids we used in the smiley face examples above are 1-inch wide and 1-inch high. The first grid we used had 24 squares vertically and horizontally. The resolution of that image would be 24 ppi—4 pixels in the space of one linear inch.
As we added pixels to our smiley face grid, we increased the resolution of the image. Not just because we were adding pixels to the image, but because we were adding pixels to the image and keeping the physical length and width of the image the same. The resolution for figure 4 is 48 ppi; for figure 5, it’s 95 ppi; and for figure 6, it’s 190 ppi.
As you can see, there is a direct correlation between the image’s resolution and the quality of detail in the image. The higher the resolution of the image, the smaller the pixels get, which in turn allows for the image to have greater detail.
Smaller pixels mean that more pixels can fit into the physical dimensions of an image, but to be clear, higher resolution is not determined by how many pixels are in an image. A physically larger image could potentially have fewer pixels than a smaller image. Take for instance the following example.
An 8 x 10-inch image with a low resolution of 72 ppi has a total of 414,720 pixels while a 3 x 5-inch image with a higher resolution contains a total of 1,350,000 pixels. That’s more than three times the number of pixels in a smaller space.
If you’re still with us, be forewarned there’s more math ahead! We’ll try to make it as painless as possible.
Print Size
Since pixels do not have a fixed size, the print size of an image can vary, and the size is directly related to the resolution of the image. An image set to 72 pixels per inch will print much larger than the same image set to 300 pixels per inch.
Remember, the higher the resolution is for an image, the smaller its pixels are. And if the pixels are smaller, as a result, the image is also smaller.
To determine the print size of an image, we must first know the resolution of the image. From there, it’s just a little bit of simple math. We take the number of pixels in the image’s length and divide it by the number of pixels per inch specified as the print resolution. The result will be the print size (in inches) for the length of the image. Repeat these steps with the width of the image to find the print width.
As an example, a 640 pixel by 480 pixel image (a standard pixel dimension for photos on old digital cameras) at a resolution of 300 pixels per inch would print out at 2.13 x 1.60 inches (640/300 = 2.13 and 480/300 = 2.13).
The same 640 pixel by 480 pixel image at a resolution of 72 pixels per inch would print out at 8.89 x 6.67 inches (640/72 = 8.89 and 480/72 = 6.67).
So, you can see, the same image with the same number of pixels can print at a range of sizes, depending on the print resolution’s pixels per inch setting. The determining factor is how many pixels you specify will fit into one inch—300, 72, or possibly some other number.
On-Screen Size
When we display an image on-screen, the size of the image becomes dependent on the number of pixels in the image and the screen’s resolution, not on the specified print resolution (300 pixels per inch, 72 pixels per inch, etc.). Because of this, the same image will appear to be different sizes, depending on the monitor used to display the image.
For example, a fairly standard 27-inch monitor with screen pixel dimensions of 1920 x 1080 has an approximate resolution of 82 pixels per inch. Our 640 pixel x 480 pixel image would appear to be about 7.80 x 5.85 inches on the screen.
By comparison, a 17-inch laptop screen with similar pixel dimensions (1920 x 1200) has an approximate resolution of 133 pixels per inch. On this screen, the same 640 x 480 image would appear to be only 4.81 x 3.61 inches.
The difference here has less to do with the screen’s physical size and everything to do with how many pixels the screen has. In our example, the 27-inch monitor has 82 pixels per inch and the 17-inch laptop screen has 133 pixels per inch. The more pixels a screen has per inch, the smaller the pixels need to be to fit in that inch.
When our 640 x 480 image displays on these screens, its size changes because the pixel sizes of each screen are different. The pixels on the 82 pixels per inch 27-inch monitor are larger than the pixels on the 133 pixels per inch 17-inch laptop screen, resulting in a larger image on the 27-inch monitor.
Huh?
The bottom line here is that there is more to understanding how a digital image will print or display besides just knowing how many pixels are in the image.
Print resolution will determine the size at which the image will print and give you a clue as to the level of detail the image is capable of holding.
Conversely, the print resolution settings will have no bearing on how large an image will appear on-screen. An image’s on-screen size is determined by the resolution of the screen you use to display it.
Understanding these basic principles will help you better evaluate digital images to determine if they are suitable for use in your next print or digital campaign.
