Tips & Advice

The Importance of Image Resolution Explained

Adam Wright

by Adam Wright

A magnifying glass rests on a blue gradient color swatch chart.

Many times, we’ve been provided images from clients that are low in resolution. So what does this mean? And what is the importance of resolution anyways?

To put it in layman’s terms, image resolution is the quality of an image visually. Higher resolution = higher quality; lower resolution = lower quality.

But in further details, resolution refers to the number of pixels found per inch. Image size refers to the number of pixels wide by the number of pixels high an image measures.

How do you check the resolution of an image?

5 Epic Font Pairings You Can’t Go Wrong With

Tired of searching for fonts? With my 10+ years of design experience, I’ve put together the best font pairings for you to use, where to find them, and what industry they’re best for.

Get the Free Guide

You can do a super quick test just with your own eye — it’s not super accurate and obviously your eyeball can’t tell you the resolution, but it’ll tell you generally if it’s lower or higher resolution.

Essentially, if you open the image on your computer and view it at its fullest size (100%), you’ll be able to tell if it’s lower or higher res. If the image at its full size is very small, and even blurry — then it’s definitely lower resolution. If the image opens in its full size and it appears large on your screen, as well as sharp and clear — then more than likely it’s higher resolution.

This is not a surefire way to tell image resolution though, but it’s a quick and easy indicator.

More precisely, if you have Adobe Photoshop, you can open the image and go to Image > Image size in the top menu toolbar. The dialog box will tell you the image size and resolution exactly.

The screenshot below shows you the image specs in Photoshop — this image, for example, shows a 72 Pixels/Inch which is ideal for web applications.

Knowing what kind of project you need the image for plays a HUGE part in the importance of resolution. The quality of resolution needed when an image is printed on paper versus viewed on a screen is vastly different.

So what is the difference, and what resolution should you be using?

Image resolution for printing

When it comes to using images for print purposes, for the best quality possible you’ll want your image to be 300 dpi (dots per inch) at minimum. This allows for your image to be as clear as possible when printed, and avoid any blurriness or pixelation.

Using any modern digital camera today will create a high resolution image that’s sufficient for printing. Always be sure that you save the image at full quality, and don’t downsize or scale it to lose that quality.

Keep in mind, motion blur and being out-of-focus can cause your image to appear low-res, however that’s simply a mistake on the photographer’s end and not due to the resolution. Always focus on your object and don’t move while taking photographs to avoid this.

Image resolution for web

Contrary to images for print, image resolution for use online and digitally allows for a much lower quality while still looking great. A standard resolution used for online is 72 ppi (pixels per inch). At this quality, images online still appear high quality, but at a much smaller size.

Images for use on your screen are at a smaller resolution to allow them to load faster on the internet. This keeps your website performance up by having the accurate resolution.

In fact, unlike print where you do not want to downsize your images, with the web you definitely want to downsize. Many times, if done properly with Photoshop or an image resizing tool, your image size will be much smaller with very little to no difference to the eye.

3 Rules when it comes to image resolution

1. You can always decrease, but NEVER increase

When it comes to resizing images, you can always crop and make them smaller — however, once it’s cropped you cannot resize it back to it’s original size. It’s an irreversible action. In order to get the original back, you’ll have to re-open the original file, that is if you didn’t already overwrite it.

Note to self: always Save As… your file as a copy, and don’t overwrite your original image.

If you take an image and try to increase it to attempt to make the resolution higher quality, you will not be successful — if your image is low resolution, there is not much you can do to make it better other than retaking the image itself.

2. Bigger is always better

Even if you’re using images for online, having a larger resolution image is best because you can always scale it down to 72 dpi (screen resolution). Scaling it down will maintain a great resolution, but decrease the file size so that it doesn’t load down your page speed.

However, if you’re at a lower resolution than you need, you can’t scale up the resolution — this will only cause it to be pixelated and/or blurry and make the image file size larger than necessary.

3. CMYK for print and RGB for web

If you missed our blog post about it, we discussed the differences of CMYK and RGB. Remember when saving your images for the proper resolution and sizing to save them in the appropriate color profile. As a quick guide to remember:

CMYK = Print = 300 dpi resolution

RGB = Web/Digital = 72 ppi resolution

Now you know the importance of resolution

We hope this article helped you gain confidence in knowing what image resolution is, why it’s important, and how to apply it to your work moving forward.

Follow these basic rules on image resolution and your graphics and designs will be looking great.

Adam Wright

About the Author

Adam Wright

Adam is a California native, now living in Middle Tennessee. A long-time creative at heart, his passion for design and growing his small business, AWD, is always evident. When he's not writing code or sketching logos, he enjoys spending time with family, playing basketball, or watching just about any motorsports. Find him on LinkedIn.

Keep Reading