If you’re building a website and want it to load fast, one of the biggest culprits behind slow page speeds is oversized images. In this tutorial, we’ll walk through exactly how to crop, resize, and compress an image using GIMP (GNU Image Manipulation Program) – a completely free image editing tool – so your images load quickly without sacrificing visual quality.
Why Image Optimization Matters
Before diving into the how-to, let’s look at the problem. In the example used in this tutorial, we start with a photo of a car’s steering wheel against a blue sky. At first glance, it looks great – sharp and high quality. But when we check the file details:
- File size: 6.1 MB
- Dimensions: 3,464 x 3,464 pixels
- Resolution: 300 DPI (standard for photographed images)
That’s a massive file for a website. Uploading an image this large will slow down page load times significantly, hurting both user experience and SEO. The goal of this tutorial is to take that 6.1 MB image and shrink it down to a fraction of its size — while keeping it sharp enough to look great on screen.
Step 1: Download the Tools You Need
You’ll need two free tools:
- GIMP – a free, open-source image editing program (available for Windows 10 and 11, with Mac versions available via a quick Google search). Download it from the official GIMP website and grab the user manual if you want to dig deeper into its features later.
- Measure-it – a lightweight browser extension (available for Firefox, Chrome, and Safari) that lets you measure pixel widths directly on a webpage.
Installing GIMP is straightforward – download the installer for your OS and follow the on-screen prompts. The Measure-it extension installs just as easily through your browser’s add-on store; once added, you’ll typically need to restart your browser to activate it.
Step 2: Figure Out the Exact Width You Need
Before you touch your image in an editor, it’s important to know the exact pixel width your website needs. Guessing leads to images that are either still too large or awkwardly stretched.
Using the Measure-it extension:
- Click the extension icon – your webpage will gray out and a crosshair cursor will appear.
- Drag the crosshair across the space where your image will go (for example, aligning with a heading or block of text).
- Note the pixel width Measure-it reports – in this tutorial’s example, that’s 660 pixels.
Don’t worry about calculating height manually. As long as you lock the aspect ratio during resizing (more on that below), the height will scale proportionally on its own.
Write down both numbers – your target width (660px) and your original image width (3,464px) – so you have them handy for the next step.
Step 3: Open and Crop Your Image in GIMP
Open GIMP and load your image either by:
- Dragging and dropping the file directly onto the canvas, or
- Using the Open tool to browse to the file.
Make sure both the Toolbox and Layers panels are visible (Windows → Toolbox, and Windows → Dockable Dialogues → Layers). You’ll only need one tool for this step: the Crop Tool.
To crop out unwanted areas (like excess sky in our example):
- Click and drag across the image to define your crop area.
- Starting your drag from outside the canvas edge ensures you keep the full width while trimming only the top or bottom.
- Adjust the crop box edges by hovering near them until a resize handle appears, then drag to fine-tune.
- Press Enter to apply the crop.
The highlighted area is what stays; everything outside the highlight gets removed.
Step 4: Resize the Image to the Correct Width
Even after cropping, your image is likely still far too wide for the web. To fix this:
- Select your image layer in the Layers panel.
- Go to Image → Scale Image.
- Make sure the chain/link icon between width and height is enabled – this locks the aspect ratio so your image doesn’t get squashed or stretched.
- Enter your target width (e.g., 660 pixels) – GIMP will automatically calculate the correct height for you.
- Change the resolution from 300 DPI to 72 DPI (the standard for web display – 300 DPI is meant for print, not screens).
- Click Scale.
Your canvas will appear tiny at this point – that’s just your zoom level. Set the zoom to 100% to see the image at its true web-ready size.
Step 5: Export and Compress the Image
This is where the real file-size savings happen.
- Go to File → Export As.
- Choose JPEG as the file format.
- Rename the file (e.g., add _compressed to the filename) so you don’t overwrite your original high-res version.
- Click Export – a quality settings dialog will appear.
- Check “Show preview in image window” so you can see exactly how compression affects the image in real time.
Here’s what happens at different quality levels in this example:
| Quality Setting | File Size | Visual Result |
|---|---|---|
| 0% | 5.6 KB | Heavily pixelated — unusable |
| 100% | 207 KB | Excellent quality, still large |
| 70–80% | 43.5 KB | Great balance — barely noticeable quality loss |
The Results: From 6.1 MB to 41 KB
After cropping, resizing, and compressing, the final exported image checked in at just 41 KB – down from the original 6.1 MB. That’s roughly a 99% reduction in file size, with the image still looking crisp and professional once placed on the actual website.
Key Takeaways
- Always check your original image’s dimensions and file size before uploading anything to your site.
- Measure the exact pixel width your layout needs before resizing – don’t guess.
- Lock the aspect ratio when scaling to avoid distortion.
- Drop resolution to 72 DPI for web images – 300 DPI is print-only and adds unnecessary file weight.
- Export as JPEG at 70–80% quality for the best balance of file size and visual quality.
- Never overwrite your original file – always save compressed versions under a new filename.
Following this simple workflow ensures your website images load fast, keep visitors engaged, and don’t drag down your site’s performance – all using free software.
