It can be very confusing, I’ll absolutely grant you that.
This is one of those cases where understanding some of the details about how photographs are stored on disk can allow you to make a dramatic difference in the size of documents, web pages, emails, and more.
The details aren’t horrific by any means, but they can be a little confusing if a couple of fundamentals are skipped, especially because there are two different types of “size.”
So, I’ll start with the fundamentals.
It all starts with pixels.
A pixel 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 a very fundamental level, think of a pixel as nothing more than a single dot.
That was easy.
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.
One common resolution is 1920 pixels wide by 1200 high, or simply “1920×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; newer models save even more.
Other common resolutions include:
- Video and TV
- 1920 x 1080. Also known as “1080P”, this is high-quality High Definition (HD) video.
- 1280 x 720, also known as “720P”
- 640 x 480: standard definition digital television
- 440 x 486: approximate resolution of old (analog) NTSC television
- 3840 x 2160: so-called UHD, “Ultra HD”, or 4k HD, this is an emerging standard for the next size of high-definition video.
- Computers and computer displays
- 640 x 350: EGA video adapter, used in early IBM PCs
- 1280×768: minimum resolution required by Windows 8
- 800×600: minimum resolution required by Windows 10
- 1920×1200: common large-screen resolution
- 280 x 192: Apple ][
- Mobile devices
- 1080 x 1920: iPhone 6 physical pixels
- 1440 x 2560: Samsung Galaxy 6 Edge
Each of those resolutions is simply a measure of pixels – dots – the device is capable of displaying.
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 x 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.
When an image is written to a file, different image storage formats can alter the actual size of an image differently:
- Lossy Compression. When dealing specifically with photographs , 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; when the file is saved, the user can select the quality of the image.
- 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. PNG is a good example of a loss-less image compression format.
The example photo above is a PNG image . Compression has reduced the 105,750 bytes of information it contains to 63,029 bytes of actual file size.
Image size in inches
The magic acronym when displaying pictures is DPI, or 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 present around 75 pixels (or dots) per inch. It actually varies widely, depending on the physical size of the screen, the maximum resolution capability, and the resolution setting. The “Retina” display on Apple’s MacBook Pro currently distinguishes itself by having an 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.
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 printing 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, so 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 it will fill 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.
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 actually print at the same physical size were it printed on a 300 DPI printer.
- A third image actually created specifically for 300 DPI.
You can see that the stretched image definitely looks “fuzzier”.
How you want to deal with this depends on what it is you’re doing.
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 nine and a half 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 that full 10-megabyte 4288 x 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 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 is, in fact, completely wasted.
Even worse: when you do nothing to adjust the sizes of full-resolution images you place in a web page or 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 to something that works on a computer monitor.
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?
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 a freeware program called FastStone to view and edit images. Even the Paint program that comes with Windows will do.
In that photo-editing program, resize and/or crop the original image to make a smaller image, being careful to never overwrite your original.
Best practices: 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 x 2848 down to 400 x 266 pixels.
That’s not only a good size for displaying on 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 significantly faster.
Best practices: 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 physically smaller.
In this example I’ve cropped to the same size as the resized photo 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.
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. We measure that in inches or in pixels.
- The size of the file 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 screen or in a document might in fact be represented by a huge file.
Size matters. 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 they need, and no more. You can avoid delivering images of poor quality or documents of unnecessarily large file size.
Recommendation: Because this can be a confusing issue, I 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.