GIMP – Image Cropping for Web

After talking to some people, I’ve decided to write up some tutorials for using GIMP. At work, I use Ubuntu, so Photoshop isn’t really an option, but I need a way to prepare photos of products for our website. For many products, I not only crop down the photo to show just the product, but I also remove the background from around the product using the path tool. This first post will just focus on cropping down an image and preparing it for a website.


GIMP Save for Web
The first step of this process is to grab the Save for Web plugin for GIMP. If you are running Ubuntu, grab the .deb from here. Windows users and users of other Linux operating systems can grab it from GIMP’s plugin site.

Image cropping
The first step is to open the image in GIMP.

Next, select the rectangle select tool.

Make a selection around the part of the image that you want to crop out, you don’t have to be exact at this point, we will adjust later.

To adjust the selection, move near any edge or corner. The mouse will change to an adjusting handle, and you can proceed to drag to the desired size. Unlike nearly any other image editing program, you do not need to be right on the line, rather anywhere in the box will work.

Once you are happy with your selection, the next step is to crop the image down. This is easily done by selecting “Crop to Selection” from the “Image” menu.

You will be left with just the selected area.

This next step isn’t required, but now is the best time to introduce it. You can easily zoom into the image using the handy zoom feature on the bottom left corner of the image window.

We are now ready to save the image for uploading to a website. At this point, the image I’m working with is too large to upload as is, but otherwise it is ready. We will now select “Save for Web…” from the “File” menu.

What we now see is the Save for Web window. On the right of this window we see the image, as it will be saved. Below that is the file size that it will be when saved. To the left, we have options of the file type, along with other miscellaneous options.

The left side of this window has two tabs. We are interested in the second one, which will allow us to resize the image. Enter the width you desire and hit tab. The preview image will change to that size, and the height will be updated to match.

Finally, when you are happy with the way it looks, hit the “Save” button, and select where you want it saved.

A side note: You will notice the cropping options in the Save for Web window under the resize options. I prefer not to use these, as when I save something, I have the size in mind that I want the saved image to be. The cropping done in this tool takes place after the resize instead of before.

The next tutorial will teach you how to remove the background from around an object of any shape or size using the path tool. If you would like to know how to do something in GIMP, leave a note in the comments and I’ll work on that for a future tutorial.

2 Comments »

  1. GIMP - Using the Path Tool » Andrew’s Home On The Web said,

    August 9, 2008 @ 10:22 pm

    […] the last tutorial, I covered the basics of cropping an image for the web. This tutorial assumes that you know what was covered in the previous […]

  2. SmuckingFart » Blog Archive » Mini GIMP Lessons said,

    August 9, 2008 @ 11:53 pm

    […] In an attempt to learn as much as I possibly can about computers, the web, and everything in between, a fellow member of the Ubuntu PA IRC channel is putting together a series of mini GIMP lessons. The lessons teach one thing at a time, but are informative. I’m sure Andrew would be interested in making more per anyone’s suggestion. Check out the first lesson hereGIMP – Image Cropping For Web […]

RSS feed for comments on this post · TrackBack URI

Leave a Comment