Image Resolution part 2: Why resizing?

Images on the web

First, let's consider the situation that the image gets uploaded to a website. If it's meant to illustrate a piece of text, think of the amount of space on a typical monitor that it will take. A typical monitor is 1000 to 2000 pixels wide, so really a dimension of 500-1000 pixels each side is usually more than enough. I often pick 400x600 pixels for images on my website. On the portfolio, they are 600x900 pixels. That's all. 600x900 pixels is just above 0.5MP. Compare that to the 12 to 24 MP that comes out of most cameras. You really need only a fraction of that for web display.

Omitting to downsize an image before it goes to the web may result in downloading a full 24 megapixel image every time someone requests the page. That's bad in terms of server storage space and bad in terms of network traffic and page loading speed.

Note that I have only mentioned the first quantity of resolution (pixel dimensions). What about the others? Does it matter what resolution (e.g. pixels per inch) I use when uploading images to the web?

The answer is: no. See figure 1 below for yourself. Two versions of the same original, each the same amount of pixels (400x600), one saved on 50 PPI, one on 200 PPI.

Figure 1: Two versions of one image: left in 50 PPI, right in 200 PPI.

Notice any difference? Well, you don't because there isn't any.

In theory, the left version should measure 8x12 inch, the right one 2x3 inch. In practice, it doesn't work like that. When I make up my web pages, I am the one who determines the size of all artwork. In the above example, I decided to show both images at the same size. That decision gets coded into the HTML, and every browser will display it accordingly. Resolution is discarded. Provided that the two versions have enough pixels (they do), there is no visible difference.

Of course, the story is different if you want to show an image in as much detail as possible, for example to convince your visitors of the capabilities of a camera's sensor. Or just because you want to show a stunning landscape photo in full glory. By all means, upload all pixels you have available and don't even consider downsampling.

Resolution on a printer

The story is also different if an image needs to be printed. Sure, we know the target image size (not in pixels but in physical units). Let's say 10x15 cm or 4x6 inch.

So there is the 24MP image (4000 x 6000 pixels) that we want to print on 10x15 cm. How many pixels do we need? Is it necessary to resize or can we just send the full image to the printer?

In theory, the answer is: yes, it matters what we send to the printer.

In practice, ... well, I am not so sure.

To understand the principle, you have to know that a printer has a so-called "native resolution". Just look up the documentation, or ask the print lab what it is. This resolution is - surprisingly enough - specified in PPI (not in DPI).

For most inkjet printers this number is 300 or 360, but who knows, other values may exist. So, no matter what you feed the printer, it will print at its native resolution! The PPI is a physical property of a printer, related to the size of the ink nozzles or whatever.

Will this process degrade print quality? I doubt it, but possibly. The alternative is that you do the downsizing yourself, in Photoshop, Lightroom or whatever. This may give better or worse results, I really can't tell.

Upsizing is different of course. Let's assume we send a 100 PPI image to a 300 PPI printer. In that case, somewhere in the same printer driver, interpolation will occur. For every one pixel, two extra are estimated.

It is no surprise that quality will suffer in this case. Whether you will notice or not depends on a lot of factors: how close will you inspect the print, how good are your eyes, how much detail does the original image have, etc. But in general, it is a bad idea to let the driver upsample your image.

See figure 3 for the effect of upsampling. In this case, I downsampled the example image of figure 1 to 100 PPI and back to 300 PPI. Pixels were discarded, and then interpolated. Notice how much detail gets lost.

Figure 3: 100% of the original (left) compared to 300% upsampled (right)

Again, if we have no better than 100 PPI, the question may be if we can do the upsampling better in any other software. It depends on skill, and the quality of the software at hand.

Save for local use

A third reason for saving an image is when you need to use it in a different context like a Word document, spreadsheet, any other Adobe product etc. I believe such cases are similar to saving for the web, but there is a snag.

I tried it and saved one photo in two versions. Each in the same pixel dimensions (900 x 600), one at 300 ppi and the other at 50 ppi. Applying the usual formula, the first one measures 3x2 inch, the second one 18x12.

Next I inserted each in a Word document. See figure 4 for the result.

Figure 4: One image in different resolutions imported in Word

Aha, here the images follow their configured physical sizes. Or do they? Well, not quite. Remember the size of the second image: 18x12 inch, or 45x30 cm. That's considerably larger than what fits on a Word page. So what happens? Word automatically resizes the image.

Look at figure 4 and guess which of the two images has more pixels. The answer, surprisingly, is: the one on the left page. The bigger image (remember, starting with equal amount of pixels) is resized by Word to make it fit on one page. Ergo: less pixels, even though bigger in size. One can easily validate this statement by saving both images and comparing their pixel dimensions.

Now let's assume we use Word to downsize the second image to make the two equal in size. See figure 5.

Figure 5: Same as figure 4, but the second image resized in Word

When resizing like this, what happens to the amount of pixels? The answer: nothing. Word keeps the images as they are, just displays them differently. This is a similar process to placing images on a website. The real physical size is determined by the user making up his document, not by the image itself. In the end, the only thing that matters is the amount of pixels.

The following may help to get my point clear:

• Stretch a 100x100 pixel image over a full size page (too few pixels!), and the file size remains small but the image will get an ugly pixelated look
• Put a 3000x3000 pixel image on a small corner of a page (too many pixels!), and it looks fine but makes the document unnecessarily large in disk size

Let me conclude that the real thing that always matters is the pixel dimension - the amount of pixels that an image counts. Provide plenty of pixels for the intended use and at least a good result will be the result. Only for excellent prints, an exact resolution in terms of pixels per inch may matter.

Gerald Bakker, 23 April 2016

Related articles

Photoshop by the Numbers

Like my writings? Have anything to comment? Click here!