Learn how to resize your images without losing quality using Shutterstock Editor. Also learn how to quickly convert images to pixels.
Cover image via Roman Samborskyi.
Every image has three core features that you need to know about when you’re uploading to the web.
- File size, which is measured in bytes (kilobytes, megabytes, etc.)
- Dimension, which is width x height in any unit of measure (pixels for digital, inches or centimeters for print)
- Resolution, which is measured in dots per inch for print (DPI) or pixels per inch for digital (PPI)
Websites have different requirements and limits when it comes to these three image features. Ideally, you want to make adjustments to your images according to these requirements before uploading them. While many websites will resize images automatically, this automated process can degrade image quality in both resolution and color. Uploading at the exact size requirement ensures that your images are minimally affected and therefore undistorted.
“Resize” can mean one of two things: reducing image file size, and changing image dimensions. The two go hand in hand, but for the purpose of this article, we’ll be discussing how to change image dimensions.
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 will effectively increase the dimensions. The dimensions will determine how big the image appears on screen.
If that’s confusing, just remember:
- More pixels per inch = better resolution
- Fewer pixels per inch = lower resolution
Convert Inches to Pixels
Pixels are the standard unit of measure for screens. 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.
Since the dimensions and resolution is all relative, we can use a calculator to find the values when we know two of 3 measurements.
To convert pixels to inches, divide the pixel dimensions by the resolution. For example, a 1000 x 500 pixel image at 72 DPI is 13.89 x 6.95 inches high.
To find the resolution, or DPI, of an image, you’ll need to know the width in both pixels and inches. Divide the pixel dimensions by the dimensions in inches. For example, an image that’s 1000 pixels wide and also 13.89 inches wide is 72 DPI.
To convert inches to pixels, multiply the image width in inches by the resolution, or DPI. For example, 13.89 inches at 72 pixels per inch is 1000 pixels wide.
Use this chart for common inches to pixels conversions and vice versa.
Can You Change an Image Size to Whatever You Want?
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 will 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.
There are, however still a few ways we can enlarge an image without losing all of the details.
1. Preserve Details 2.0
This is a relatively new feature in Photoshop. You can enable it by clicking Command + K to open the Preferences window, then hit Technology Previews. Or, click Photoshop at the top of the screen, hover your cursor over Preferences, and select Technology Previews.
Check that Enable Preserve Details 2.0 Upscale is on before you continue with the next step.
2. Use Resample
Resampling lets you change resolution and dimensions separately, and allows Photoshop to blend pixels together in your enlarged image in order to keep the image smooth.
You will 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 drop-down menu next to it. Photoshop is set to Automatic, but for our purpose you will want to select Preserve Details 2.0.
3. Noise Reduction
After you select Preserve Details 2.0, you will see the Noise Reduction slider. Use the preview on the left side of the window to view how moving the slider changes the image. Moving it too low leaves the image looking grainy and pixelated, but moving it too high makes it blurry. Adjust the slider until you find a value that reduces noise without smearing away detail.
How to Resize an Image in Photoshop
You can’t add pixels to an image, but resizing your images is still easier than you might think. Photoshop can seem complicated, but we’re going to break it down to the most basic steps here. Or, 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.
1. Open Image Size
Click Image at the top left of your Photoshop window, or hold Command + Open and hit I. These steps will open the Image Size window. Once there, you will find options for changing the dimensions and resolution of your image.
2. Change Image Dimensions
You will only need the Width and Height fields for now. Be sure to leave the link icon On in order to prevent the image from distorting while you resize it. The width and height will automatically sync with each other when you change the value of either one.
Insert the dimensions you need into the Width and Height fields. You will find the following unit choices in the drop-down menus next to the dimension fields.
- Percent – allows for quick math in percentages
- Pixels – set specific pixel dimensions
- Inches – sets PPI (Pixels per Inch)
- Other units of linear measurement
Choose the unit of dimension that works best for your project. If you plan to share the image digitally, resize the image using the pixel dimensions for where you will be posting (a Facebook header or Twitter profile, for example). Or, if you are printing your image, fit it to the size of the image box in your layout program so you get the best resolution.
3. Save a Copy
After you set your dimensions hit OK. Photoshop will take you back to the image window, where you can either save immediately or finish any other editing work you want to do.
When you are ready to save, hit Command + Shift + Plus to bring up the Save As box, or click on the File menu at the top left and select Save As. It’s a good idea to save your edited image as a separate copy in case you need the original in order to make changes. Rename your resized copy and save it to a new location. You may even want to create a new folder for your edits if you are resizing a batch of multiple images.
How To Resize an Image Without Photoshop
1. Search or Upload an Image to Editor
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 Replace Background to add it to your canvas.
2. Change the Resolution for Your Environment
At the right side of the screen, find Canvas Size. To its right will be 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.
On the right is a selection menu 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.
3. Change the Canvas Size for Your Platform
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.
On 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.
Shutterstock Editor makes it easy to resize your image in pixels, or resize your image in inches. If you want to switch the units of measurement, simply select the new unit from the dropdown and watch as Editor converts the units from one to the other– no work at all!
4. Adjust the Image Size
Click and drag one of the blue dots on the corners of the image to resize it to fit the canvas. The proportions remain locked so you don’t have to worry about distorting the image. The canvas size is 1200 x 700 pixels, so I’m scaling the image down from the original size.
5. Download and Save
When you are happy with your image, double check the resolution and size, then hit the red Download button at the top right of the screen.
You’ll be prompted to check your file name, size, and choose a license. Hit License and Continue. Then choose the File Format and Resolution. These are done for you when you choose your resolution in the main Editor window. Hit Download, choose a place to save your file, and you’re all set.
Interested in improving your image and photo knowledge? Look into these essential articles:
- Video Tutorial: Understanding the Basics of Lightroom
- Basic Photo Editing: How to Use the Crop Tool in Photoshop
- A Guide to Common Aspect Ratios, Image Sizes, and Photograph Sizes
- Why Page Speed Matters: How to Resize Images for the Web
- Learn How to Customize Canvas Sizes in Shutterstock Editor
- Shutterstock’s simple and free image resizer