How do pixels and DPI and resolution and picture size and file size all relate to each other?

Pixel

A pixel is a dot.

Seriously, that's all it is. One dot. We can do things with that dot and I'll get to that in a moment, but at a very fundamental level, think of a pixel as nothing more than a dot.

That was easy.

Resolution

Computer display devices, like the screen on which you're reading this, are composed of nothing but a rectangle of dots - so many to each horizontal line, and so many lines. For example, the screen that I'm using as I write this has 1,200 rows of pixels, and 1,920 pixels in each row.

That's referred to as the resolution of the device. My screen has a resolution of 1920 by 1200:

If you do the math, that means my screen has a little over 2.3 million pixels.

Camera folks like to call numbers like that "megapixels" and the concept is exactly the same: when a digital camera takes a picture, it's doing nothing more than recording what it sees in pixels - lots and lots of pixels. My camera, for example, creates images that are 4,288 by 2,848 pixels or a little over 12 megapixels. My camera's already a few years old and newer models save even more.

Image size in bytes

We can't really talk about the size of an image in bytes without first discussing how color is represented in an image.

Each pixel can be set to a single color - that part is relatively easy.

While there are several approaches, color is most often represented as three distinct numbers: a number between 0 and 255 that indicates how much of the color red should be shown, another number for green, and another number for blue. As it turns out, all visible colors can be described as a combination of the primary colors red, green, and blue.

What that means is that it takes at least three bytes to describe the color for each pixel.

In the 250 pixel wide by 141 pixel high image below, we have a total of 35,250 pixels that requires 105,750 bytes.

Various image storage formats can do a couple of things to alter the actual size of an image when written to a file:

• Compression: The image data is compressed somehow. For example, an entire row of pure white pixels might be represented as something smaller than representing each individual pixels. "20 white pixels" would be smaller than "white pixel, white pixel, white pixel,...." repeated 20 times.

• Lossy Compression: When dealing with photographs specifically, the actual quality of the image can be reduced to make the compression more effective. It's unlikely that you would see the difference between grey value 234 and 235, so the compression algorithm might make them both the same, and thus more likely to be compressed1.

Jpg format is an example of a lossy compression format and the quality of the image can be selected when the file is saved. PNG is a good example of a loss-less image compression format.

The example photo above is a PNG image and compression has reduced the 105,750 bytes of information it contains to 63,029 bytes.

DPI: Dots per inch

Remember that pixels are dots so when we talk about DPI, we're really talking about how tightly packed the pixels are when they're displayed or "rendered" on the output device.

For example, many LCD displays have around 75 pixels per inch. It actually varies widely depending on the physical size of the screen and the maximum resolution that it's capable of as well as the resolution it's set to. The "Retina" display on Apple's MacBook Pro currently distinguishes itself by having an exceptionally high DPI of 220 pixels per inch. Printers often have 300 pixels per inch and professional printing may go as high as 600 or 1200 pixels per inch.

Great, what's it all mean?

It all boils down to the quality, the sharpness, of what you see.

Let's use our color photo above as an example. I chose its size to display well on a computer screen - i.e. around 75 pixels per inch. If we print this page on a printer that prints at 300 pixels per inch, we have two choices:

• Print pixel-per-pixel. The image that takes up roughly 3.3 x 1.8 inches on your 75 DPI screen would get printed at 0.8 x 0.5 inches on the 300 DPI printer. The printer packs the pixels in tighter and thus the 250 x 141 pixel image takes up less printed space. The problem of course is that while it's nicely visible on the screen, it's tiny if the page is printed.

• Print inch-per-inch. The number of pixels in the image is increased so that it will take the same amount of physical space (3.3 x 1.8 inches) when printed as it did when displayed on your screen. (This is the most common approach.)

Unfortunately, stretching a picture from 75 DPI, where it looks fine on the screen to 300 DPI for the printer can actually make the picture look a little fuzzy, as the stretching algorithm has to basically "make up" the extra pixels.

Here's the original, an example of stretching the image from 75 DPI to something that would print the same size on a 300 DPI printer, and a third image actually created specifically for 300 DPI:

You can see that the stretched image definitely looks "fuzzier" by far.

How you want to deal with this depends on what it is you're doing.

When DPI and Resolution collide

My original photo from which the examples above comes from is a full-color photo taken on my 12 megapixel camera. If displayed at 100% resolution (i.e meaning each pixel in the image is displayed on a single pixel on the monitor), that 4,288 by 2,848 pixel photo would require a 75 DPI monitor nearly five feet wide by a little over three feet high to display completely.

Even if printed on paper, the image would be well over a foot wide by nine and a half inches high. It wouldn't even fit on a standard sheet of paper.

You can view the full 10 megabyte jpeg here. (If it somehow seems to fit within your browser window, your browser has already resized it smaller to fit. Click on the image again after it's completed downloading to see how big it really is.)

Here's where people get into trouble: if you do nothing to modify the sizes of your images and simply place them in a document, chances are the document is not only huge, but unnecessarily huge.

If you include full-resolution photographs in a printed document, they will most likely be automatically scaled down to be smaller when printed, depending on how you've laid out your document. All the extra resolution that you've provided is in fact completely wasted.

Even worse, when you do nothing to adjust the sizes of full resolution images that you place in a web page or as an email attachment, you're forcing people to download the entire full-size image (think my 10 megabyte jpeg above) that people can't even see without scaling it down to something that works on a computer monitor.

Best practices

Make your pictures smaller.

Think about how your image is going to be used and then scale down the image resized for that target use. Make it as big as necessary for that use, but no bigger.

Is it simply going to be viewed on a screen or will it get printed?

Understanding the typical DPI that would be used for each, pick an appropriate size, in pixels.

Want your picture to be around five inches on screen? Then around 400 pixels wide is a great start. Five inches on paper? Then maybe 1500 pixels wide.

There's simply no reason to use your full 10 megabyte, 4288 pixel-wide (or however large your camera makes pictures) image and in fact, every argument against doing so.

Then, learn two terms: resize and crop.

You'll need a photo-editing program. There are many out there; one probably came with your camera. You can also use FastStone to view and edit images, or even the Paint program that comes with Windows will do.

In a photo-editing program, resize and/or crop the original image to make a smaller image, being careful to never overwrite your original.

Because I'm targeting this for primarily an on-screen audience, I'll choose 75 DPI in the examples that follow.

Resize a photo to make it smaller, but keep the entire image. Here's my full photo, resized from the original monster 4288 x 2848 down to 400 x 266 pixels:

That's not only a good size for displaying on screen here. But also significantly smaller. At 175,310 bytes, it is less than 2% of the file size of the 10 megabyte original.

Crop a photo to make it smaller by only including a portion of the original. This allows you to include as much of the interesting stuff as possible, as large as possible, while still making the picture smaller:

That's the same size, 400x266 as the photo above.

Naturally, you can do both: crop the image to exactly what you want it to contain and then resize the result to fit.

Size versus size

Size is a difficult issue because there are two different kinds of size we're talking about:

• The physical size of the image when displayed on the screen or printed on paper.

• The size of the file in which the image is stored on disk.

Unfortunately, the relationship between the two is tenuous at best. An image can appear very large on screen, but due to factors such as compression, quality, and a few other things, the actual file size might be quite small.

In the other direction, a small image on screen or in a document might in fact be represented by a huge file.

Size matters. Be it a poor quality image or an unnecessarily large document. By understanding exactly where size comes from and how it impacts your intended audience, you can get the optimal balance: great looking images that take up just as much space as the need, and no more.

Recommendation: Because this can be a confusing issue, I do recommend that you review the related articles listed below. Included are a couple of videos showing exactly how to manipulate images to make them smaller or larger. Hopefully, they'll help cement the various issues around sizing and resizing images.