The 2020 Web Almanac by HTTP Archive reports that images comprise over 64% of the page weight. Thus, learning how to resize an image in Photoshop can help you reduce the page document size and improve website performance.
Don’t have access to Adobe Photoshop? No worries. We’ll show you how to resize an image in GIMP too.
Keep reading to learn:
How To Resize an Image in Photoshop
How To Compress an Image in Photoshop
How To Resize an Image in GIMP
How To Compress an Image in GIMP
Final Thoughts: How To Resize an Image in Photoshop and GIMP
How To Resize an Image in Photoshop
- Open the image in Photoshop.
- Go to Image > Image Size.
- Set the resolution.
- Input the target Height and Width values.
- Save your file.
There’s no shortcut to resize an image in Photoshop without losing quality. Luckily, Adobe’s interface makes the process extremely intuitive.
Here’s how to change the dimensions of an image in Photoshop:
Step 1: Open the Image in Photoshop
Open the image in Photoshop by navigating to File > Open in the top menu bar.
Step 2: Go to Image > Image Size
Go to Image > Image Size to launch the Image Size dialog box.
Step 3: Set the Resolution
Set the pixel dimensions to 72 pixels per inch (ppi) for web images. Anything higher will slow down your website — that’s why it’s usually only used for printing images.
Step 4: Input the Target Height and Width Values
Select Pixels as the units of measurement using the dropdown menu.
The image proportions are linked by default. See the chain link icon next to them? That’s the Constrain Proportions option. It means when you change one of the two values, it changes the other one proportionally.
If you click on the icon and unlink the values, you’ll be able to change the Width or Height independently.
The original size of our image is 2200px x 1376px. If we set the Width as 500px, the Height automatically changes to 313px.
Set your target image size using the Width and Height options. Once complete, hit OK.
Step 5: Save Your File
Go to File > Save a copy in the top menu bar.
Choose the file save location, add a descriptive name and click Save.
You’ll see the JPEG Options box. You can adjust the image quality by dragging the slider up or down in the Image Options section. Or, use the default value and click OK to save.
How To Compress an Image in Photoshop
Besides resizing images, you can also learn how to compress an image in Photoshop to reduce its size and resolution. A combination of both techniques will help you resize images without losing quality.
Here’s how you do it:
Step 1: Open the Image in Photoshop
Open the image in Photoshop using the File > Open option in the top menu bar.
Step 2: Go to File > Export > Save for Web (Legacy)
Go to File > Export > Save for Web (Legacy). You can also access this tool using the Alt + Shift + Ctrl + S keyboard shortcut in Windows and Command + Option + Shift + S in Mac.
In the Save for Web popup, you’ll see tabs across the top — Original, Optimized, 2-UP and 4-Up. If you click on 2-Up, it will show you your original and compressed image side-by-side.
Step 3: Select a Compression Level
Expand the dropdown menu beside Preset and select one of the three JPEG options — JPEG High, JPEG Low or JPEG Medium. You can use the options below Preset to choose compression settings for JPEG files.
You can increase or decrease the compression level using the dropdown menu. You can also input a numerical value for Quality.
Step 4: Save Your File
ALT: Save the compressed image in Photoshop.
Once you’ve found the best compression setting for your image, click Save… to save the file on your computer.
How To Resize an Image in GIMP
GIMP is an open-source image resizing tool with basic photo editing features.
If you’re on a budget and can’t invest in a subscription to resize a photo in Photoshop, you can use GIMP instead.
Here’s how to resize an image in GIMP:
Step 1: Open the Image in GIMP
Open GIMP and go to File > Open.
Select your image from the source folder on your computer and click Open. You can also drag and drop an image directly into the GIMP workspace to start editing it.
If the image you’re opening has an embedded color profile, GIMP will ask if you wish to convert it to GIMP’s built-in sRGB profile. Click Convert to change it to GIMP’s profile or Keep to work with the original profile.
Step 2: Go to Image > Scale Image
Go to Image > Scale Image… using the top menu.
Step 3: Set the Image Resolution
Set the resolution for the image in the Scale Image popup — 72 works best for images for the web. Make sure the unit of measurement is pixels/in.
Step 4: Input the Target Width and Height Values
Next, verify the icon next to Width and Height shows a chain link. This setting ensures that when you change the value of either option, the other value updates proportionally, preserving the original image aspect ratio.
Enter your target image size and click Scale to resize the image.
Step 5: Export the File
The process to save files as JPEG is different in GIMP compared to Photoshop. That is because GIMP saves files in the XCF file format.
To save a resized image in GIMP as JPEG, go to File > Export As.
Choose the file save location, add a descriptive name and click Export.
You’ll see the Export Image as JPEG popup box. Here you can reduce the image file size by reducing the output quality. Or, use the default value and click Export to save the file.
How To Compress an Image in GIMP
Besides resizing images, you can also learn how to compress an image in GIMP to reduce the size of an image. Here are the steps to do it:
Step 1: Open the Image in GIMP
Go to File > Open in GIMP. Locate the image you want to edit in the file dialog box and click Open.
If your image has an embedded color profile, GIMP may ask you to convert it to its built-in sRGB profile. Click Keep to preserve details of the original image or Convert to change it to GIMP’s profile.
Step 2: Go to File > Export As
Go to File > Export As in the top menu bar.
In the Export Image window, choose the file save location, add a descriptive name and click Export.
Step 3: Set the Image Quality
In the Export Image as JPEG popup, check the Show preview in image window checkbox and use the horizontal scrollbar to increase or decrease the image quality.
Alternatively, assign a numerical value in the numerical input box beside it. You’ll notice the image quality change in the background.
Step 4: Export the File
When you’re happy with the image compression, click Export to save the file.
Final Thoughts: How To Resize an Image in Photoshop and GIMP
Learning how to resize an image in Photoshop can help you reduce the page size and improve your website performance. After understanding the basics, you can play around with different resampling and compression settings to further optimize your images.
