Blog Home Tips & Tutorials Inches to Pixels: How To Resize Images Without Losing Quality
Pixels to Inches: Understanding and Demystifying Image Resolution

Inches to Pixels: How To Resize Images Without Losing Quality

Understanding image resolution is perplexing, even for more experienced creatives. Consider this article your crash course in everything DPI.

You’ll learn essential vocabulary, how to quickly determine image resolution, how to convert from inches to pixels, centimeters to pixels, and vice versa, and how to resize your image using Adobe Photoshop, Shutterstock Editor, or PicMonkey, all while retaining quality. Let’s start with some common questions and vocabulary pertaining to image resolution. 

Pixels on a Screen
A macro shot of pixels on a screen. Image via maurobeltran.

What Are Pixels?

Pixels are the standard unit of measurement for screens. “Pixel” is a portmanteau of “picture” and “element.” You can think of pixels as tiny building blocks of graphic information.

Everything you see on a screen is comprised of pixels. On older computer monitors, these pixels were more easily visible because they were less dense, However, newer computers and mobile devices have the ability to display more pixels in a smaller physical space, resulting in a crisp, smooth appearance.   

What Is Resolution?

Simply put, resolution is the relationship between the dimensions of an image and the number of pixels contained within those dimensions. The more pixels, the higher the resolution. A 3000 x 3000 pixel image could be considered a high resolution image for digital use, appearing large on your screen.

If you were to print it at 10 x 10 inches, the density of the pixels would be sufficient for a high-quality print, but you’d encounter image quality issues at a significantly larger print size (like 20 x 20 inches) because the density of the pixels would be lower. Speaking of pixel density… 

Halftone Ink Dots
Macro shot of “halftone” ink dots printed on paper. Image via maurobeltran.

What Is DPI? Is It the Same as PPI?

DPI is a printing term that stands for “dots per inch” and refers to the number of dots of ink in one inch of a printed image. PPI is the digital equivalent, meaning “pixels per inch,” and refers to the number of pixels within one inch on a digital screen.

While these acronyms don’t mean exactly the same thing, they’re often used interchangeably. DPI/PPI are important determining factors for print quality. As a rule of thumb, you want a DPI/PPI of 300 for the best printing results, but know that you have some wiggle room. (The world probably won’t end if you go to press with a 275 DPI image.)

Size Examples
Standard PPI sizes. Image via Bro Studio.

For on-screen use, you can get away with smaller pixel dimensions and still have a good-looking image. This is because printing generally requires a higher DPI for better results.

For example, 72 PPI has been the standard for digital use for years, but the actual pixel dimensions are what’s most important for digital use because display resolution changes across devices. Websites and digital platforms will list dimension requirements in pixels because monitor and phone displays are measured in pixels. So, if you’re prepping images to use on the web, you want to set the units to pixels.

On the other hand, print requirements will be in inches or centimeters, depending on the system or country of origin. Use this chart for common inches to pixels conversions and vice versa.

Conversion Chart
Inches to pixels conversion chart.

Need common centimeters to pixels? We got you covered there, too.

Centimeters to pixels conversion chart.

How Do I Find My DPI/PPI? 

You can easily check the DPI/PPI of any image in Adobe Photoshop. Simply open your image and go to Image > Image Size. Toggle the unit of measurement to see the dimensions of your image in inches. In this example, with 300 Pixels/Inch (PPI), I can print my image as-is at 16 x 9 inches without having to worry about image quality.

DPI Photoshop Image Size
If your goal is to print, work in inches or centimeters.

Since dimensions and resolution are relative, the best time to check the effective DPI of your image is when you place it in your design at the size you desire. The exact method depends on the program you’re using. Check out tip #5 in this article for a quick guide on checking your effective PPI in Adobe InDesign

Can You Change an Image Size to Whatever You Want?

When you resize an image, you change the dimensions and density of pixels that define its quality. The relationship between resolution and dimension is directly connected. If you reduce the number of pixels per square inch (PPI) in an image, you’ll effectively increase the dimensions. The dimensions will determine how big the image appears on screen.

You can always make an image smaller without losing quality, but you can’t make an image much bigger before noticing a drastic reduction in quality.

In a digital image, the number of pixels are represented by the DPI (or PPI) and the width x height dimensions. For instance, a 2000 x 2000 pixels image at 72 DPI has 4,000,000 total pixels. To make the image smaller, say 1000 x 1000 pixels, I can simply reduce it in size and it’ll retain the same level of detail, just in a smaller image.

If I want to make that same image bigger than the original size, pixels would have to be created. That means the computer multiplies the pixel count to fit the new dimensions, creating distortion and other effects by using the information in the image to guess at what should be used for the enlargement. This is due to artificially creating pixels from other pixels, instead of capturing them from the original information.

What About Vector Images?

All of the information above applies to “raster” images, which are made out of pixels. These rules don’t apply to “vector” images, which are based on mathematical equations and can be scaled indefinitely! Filetypes for vector graphics include Adobe Illustrator (.ai), .eps, or .svg.

Preserve Details in Adobe Photoshop Using Resampling

Resampling lets you change resolution and dimensions separately, and allows Adobe Photoshop to blend pixels together in your enlarged image in order to keep the image smooth.

You’ll find the Resample option back in your Image Size popup. Check the box to enable Resample, and explore the enlargement options in the top-half of the dropdown menu next to it. Adobe Photoshop is set to Automatic, but for our purpose, you’ll want to select Preserve Details 2.0.

Image Size
Resample will be in the Image Size popup.

After you select Preserve Details 2.0, you’ll see the Noise Reduction slider. Once you’ve changed the dimensions to your new desired size, use the preview on the left side of the window to view how moving the Noise Reduction slider changes the image.

Moving it too low may leave the image looking grainy and pixelated, but moving it too high may be too blurry. Adjust the slider until you find a value that reduces noise without smearing away detail. Once you’ve struck a balance, click OK and Save a copy of your resized image.

Size Example
In this example, with a 300% enlargement, some degradation is normal.

If you want a more detailed look at changing image dimensions and resolution, follow this in-depth guide for how to resize an image in Photoshop.

How to Resize an Image in Shutterstock Image Resizer

If you’re looking to quickly resize an image, the free Shutterstock Image Resizer may be just the tool you need. Simply drag, drop, and change the size of your image. 

Image Resizer
Yep. It’s really that easy!

How to Resize an Image in Shutterstock Editor

For those who desire more control and don’t have access to Adobe Photoshop, there’s Shutterstock Editor. Editor is a free online image resizer, and you don’t have to download anything in order to use it.

Go to Shutterstock Editor and Click “Get Started

Upload your image to the online photo editor using the File dropdown menu. Or, you can search for an image in the Shutterstock collection by clicking the magnifying glass icon in the left toolbar. Enter your key terms and hit Enter/Return to see your search results.

Click on an image to preview it, then hit Add as Background to add it to your canvas.

Add Background
“Add as Background” automatically resizes your canvas to fit the image.

Change the Resolution for Your Environment

In the top-right on the toolbar, find Canvas Size for a selection menu for units of measurement.

  • For images you plan to use on the web, choose pixels.
  • For images you intend to print, choose inches or centimeters.

Within this menu, there’s a dropdown for Resolution.

  • For web-based images, choose 72 DPI.
  • On lower resolution print images, choose 150 DPI.
  • For high resolution print images, choose 300 DPI.
Canvas Size
Everything you need pertaining to resolution is under Canvas Size.

Remember, uploading an image with the correct dimensions ensures no loss of quality, so it’s important that you choose the right dimensions for the image’s end use.

In Shutterstock Editor, you can easily resize images to popular web dimensions, including:

  • Facebook image size: 1200 x 1200 pixels
  • Facebook cover size : 1702 x 630 pixels
  • Instagram post size: 1080 x 1080 pixels
  • Instagram story size: 1080 x 1920 pixels
  • Twitter post size: 1024 x 512 pixels
  • Pinterest post size: 736 x 1128 pixels

You can also create custom canvas sizes by inputting measurements to the width and height box. Use the lock button to constrain the proportions, meaning the width and height will change relative to one another.

Download and Save

When you’re happy with your image, hit the red Download button at the top-right of the screen. Then, choose the File Format and Resolution. Hit Download, and enjoy your freshly resized image!

Resized Image
Your resized image. Well done!

How to Crop & Resize Images in PicMonkey

Another great option for cropping or resizing images is PicMonkey (plus, you’ll discover much more than just photo sizing tools).

Something worth emphasizing—resizing an image is different from cropping one. When you crop, you change the aspect ratio of an image. When you resize, you totally change the file size of an image.

Using PicMonkey’s Crop Tool

PicMonkey's Crop Tool
Crop an image in PicMonkey. / Image by contributor crazybear.

After you’ve opened an image in PicMonkey:

  1. Click Crop Canvas in the left Edits menu. This opens the Crop tool.
  2. Use the Aspect Ratio drop-down menu to choose a pre-set size (say, if you wanted to crop your image to be correctly sized as an Instagram post).
  3. If you know the width and height you want, enter it in the dimension boxes.
  4. Click Apply to save your changes.

Note, if you check the Scale photo box, it will keep your bounding box the same relative size (so that when crop one side or corner, the rest of the box scales accordingly).

Using PicMonkey’s Resize Tool

After you’ve opened an image in PicMonkey:

  1. Click Resize in the left Edits menu.
  2. Use the checkbox to choose either pixels or percentages.
  3. Refer to the charts we’ve provided in this post and enter your dimensions.
  4. Make sure the Keep proportions box (the chain icon) is clicked. The chain should appear closed. What this does is automatically update the height of your photo when you modify its width (or vice versa). This helps prevent your image from becoming distorted.
  5. Click Apply to save your changes.

There you have it, a comprehensive rundown on all things DPI and sizing. Now go size those images of yours correctly.

For more awesome tutorial tips and advice, check out these articles:

Cover image via PixelChoice.

Share this post