Most people know enough to know resolution exists, but they don’t really know if they have enough or even that they could have too much! (rare, but true) It can be a tricky concept to grasp and can cause confusion along with much wasted time between clients and designers.

Resolution refers to the amount of pixels (little squares) in an image. Resolution is measured by the linear inch. 72 ppi equals 72 pixels per inch. A one inch image at 72 ppi has 5184 pixles (72×72 =5184). Assuming the number of pixels in an image is fixed, increasing the size of an image decreases its resolution and vice versa. In Photoshop go to the menu bar Image > Image Size to find your file resolution.

How much resolution do you need?

Having too much resolution will produce unnecessarily large files and too little will result in blurry, jagged images. First determine how the image will be used: will you use it for a website or for print?
• Web images are set at 72ppi
• Print images can be set from 150ppi (most home/office use) to 300ppi (press)

Resampling an image to go larger:
Adding file size not detail

If you need a 6×10 photo at 72ppi and only have a 3.84×5.76 at 72ppi (415×276 pixels), why not just change the resolution? This is referred to resampling and it will often result in poor image quality. Checking the resample image box allows you to disconnect the width and height from the resolution. Photoshop will add pixels and guesstimate their colors by the colors of adjoining pixels. Since Photoshop doesn’t know the subject of the photo it can’t add sharpness, the exact thing needed to make the print look better. Resampling to add image resolution increases file size and softens the edges of the image being enlarged. I highly advise against resampling at all costs.

Downsampling an image:
Going smaller for web

The same 3×5 photo at 300ppi does look huge on your screen. If you’re printing the photo on press at 3×5, you’ll want to leave it at this size, but to make it look reasonable on the web you must discard resolution. Check the resample image box and change the resolution to 72ppi (360×216 pixels) — really it’s ok this time.

Note: Downsampling can be used for any image with excess resolution. First, determine the amount needed then downsample if there’s excess. If there’s 50-100% more resolution than you need, it may be time to downsample. Keep a copy of the original file for future!!

Downsampling to the correct resolution will keep your image looking good, that’s why these photos both have the same quality.

Resampling an image correctly:
Changing document size, not pixel dimensions

This photo is 24×36 at 125ppi which equates to 3000×4500 pixels. I want to use it in a brochure and need it to be 300ppi. I’ll have to resize the image without changing the pixel dimensions to see the how large the file will be. First I’ll have to uncheck resample image which will create a link between the width, height and resolution. Then I’ll type in a resolution of 300ppi. Notice the width and height change to 10×15, but the image retains all 3000×4500 pixels. This is the correct way to resize an image large or small. When you click OK, the file will appear the same, but the rulers (cmd/ctrl+R) will display the new dimensions.

Remember to always save copies of high resolution files prior to downsampling!
This is very important (and why I mentioned it twice) because you can’t get that same resolution back once you save and close the file.

Try this test to learn more about resolution: Open a file and downsample it for web (Image > Image Size) and check the resample image box and lower the resolution by half. Click Ok. Your file will have shrunk in size right before your eyes because there’s less pixels. Now, go back into the Image Size dialogue and type in the original resolution (leave resample image checked) and click ok. The image should have the same number of pixels as when you first opened it, but it looks much worse.

Let me know if you have any questions on this post and please leave a comment if you like it!