How To Resize an Image in Photoshop and GIMP

Key highlights 

• Optimizing images improves website speed, user experience and SEO by reducing file sizes without sacrificing quality. 

• Photoshop and GIMP provide powerful tools for resizing, compressing and optimizing images for the web. 

• Choosing the right file format—JPEG, PNG or WebP—helps achieve the best balance between quality and loading speed. 

• Using smart resampling techniques and proper compression settings ensures minimal quality loss while reducing file size. 

• Resized and compressed images improve website performance by lowering page load times and reducing bandwidth usage. 

Introduction 

Did you know that images make up nearly half of what your browser loads on most websites? A survey by Pingdom found that images contribute 61.3% of the average download size of a webpage. That’s why properly resized and optimized images are critical for your website’s performance. 

Heavy, unoptimized images slow down your site, frustrate visitors and harm your search rankings. You need simple image optimization to solve this problem. The good news?

GIMP resize image tools can dramatically improve your site’s loading speed – and they’re completely free. 

This guide walks you through how to resize and compress images using both Photoshop and GIMP. First, you’ll learn professional techniques using Adobe’s powerful subscription-based tool.

We’ll then show you how to use the free GIMP resize image capabilities in this open-source alternative to optimize your images for the web without sacrificing quality. 

How to resize an image in Photoshop

Resizing images correctly in Photoshop helps you optimize your website performance while maintaining visual quality. You need properly sized images to improve page load times and create a better user experience. 

Here’s a step-by-step guide to resize your images in Photoshop: 

1. Open the image in Photoshop 

2. Access the Image Size dialog 

3. Set the correct resolution 

4. Adjust dimensions with smart resampling 

5. Save with web optimization 

There’s no magic shortcut to resize images without some quality loss. However, Photoshop’s powerful tools help minimize degradation when used correctly.

Step 1: Open the image in Photoshop

Open your image by navigating to File > Open in the top menu bar. You can also use the keyboard shortcut Ctrl+O (Windows) or Command+O (Mac). 

Step 2: Access the image size dialog

Go to Image > Image Size from the top menu. This launches the Image Size dialog box where you’ll make all your adjustments. The keyboard shortcut Alt+Ctrl+I (Windows) or Option+Command+I (Mac) works too. 

Step 3: Set the resolution

For web images, set the resolution to 72 pixels per inch (ppi). This standard web resolution balances quality and file size perfectly. Higher resolutions like 300 ppi are only necessary for printing. 

Keep in mind that lower resolution means faster loading times for your website visitors. This directly impacts your SEO performance since page speed is a key ranking factor. 

Also read: 5 Ways To Fix Your Website Speed 

Step 4: Adjust dimensions with smart resampling

Select Pixels as your unit of measurement from the dropdown menu. 

The chain icon between width and height values represents the Constrain Proportions option. When activated, changing one dimension automatically adjusts the other proportionally to prevent distortion. 

For example, if your original image is 2200px × 1376px and you set the width to 500px, the height automatically adjusts to 313px to maintain the correct aspect ratio. 

To maintain the highest possible quality when resizing, use Photoshop’s smart resampling options: 

• Select Automatic from the Resample dropdown for most images 

• Choose Preserve Details 2.0 for photos being significantly downsized 

• Use Bicubic Sharper when reducing image size for extra crispness 

These intelligent algorithms analyze your image data to preserve details and clarity during the resizing process. 

When finished with your adjustments, click OK to apply the changes. 

Also read: Best Image Size for Websites + How To Optimize Them 

Step 5: Save with web optimization

To optimize your resized image for web use: 

1. Go to File > Export > Save for Web (Legacy) or use the shortcut Alt+Shift+Ctrl+S (Windows)/Option+Shift+Command+S (Mac) 

2. Select the JPEG format for photographs or PNG-8 for graphics with transparency 
3. Adjust the quality setting to find the sweet spot between file size and visual quality  
4. For JPEG, a setting between 60-80% usually offers the best balance 
5. Preview the optimization in the 2-Up view to compare quality differences 
6. Check the final file size in the bottom left corner 
7. Click Save and choose a descriptive filename that helps with SEO

When saving JPEGs through the standard File > Save As method, you’ll see the JPEG Options dialog. Here you can also adjust quality settings with the slider. 

For the fastest website performance, aim for image file sizes under 200KB whenever possible. Your Bluehost hosting includes performance tools that work best with properly optimized images. 

Remember to save your original file separately before exporting the web-optimized version. This lets you edit the full-quality version later if needed. 

How to compress an image in Photoshop 

Compressing images properly is essential for website speed and performance. You can significantly reduce file sizes while maintaining visual quality with Photoshop’s compression tools. Let’s explore how to optimize your images effectively. 

Using ‘save for web’ for optimized compression 

Photoshop provides powerful compression options through its Export features. Here’s the step-by-step process: 

1. Open your image in Photoshop by navigating to File > Open in the top menu bar. 

2. Access the compression tool by going to File > Export > Save for Web (Legacy). You can also use the keyboard shortcut Alt+Shift+Ctrl+S (Windows) or Option+Shift+Command+S (Mac). 
    
   
3. The Save for Web dialog offers multiple preview options. Select the 2-Up or 4-Up view at the top of the dialog box to compare your original image with different compression settings side-by-side. This visual comparison helps you find the perfect balance between quality and file size. 

4. Adjust compression settings using the preset options or manual controls in the right panel. The Quality slider provides precise control over the compression level. 

Choosing the right format (JPEG vs PNG vs WebP) 

Different image formats serve different purposes. Selecting the right one dramatically impacts your file size: 

JPEG 

• Best for photographs and complex images with many colors 
• Supports variable compression levels (Low, Medium, High) 
• Doesn’t support transparency 
• Use when file size is your primary concern 

PNG 

• Ideal for graphics, logos and images with transparency 
• PNG-8: Limited to 256 colors, great for simple graphics 
• PNG-24: Supports millions of colors but creates larger files 
• Use when you need transparency or precise color reproduction 

WebP 

• Modern format with superior compression 
• Supports both lossy and lossless compression 
• Offers transparency with smaller file sizes than PNG 
• Increasingly supported across all major browsers 
• Export via File > Export > Export As and select WebP 

When using the Save for Web dialog, select your desired format from the preset dropdown menu. For JPEG, you can choose between Low, Medium and High quality presets, or create your custom settings. 

Balancing image quality & file size for faster loading 

Finding the optimal balance between visual quality and file size requires some experimentation: 

1. For JPEGs, start with a quality setting of around 60-70%. This often provides the best compromise between file size and visual appearance. 
2. Watch the file size indicator at the bottom of the Save for Web dialog. For optimal website performance, aim for:  
   • Hero images: Under 200KB 
   • Standard content images: Under 100KB 
   • Thumbnails: Under 30KB 
3. Enable the “Optimize” checkbox to further reduce file size without additional quality loss. 
4. Consider using “Progressive” for JPEGs. This allows the image to load gradually, improving perceived loading speed for your visitors. 
5. Remove unnecessary metadata by unchecking “Include XMP” and other metadata options unless specifically needed. 
6. For text-heavy images or graphics with sharp edges, try the “Sharpen” option (between 15-25%) to maintain clarity at lower quality settings. 

After finding your optimal settings, click Save and choose an appropriate location on your computer. You should pick a descriptive file name that includes relevant keywords, so search engines understand your image. This drives more traffic and helps people discover your image faster. 

Website hosting and image optimization go hand in hand for peak performance. When your optimized images are uploaded to a quality hosting platform, you’ll see even better results. 

For additional performance benefits, Bluehost provides server-level caching and built-in CDN support, which improves loading speeds without compromising quality.

WordPress users can also install Smush or Imagify, two popular image optimization plugins that work seamlessly with Bluehost WordPress hosting plans. These tools reduce file sizes and enhance website performance without manual adjustments. 

How to GIMP resize image for optimal results 

GIMP (GNU Image Manipulation Program) offers you powerful image editing capabilities completely free. This open-source alternative to Photoshop provides excellent GIMP resize image tools that deliver professional results without subscription costs. 

Using the GIMP scale image tool 

Resizing your images in GIMP is straightforward with its dedicated scaling tool. Here’s how you can use it effectively: 

1. Start by opening your image in GIMP. Navigate to File > Open from the top menu, then select your image and click Open. You can also simply drag and drop any image directly into the GIMP workspace. 

2. When working with files that have embedded color profiles, GIMP will prompt you with profile options. Select Convert to use GIMP’s built-in sRGB profile for web compatibility, or choose Keep to maintain the original profile if you’re working on print projects. 

3. Access the GIMP scale image tool by going to Image > Scale Image in the top menu bar. This opens GIMP’s comprehensive resizing dialog where you’ll make all your adjustments. 

4. The Scale Image dialog displays your current dimensions and provides options for precise resizing. You’ll see fields for Width, Height, X resolution and Y resolution that you can modify to achieve your desired results. 

Adjusting DPI and resolution for print & web 

Resolution settings in GIMP help you control both screen display and print quality: 

1. For your web images, set the X and Y resolution values to 72 pixels/inch. This standard web resolution optimizes your file size while maintaining sufficient quality for digital displays. 
2. For your print materials, use higher resolution settings:  
   • Standard print: 150-300 pixels/inch 
   • High-quality print: 300-600 pixels/inch 
   • Professional photography: 600+ pixels/inch 

4. Make sure you set the resolution unit properly in the dropdown menu beside the resolution fields. Select pixels/in for standard DPI measurements. 
5. GIMP resize image quality depends on the interpolation methods you choose in the Quality section. For most of your resizing operations:  
   • Choose Cubic for general-purpose resizing 
   • Use NoHalo for sharper results when reducing image size 
   • Select LoHalo for smoother results when enlarging images 
6. The chain icon between the Width and Height values controls the Constrain Proportions feature. Keep this linked to maintain your image’s original aspect ratio and prevent distortion. If you need to deliberately change proportions, click the chain to break the link. 

Exporting your resized images in the best format 

GIMP saves your projects in its native XCF format, which preserves layers and editing capabilities. To create web-ready images after you GIMP resize image dimensions, you’ll need to export your work: 

1. After resizing, go to File > Export As to save your image in a web-compatible format. 

2. Choose the appropriate format based on your image content:  
   • JPEG (.jpg): Best for your photographs and complex images with many colors 
   • PNG (.png): Ideal for your graphics with transparency, logos or illustrations 
   • WebP (.webp): Modern format with excellent compression and quality for your web images 
   • GIF (.gif): For your simple animations or images with very few colors 
3. Add a descriptive filename that helps with your SEO and click Export. 

4. Format-specific options will appear:  
   • For JPEG: Adjust the Quality slider between 75-90% for your web images (lower values create smaller files but reduce quality) 
   • For PNG: Choose your compression level and color depth 
   • For WebP: Set your quality level or lossless compression 
5. Consider enabling the Show preview in image window checkbox to see how compression affects your image quality in real-time. 

6. Click Export to finalize and save your optimized image. 

For batch processing multiple images at once, you can use GIMP’s script-fu capabilities through the File > Batch Process feature, allowing you to GIMP resize image entire folders with consistent settings. 

Remember that proper image sizing directly impacts your website’s performance. 

Also read: How to Optimize Images: Bitmapped Graphics and Resizing 

How to compress an image in GIMP 

Compressing your images properly is essential for maintaining a fast-loading website. GIMP offers powerful compression capabilities that help you reduce file sizes while preserving visual quality. Let’s explore how you can optimize your images for the web. 

Reduce file size without losing image clarity 

Image compression doesn’t have to mean sacrificing quality. You can effectively reduce your file sizes while maintaining visual clarity with GIMP scale image and compression techniques: 

1. First, open your image in GIMP by going to File > Open. Locate the image you want to compress from your computer and click Open. 

2. If your image contains an embedded color profile, GIMP will ask whether you want to convert it to the program’s built-in sRGB profile. Choose Keep to maintain the original profile’s color accuracy or select Convert if you’re specifically optimizing for web display. 

3. Before compression, consider making any necessary adjustments to your image. You can enhance sharpness using Filters > Enhance > Unsharp Mask to compensate for potential detail loss during compression. 

4. For the best compression results, use GIMP resize image functionality first if your dimensions are larger than needed. Access this via Image > Scale Image before applying compression. 

Adjust compression levels for web optimization 

The key to effective compression is finding the perfect balance between file size and visual quality after using GIMP scale image dimensions: 

1. When you’re ready to compress your image, go to File > Export As in the top menu bar. 
2. In the Export Image dialog, choose your save location, give your file a descriptive name that helps with SEO and click Export. 

3. For maximum compression control with JPEG files, check the Show preview in image window checkbox in the JPEG export dialog. This feature lets you see quality changes in real time. 

4. Adjust the Quality slider to find your optimal setting:  
   • Quality 85-100: Use for professional photography where detail is crucial 
   • Quality 70-85: Ideal for most web images with a good balance of quality and size 
   • Quality 50-70: Suitable for thumbnails or background images where some quality loss is acceptable 
5. As you adjust the quality, pay close attention to both the image preview and the file size indicator. The goal is to find the lowest quality setting that still maintains an acceptable visual appearance. 
6. For images with text or sharp edges, maintain a higher quality setting to preserve readability and definition. 

Save in WebP format for faster load speeds 

WebP is a modern image format developed by Google that offers superior compression: 

1. To save your image in WebP format, go to File > Export As and change the file extension to .webp in the name field. 
2. Alternatively, you can click on Select File Type at the bottom of the export dialog and choose WebP image from the list of formats. 

3. When exporting as WebP, you’ll have access to additional options:  
   • Choose between Lossless compression (higher quality but larger files) or Lossy compression (smaller files with some quality reduction) 
   • For lossy compression, adjust the quality slider similar to JPEG 
   • Enable Save transparent pixels if your image contains transparency 
4. WebP typically achieves 25-35% smaller file sizes compared to JPEG at equivalent visual quality, making it an excellent choice for optimizing your website speed. 
5. Before committing to WebP, check your analytics to ensure your audience uses browsers that support this format. Most modern browsers support WebP, but some older versions may not. 

Manually optimizing images in GIMP, combined with Bluehost’s caching and CDN features, ensures the best possible website performance. This approach reduces load times, improves user experience and enhances SEO. 

Also read: WordPress Caching: How to Setup and Clear Your WordPress Cache 

Final thoughts

Properly resizing and compressing your images is essential for maintaining a fast, user-friendly website. Both Photoshop and GIMP resize image tools give you powerful options to optimize your images while preserving quality. Remember to consider your audience’s devices when determining dimensions and resolution. 

Use 72 ppi resolution for web images and aim for 640–750 px widths on mobile. Keep file sizes under 200KB when possible. In addition, use the right format for each image type – JPEG for photos, PNG for graphics with transparency and WebP for the best overall compression. 

The techniques covered in this guide will help you find the perfect balance between image quality and loading speed, directly improving your website’s performance and SEO rankings. 

Ready to put your optimized images to work on a lightning-fast website? Choose Bluehost for reliable WordPress hosting with built-in performance tools that complement your image optimization efforts. 

FAQs