What is “Image Resolution” and How Much Should I Care?

When it comes to creating catalogs—whether it’s print, online, or digital varieties—there is still a lot of confusion from beginners when it comes to understanding the different image formats and image quality settings. Actually, if some of us veterans are honest, some of it may still be a little hazy, even for us. We’ve just learned to spout off our image requirements after finding something that worked, and we never really bothered to look under the hood again. It’s all good, we’re in a No Judging Zone today because we’re going to go back to basics.

To start with, let’s discussion “Resolution” itself. In actuality, there are really TWO main resolution settings that we need to concern ourselves with: pixels and DPI. To better understand how image quality works on different mediums, we’re going to need to be clear on what these two settings actually mean.

Pixels (Think Computer Screen Size)

Any digital image is formed from lots of tiny tightly-packed dots, called pixels. Because they’re so small, when you view the digital image on your monitor, you don’t notice the dots—you get the impression that it’s a smooth image. If you were to get a strong enough magnifying glass, however, you’d see that it’s really made up of a bunch of different-colored dots. Because our computer screens also utilize pixels, this makes it fairly convenient and easy for us to judge how “large” a digital image will appear.

Let’s use an example of a pretty typical monitor displaying as 1600×900 pixels. That means it uses 1600 tiny dots running horizontally across, and 900 tiny dots going vertically. This is a “widescreen” aspect ratio, very similar to what you’d see at a movie theater (as opposed to a 4:3 aspect ratio from an older TV). Now, we download an image attachment from email that measures 800 pixels wide by 300 pixels high. We then want to open this image in its native resolution and view it on our computer monitor. Doing the math, it’s clear that image will take up half of the screen’s width, and a third of the height, as shown below.

So, we can think of “pixels” as a way for us to help gauge the native viewing size of a digital image over a computer monitor. If we had an ultra high resolution version of that same image, at say 3200 pixels wide by 1200 pixels high, it would be too big to natively display the full image on the computer monitor with 1600×900 resolution. If our intended audience for this image is a Website viewer, how many are going to have a monitor that can natively view a 3200×1200 image? Very few. So, realistically, we can look at an image with that resolution as “overkill” for a Web audience, and we’d probably scale it down. That would also cut down on the download time, as the 3200×1200 pixel image is a bigger file and would therefore take longer to download and view. One important takeaway from this discussion is to always consider your intended audience. Bigger isn’t always better. Knowing how our audience is supposed to view an image, and for what purpose, helps us determine how to optimize the Resolution settings.

DPI (Think Print Size)

DPI, or Dots Per Inch, is the other main setting we care about when it comes to Resolution. This one, however, is geared towards images in print. Printed images are also formed from tiny dots, but we can decide the quality of the printed image by determining an appropriate DPI. The printer takes this information and knows how many dots it should print within a square inch. So how many DPI is the right amount?

If you’re printing something intended for a high-definition output such as a catalog or magazine, then the recommended DPI is 300. You can go higher or lower, but this is essentially the industry standard. 300 dots per inch effectively means that the printed dots will be so tiny and close together that you won’t be able to notice with your naked eye, even if you put it up close to the paper. The image will look sharp, not blocky, and this is what we’ve come to expect from glossy magazines and high-quality catalogs.

So, if we want to PRINT something with that high quality of a DPI, we definitely want our source image to be of a resolution high enough to display it as large as we need on print. Let’s go back to our first example of the 800×300 pixel image. If we factor in the 300 dots per inch we want it to print as, then this image would print out as approximately 2.7 inches by 1 inch. (300 pixels being 300 dots per inch). That might be fine if it was a small product photo, but it certainly wouldn’t do for a full page ad! Let’s look at our ultra high res version for comparison: 3200×1200. Doing the same math (dividing by 300 dots, or pixels) we would end up with a printed image about 10.7 inches by 4 inches. This would roughly equate to half of a page, viewed lengthwise.

Web or Print, Make a Choice

Given that the ultra high-res image (3200×1200 pixels) seemed like “overkill” for our widescreen computer monitor, but then actually wasn’t even quite enough to fill up half of a print page, it seems there is no “one size fits all approach”. If you come to this realization, you’re on the right track, because it’s clear that different mediums will demand their own approach. You want an image to look good on a website, but also not take forever to download. At the same time, you want that same to fill a full page of a glossy print catalog page. Guess what, you’re talking two different image settings which means two different images (even if it’s depicting the same thing, ultimately).

This is why you tend to see image formats like JPG and PNG displayed on the web. This is because they utilize compression to try and keep the image size as small as possible even at higher resolutions. So that 800×300 pixel image, as a Webcentric JPG might only be 100KB in size and still look really good on a computer monitor. However, as we already discussed, it’s not going to look very good as a full-page print due to the high DPI demands.

Catalogers tend to use lossless formats like TIF and EPS for print, but what they gain in clarity and quality comes at the price of file size. The 3200×1200 image as a 300 dpi TIF might weigh in at 14 – 25 MB when it’s all said and done. Full page images can and will get even larger.

If you’re a multi-channel marketer, you realize by now that you need a solution that can actually handle multiple versions of the same images—an ultra high-res original used for Print, with perhaps a medium-res version for a Web Details image, and maybe a low-res version for the Web thumbnail. Each image has its own specific needs and audience, so it isn’t reasonable to expect a single image perform all jobs admirably.

Making Bad Photos Good

We get this question a lot, so I think it’s worth discussing. Once someone understands DPI, Pixels, and Resolution, the next step is looking at your existing repository of images. In some cases, you might have a lackluster photo that isn’t high-resolution enough to serve as Print even though you really NEED it to. Which leads to the inevitable “how do I fix this?”
Photoshop will let you open that image, and change the DPI from 72 to 300, but keep in mind this is just telling the printer how many of those pixels to squeeze in a square inch. To account for that bump in DPI, you’d need the resolution to go up accordingly. As you can imagine, re-sizing an image from 800×300 to 3200×1200 is POSSIBLE but it won’t give you quite the intended results! It’s going to look blocky, with plenty of artifacting and rough edges. The reason is because you increased the SIZE of the image but you didn’t magically add more detail to the original photo to allow it to look good blown up in this way.

Think of it as though you had a magnifiying glass to the original image: you would see all the gaps, fuzziness, and missing details up close. Without it being magnified, it probably looks ok. So when you artificially raise the resolution, you are bringing the magnifying glass up close but you are NOT adding that missing information and fixing those missing details and fuzzy, blocky images that are now visible.

Unfortunately, the only real solution in cases like this is to get a better quality source image. That could mean a re-shoot, or getting a hold of a high-res original. It’s possible you have a set of images that were intended for a Web audience, and now you’re trying to use them for Print.