Why size and size are two different things.
It can be very confusing.
Understanding some of the details about how photographs are stored on disk, how they are displayed, and how they are printed can allow you to make a dramatic difference in the size of documents, webpages, emails, and more.
It isn’t terribly complicated to understand, but the details can be a little confusing if you don’t know a couple of fundamentals — especially because there are two different types of “size.”
So, I’ll start with the fundamentals.
Become a Patron of Ask Leo! and go ad-free!
One measure of size is an image’s resolution, which measures pixels (or dots) horizontally and vertically; 1920 × 1200 pixels, for example. Another measure of size is the amount of space in bytes required to store the file of the image on disk. The relationship between the two is affected by both lossy and lossless compression algorithms used when saving the image. Sharing a file that is too big in terms of file size can result in long or slow page displays and downloads, or email being rejected for being too large. When you share an image that is too big in terms of resolution, it can be awkward for the recipient to view. You can make images smaller by resizing, cropping, and/or adjusting compression settings.
We’ll start by defining two terms: pixel and resolution.
A pixel (short for “picture element”) is a dot.
Seriously, that’s all it is. One dot.
We can do things with that dot, like give it a color, and I’ll get to that in a moment, but at its most fundamental level, a pixel is nothing more than a single dot.
That was easy.
Computer display devices, like the screen on which you’re reading this, is nothing but a rectangle of pixels. The rectangle is so many pixels wide (horizontally) and so many pixels high (vertically).
For example, one screen I use is a rectangle that is 1,920 pixels wide and 1,200 pixels high, or simply “1920 × 1200”.
That’s referred to as the resolution of the device: a measure of how many pixels the device is capable of displaying.
If you do the math, the screen has 2,304,000 pixels — a little over 2.3 million.
Camera people like to call numbers like that megapixels. The screen above would be 2.3 megapixels, but we generally don’t refer to display devices that way.
When a digital camera takes a picture, it is 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, which works out to 12,041,344, or a little over 12 megapixels. That camera is already a few years old; newer models can take even larger pictures.
Size versus size
With pixels and resolution under our belt, we can start talking about size. Image size can be a confusing concept because there are two different kinds of size we’re talking about:
- The physical size of the image displayed on screen or printed on paper. We measure that in inches or pixels.
- The size of the file — like “.jpg” or “.png” files — in which the image is stored on disk. We measure that in bytes.
Unfortunately, the relationship between the two is tenuous at best. An image can appear quite 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 a screen or in a document might in fact be a huge file.
Size matters. By understanding exactly where size comes from and how it impacts your audience, you can get the optimal balance: great-looking images that take up just as much space as they need, and no more. You can avoid delivering images of poor quality or documents of unnecessarily large file size.
So let’s look at both of those types of sizes.
Image size in bytes: the size of the file
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.
As it turns out, all visible colors can be described as a combination of the primary colors: red, green, and blue, often called RGB. While there are several approaches, color is most often represented in 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. Gray might be an RGB value of 127,127,127. What I like to call “Ask Leo! blue” is 45,114,217.
What that means is that it takes at least three bytes to describe the color for each pixel.
In the 250 pixel wide × 141 pixel high image below, we have a total of 35,250 pixels; they require 105,750 bytes to represent the full possible range of color.
Compression: making files smaller
Here’s where some geeky magic happens. The file containing the image above doesn’t take up 105,750 bytes of space on your computer. The size of the file is impacted by compression, which is nothing more than complicated math used to reduce the amount of space needed.
There are two kinds of compression: lossy and lossless.
Different storage formats use different algorithms (that complicated math I mentioned) to compress images.
- Lossy Compression. The compressed image is slightly different than the original.
When dealing with photographs, the visual quality of the image can be reduced to make compression more effective (and thus the size smaller). For example, it’s unlikely that you would see the difference between grey values 234 and 235, so the compression algorithm might make the color values for neighboring pixels both the same, and thus more likely to be compressed.1 JPG format is an example of a lossy compression format. When the file is saved, the user can select the quality of the image.
- Lossless compression. The compressed image is identical to the original.
For example, an entire row of pure white pixels might be represented as something smaller than representing each individual pixel. “20 white pixels” would be smaller than “white pixel, white pixel, white pixel,….” repeated 20 times. PNG is a good example of a lossless image compression format.
In the example photo above, compression has reduced the 105,750 bytes of information it contains to 63,029 bytes of actual file size.
The number of bytes an image takes up on disk is one kind of “size”. We’re also concerned about the other kind of size: how big the image appears when viewed.
Image size in inches: the size of the image on paper or screen
The magic acronym when displaying pictures is DPI, or Dots Per Inch.
Remember, 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 an output device.2
For example, many LCD displays present around 75 pixels (or dots) per inch. It varies widely, depending on the physical size of the screen, the maximum resolution capability, and the resolution setting. The “retina” display on Apples were the first to have exceptionally high DPI: 220 pixels per inch. Printers often offer 300 pixels per inch, and professional printing may go as high as 600 or 1200 pixels per inch.
So what does all that 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 printing at 300 pixels per inch, the printer has two choices (which it makes depends on the printer, printer driver, and settings):
- Print pixel-per-pixel. The image that takes up roughly 3.3 × 1.8 inches on your 75 DPI screen would get printed at 0.8 × 0.5 inches on the 300 DPI printer. The printer packs the pixels in much tighter, so the 250 × 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 it will fill the same amount of physical space (3.3 × 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 make the picture look fuzzy, as the stretching algorithm has to basically “make up” the extra pixels.
The following three pictures are:
- A segment of the original photo, above, at 75 DPI, showing it at the same size on screen as before.
- The same photo stretched from 75 DPI to something that would print at the same physical size were it printed on a 300 DPI printer.
- A third image actually created at 300 DPI.
You can see that the stretched image definitely looks fuzzier.
How you want to deal with this depends on what you are doing. Do you want the image to look good on a screen, or when printed, or both? How much space do you want it to add to the size of a document or webpage?
When DPI and resolution collide
The images above were taken as a full-color photo taken on my 12-megapixel camera. If displayed at 100% resolution (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.
If printed at 300 DPI, the image would be well over a foot wide by 9.5 inches high. It wouldn’t even fit on a standard sheet of paper.
Here’s the photo again, this time at a more manageable size. It’ll download and display relatively quickly.
Click on it, however, and you’ll download the full 10-megabyte 4288 × 2848 original image. If it appears to fit on your screen, your browser has already resized it for you, even though you were forced to download the whole thing. Click on that, and it should display at its full size.
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 will be 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 displayed or printed, depending on how you’ve laid out your document. All that extra resolution is completely wasted.
Even worse: when you do nothing to adjust the sizes of full-resolution images you place on a webpage or include as an email attachment, you’re forcing people to download the entire full-size image (like that 10-megabyte JPG above) that must then be scaled down by their browser or image viewer to something that works on a computer monitor.3
Make your pictures smaller.
Think about how your image is going to be used, and resize the image 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?
Understand the typical DPI that would be used for each so you can pick an appropriate size in pixels.
Want your picture to be around five inches on screen? Then around 375 pixels wide is a great start — that’s 5 inches times 75 dots per inch. Five inches on paper? Then (assuming a 300DPI printer), 5 times 300 means you probably want something around 1500 pixels wide.
There is 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.
So, learn two terms — resize and crop — and how to do them. I’ll get you started below.
You’ll need a photo-editing program. There are many out there; one probably came with your camera. You can also use a freeware program called FastStone to view and edit images.
In your photo-editing program, resize and/or crop the original image to make a smaller image. Be careful to never overwrite your original: use the “Save As” command.
Best practice #1: resize
You can resize a photo to make it smaller but keep the entire image. Here’s my full photo, resized from the original monster at 4288 × 2848 down to 400 × 266 pixels.
That’s not only a good size for displaying on a screen, but it’s also significantly smaller. At 175,310 bytes, it is less than 2% of the file size of the 10-megabyte original, and downloads much faster.
Best practice #2: crop
Crop a photo to make it smaller by only including a portion of the original image. This allows you to include as much of the interesting stuff as possible, as large as possible, while still making the picture display smaller.
In this example, I’ve cropped to the same size as above: 400 × 266. In this case, the result contains only the subject’s face and nothing more, but it’s at maximum clarity.
Naturally, you can do both: crop the image to exactly what you want it to contain, and then resize the result to fit.
Save the original and experiment
As I said at the beginning, all of this can be confusing, and your head might be spinning by now. I get it.
My advice to you is to pick an image and play with it. Specifically:
- Make a copy of your original image as it came from your camera or wherever else. This is important, because no matter what you do next, you’ll always have the image back in its original, unchanged form.
- Experiment. Pick an image-editing program and try resizing, cropping, and saving in different formats.
- Keep track of your results. Resize the photo and look at the results both on screen and on disk, or even printed out. Then go back to the original, “Save As” again, and try something different. Repeat that process for resizing, cropping, and saving in different formats and with different quality levels. Each time, start over from your original so you can see what each type of operation does.
This is all really worth understanding, even at a basic level. It’ll make your documents smaller, your email more likely to be delivered, and your recipients more likely to be able to see and appreciate your masterwork.
Subscribe to Confident Computing! Less frustration and more confidence, solutions, answers, and tips in your inbox every week.
I'll see you there!
Footnotes & References
1: This is not an actual lossy compression algorithm — merely an example of the types of things that might happen when lossy compression is used in order to make the concept understandable.
2: You may also encounter it defined as pixel pitch, which is the measurement of a single pixel, typically in millimeters. My display, for example, has a pixel pitch of 0.229mm × 0.229mm — meaning that its pixels are square (not all are), and there are approximately 110 of them per inch, or a DPI of 110.
3: And, of course, not all email programs do. It’s not uncommon to receive a photo and only be able to see the upper left corner because the full photo was sent and it’s much too large for your screen.
Our “model” for the example photos above: the lovely (and sleepy) Corgi “Penny”, photographed by Leo Notenboom.