Helping people with computers... one answer at a time.

Photographic images have a number of characteristics that we're often not used to considering. I'll review how digital pictures are constructed and stored and what you need to keep in mind when sharing or publishing.

Please explain the relationship between bytes (resolution), pixels (understood as size), and dpi (e.g. 300dpi resolution for printing purposes). I need to explain to colleagues at work why their reports uploaded to our website take so long to download - because they are too big and contain many high res photographs and pdfs!

It is 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 just 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.

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. Smile

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:

1920x1200 proportions

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.

Full color image

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:

75DPI image 75DPI image stretched to 300DPI Original at 300DPI

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:

Full image, resized

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:

Full image, cropped

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.

1: This is not an actual lossy compression algorithm, but merely an example of the types of things that might happen when lossy compression is used in order to make the concept understandable.

Our "model" for the example photos: the lovely (and sleepy) Corgi "Penny", photographed by Leo Notenboom. Smile

Article C5947 - October 22, 2012 « »

Share this article with your friends:

Share this article on Facebook Tweet this article Email a link to this article
Leo Leo A. Notenboom has been playing with computers since he was required to take a programming class in 1976. An 18 year career as a programmer at Microsoft soon followed. After "retiring" in 2001, Leo started Ask Leo! in 2003 as a place for answers to common computer and technical questions. More about Leo.

Not what you needed?

23 Comments
Robin Hayes
October 22, 2012 8:19 PM

Many thanks for lifting the confusion on a complex subject. It needs reading a couple of times to really get it!

Bob Bois
October 23, 2012 9:09 AM

Leo, check your math on the 250 x 141 pixel argument? Should be 35,250, not 32,250.

Whoopsie! Fortunately a typo, not an inability to do math. :-) Thanks, fixed.
Leo
26-Oct-2012
DT
October 23, 2012 9:17 AM

Leo, you should add a couple of additional sentences to the first section describing a pixel:

"A pixel has only one attribute, and that is its color. That is, think of a pixel as a container for a very small dot of color, or said another way, a dot who's only thing we care about is the color it contains. The color in that dot (I mean, pixel) is the same throughout the dot's area. There is no smaller unit of color, the pixel is as small as it gets. More about color later."

Jester the Clown
October 23, 2012 9:39 AM

Not quite so.
Resolution on a monitor is measured in PPI, or pixiels per inch along one side. It's a measurement of length.
DPI is something completely different and refers to the dots produced by a printer in producing a printed image and should correctly be referred to as dots per SQUARE inch. It's a measurement of area not length.
The two aren't related.

Actually for better or worse they're often used interchangeably. For example in Windows you'll find a DPI setting specifically for the screen. Given that dots and pixels are functionally equivalent in most cases the distinction isn't all that important, IMO.
Leo
26-Oct-2012

David Powell
October 23, 2012 10:01 AM

Maybe you left this out to avoid further confusion, but my understanding is that the typical inkjet printer recreates each pixel with multiple "dots". Thus you choose the quality of the print by selecting pixels per inch (ppi) whereas the printer will probably lay down far more dots (individual "spits" of coloured ink). In printer specs, dpi is often quoted, but a 1440 dpi printer is not capable of accurately reproducing 1440 pixels per inch. Perhaps this is only important in scanning, where I have seen people say, "I have a 1440 dpi printer, so I'll scan at that resolution." and end up with an enormous file for no good reason, because the printer may be capable of no more than 300 ppi for practical purposes.

Come to think of it, it's probably better that you didn't get into that. It is complicated, isn't it?

Glen
October 23, 2012 10:12 AM

i have a presario SR1250NX with win 7 ultimate and a Lexmark S405 interpret printer. i scanned a picture of myself and on screen it looked fine but when i clicked "set as desktop" all you could see was my chest and belly. how did it get enlarged so much?

G Dedrick Robinson
October 23, 2012 10:25 AM

This is great, Leo. I've been working with computers since the days of DOS 3.1, and this is the clearest, most succinct explanation of a confusing subject that I've ever read. Congratulations.

Guin
October 23, 2012 11:53 AM

Excellent article as usual, but greatly enhanced by Corgi-usage.

Mark J
October 23, 2012 1:08 PM

@Glen
That's because the picture had more pixels than your screen could hold. You could either reduce the pixel resolution to the dimensions of your screen or when setting the background picture, you can choose "fit" to give it the best fit to your screen. If the the aspect ratio of your picture is different than the aspect ratio of your screen, the second method might give you blank space above and below or to the left and right of your picture.

Suraj
October 23, 2012 2:06 PM

Hi Everyone !,
As told by Leo that he have a monitor of 1920 by 1200 resolution i.e 2.1 megapixels(which is also 1080p).
I want to know that my phone is having a camera of 5 megapixels & it's not hd. As it is greater than 1920 by 1200 megapixels so the img. from the camera will be in HD?

Jan R
October 23, 2012 2:22 PM

Like others, I've been working with computers and photos since the 80's but have never really grasped the relationship between resolution & DPI etc - so thanks a million for the clearest explanation I've ready yet! As good as your other explanations :)

L J Cooper
October 23, 2012 4:06 PM

Good On Ya again, Leo!

Just a little bit on a sidetrack---

I've had a bunch of cameras from the 40's onward in all price levels. Something I've found important to the end is the lens quality. A 10 megapixel bargain camera made crappier images than my old 3.3 Canon.

Does the old saying "Garbage in, garbage out" apply?

snert
October 23, 2012 4:07 PM

I've noticed when I download a picture it seems humongous while it's downloading but resizes after it's finished. Now I know why.

skydive
October 24, 2012 1:30 AM

Another great article from the maestro of computers .Always so well presented , and understandable we are so fortunate to have such a person with this sort of talent I always look forward to Leos articles .My Regards ...Skydive

willderrness
October 24, 2012 2:37 AM

Don't forget about the open source program "GIMP" - it takes a little effort to master but has all the features of Photoshop but for free.

It has an excellent cropping feature and can automatically enhance color resolution.

Thanks Leo for the excellent article... regards... w

Jim
October 24, 2012 4:41 AM

Leo,

Thanks for the explanation!

One typo that should probably be cleared up, though ...
In the line that says "In the 250 pixel wide by 141 pixel high image below, we have a total of 32,250 pixels that requires 105,750 bytes."
the number 32,250 should actually be 35,250 , just for those who have been following along with an abacus in hand ....

James
October 24, 2012 8:29 AM

Leo's given a great explanation. The original poster's problem is that colleagues don't understand this and include photos which are just way too big.

I blame that on high-speed internet. By the time photo sharing came a long, a lot of people already had high-speed internet. So few people realized how big their photos were (or if they did, they didn't realize what the effect was).

I on the other hand only recently made the switch to high-speed. I often deleted emails with attached photos directly from the server without looking at the photos, simply because it would take too long to download on dial-up. My wife had a friend who would send a photo newsletter of her family's activities. The newsletter would often be 8 or 9 mb and the mailbox limit was 10 mb.

I, on the other hand, would use Paint Shop Pro and reduce the file size, by simply resizing to 4.5" x 6" x 72 pixels per inch. A 541 kb picture would shrink to 35 kb (of course I kept the original exactly as the camera output it, in case we wanted to print a copy).

My wife's parents enjoyed seeing the pictures of our children (their grandchildren), because on screen a 72 PPI 4 x 6 picture looks as good as the original, and I could upload them on dial-up fairly quickly.

Many people who have only sent pictures over high-speed internet don't understand this.

graham lundebgaard
October 25, 2012 2:06 AM

The answer is not to take such huge pics to start with unless you intend to make large hi quality prints from them. 1 or 2 mp is more than enough for most purposes. So just because your camera can take 12mp doesn't mean that you have to tale 12mp pics!

Actually, I disagree. You can make a big picture smaller, but you can't make a small picture bigger. I like to get the highest resolution possible in the pictures that I take, and then I can resize or crop appropriately (often both) if I need something smaller. When you take photos at a small resolution you can't really crop or zoom effectively. Snapshots, perhaps, but almost anything I take I frequently want to crop to make a better image.
Leo
26-Oct-2012

Rick La Riviere
October 25, 2012 2:40 PM

Correct me if I am wrong but aren't the primary colors red, yellow, blue?

Apparently not if you're a computer. Actually there are different sets of primary colors. RGB, RYB, CMY are all common. More here in Wikipedia.
Leo
26-Oct-2012

Cathy Sirvatka
October 26, 2012 5:16 PM

Regarding the primary colors, I was thinking the same thing about RGB being incorrect. We learn pigment primary colors when we are kids which are RYB - no other pigment can make those colors, but combined they make the secondary colors. But then learning old school photo printing, the primaries of light are CMY used in the same way as above. It is confusing and working from computer screen to printer we have to think about both. And then cmy(k) are the primary colors used for printing press work.

I choose to use PPI for anything on computer and DPI for anything printed since the "D" in DPI references an ink dot. I appreciate though that you said a pixel is a dot. That's a very practical way to view it.

Anyway, this was an AWESOME article to sum the whole photo thing up! Gonna send my web publishing students to this page. Thank you Leo!

Swamy Manavalan
October 27, 2012 8:30 AM

Fascinating. That is all I can utter. Never come across such simple but vivid portrayal of the subject. Jiyo Yug Yug. The Hindi blessings meaning Live long ages after ages.

A Richter
November 10, 2012 11:30 AM

Regarding file size and quality, I tend to go along with graham lundebgaard (Oct. 25). Having also previously believed that blowing up pictures is not to be had, I now know better. IrfanView, amongst others, offers this facility, with a choice of algorithms. Using the max. 5MB my compact provides me with, there is absolutely no trouble multiplying the size of a photo AND assigning the desirable DPI to it for printing.

Ken Rockwell writes at length about the Megapixel Myth on his very enlightening site.

I also agree with the point made in another comment: Optics, not pixel count is decisive for picture quality.

James S
November 10, 2012 12:06 PM

Allow me to agree with graham lundebgaard. If you really want to fill your 1 TB drive with useless stuff, there's no better way that with images of multiple megabytes in size that you're never going to look at again.

Unless you're a professional photographer, an image of 3 or so megapixels, stored as jpg, taking up ½ MB or less is as much as your photographic skills is likely to justify.

Comments on this entry are closed.

If you have a question, start by using the search box up at the top of the page - there's a very good chance that your question has already been answered on Ask Leo!.

If you don't find your answer, head out to http://askleo.com/ask to ask your question.