Pixels 101: An Introduction to Resolution and Print Size
The humble pixel. A simple, four-sided object (usually a square or rectangle) that is at the heart of our digital world today, and yet it is so often misunderstood.
The term pixel has been around since at least the early 1960s, and is a combination of the words picture and element. Today, with the widespread usage of digital devices — from digital cameras and scanners to computers, tablets, and smartphones — the term pixel has become part of our everyday vocabulary.
But, for as much as we use the word pixel, there often seems to be confusion about the relationship between pixels, image size, and the quality of detail in an image. Did you know that just because an image has a lot of pixels does not necessarily mean that it will print out large? Or that fewer pixels is not an indicator of less quality?
Using Pixels to Create an Image
In order to see how these items work and how they are all related, the first thing we need is a general understanding of how an image is created using pixels. Let’s start with a very basic example using a simple black and white drawing of a smiley face as our subject.
Since digital images are just a grid of horizontal and vertical pixels, we’ve created a 24 x 24 grid of squares to represent our pixel grid. Each square in the grid represents one pixel.
If we place the 24 x 24 grid over the smiley face (figure 1), you’ll see that some parts of the drawing intersect with squares on the grid, others do not. Some squares are completely covered, and some are just barely covered. To recreate our subject on the grid, we will need to fill in the squares where the face intersects a square. In the digital world, a pixel cannot be partially filled, so when we recreate our image we can only fill in full squares. But we aren’t going to fill in every square that our smiley face touches.
At some point during the evolution of digital imagery, it was discovered that, when working with black and white images, filling in every square that the intersected with the original subject was not the optimal way to reproduce the subject digitally. It was found that if a threshold was set, based on how much of the square was covered by the image, a better image could be produced. To gauge whether or not a square should be filled in, we are going to use a 50% threshold — if the square is more than 50% covered by our drawing, we will fill in that square (figure 2).
As you can see, the end result resembles our original smiley face, but the edges are pretty jagged (figure 3). It’s hard to give the appearance of a smooth, curved edge using a bunch of squares — but not impossible.
As figures 4 through 6 show, if we add more squares (pixels) to our grid, the image becomes increasingly more defined, and edges begin to appear much smoother.
Figure 4: 48 x 48 (2,304 squares); figure 5: 95 x 95 (9,025 squares); figure 6: 190 x 190 (36,100 squares).
Eventually, if we were to add enough squares, our eyes would no longer be able to perceive the rough edges, and the curves will look perfectly smooth.
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 that 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 is a method of defining how big or small the pixels in your image are and is measured in pixels per inch (ppi) — how many pixels there are in one linear inch. The acronym dpi (dots per inch) is often incorrectly used when referring to pixel resolution (this is a mistake that we are guilty of making from time to time). When properly used, dots per inch usually refers to the number of ink dots used to create a printed image.
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 pixel squares vertically and horizontally. The resolution of that image would be 24 pixels per inch — 24 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 size of the image the same.
Figure 4: 48 ppi; figure 5: 95 ppi; figure 6: 190 ppi.
And as you may have noticed, there is a direct correlation between image resolution and the quality of detail in an image. Higher resolution images can achieve greater detail because the number of pixels in the image has increased, and the size of those pixels has decreased.
Higher resolution is not necessarily determined by how many pixels are in an image. A 640 pixel by 480 pixel image and a 6400 pixel by 4800 pixel image can both be the same resolution (e.g. 300 ppi). The only difference will be the size of the printed image.
Print Size Since pixels do not have a fixed size, the print size of our 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 what the resolution of the image is. From there, it’s just a little bit of simple math.
To determine the print size of an image, we will 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 of the image.
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″ by 1.60″ (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″ by 6.67″ (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 resolution of the screen it is being displayed on, and 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 that is used to display the image.
For example, a fairly standard 27″ 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″ on screen.
By comparison, a 17″ 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″.
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″ monitor has 82 pixels per inch and the 17″ 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 is displayed on these screens, its size changes because the size of the pixels that make up each screen are different. The pixels on the 82 pixels per inch 27″ monitor are larger than the pixels on the 133 pixels per inch 17″ laptop screen, resulting in a larger image on the 27″ 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 can also give you a clue as to 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 it is being displayed on.
Understanding these basic principals will help you better evaluate digital images to determine if they are suitable for use in your next print or digital campaign.
