How to Prepare Images for Web Sites using GIMP

If you wish to use digital images on your web site, they must be processed before they are "web ready." In many cases, the file size of a photograph taken with an average digital camera will be large, and will cause an obvious delay in page loading time on a web site.

A popular program used for image manipulation is Adobe Photoshop, but unless you're someone who frequently works with graphics, especially professionally, this may be too costly of an investment for you. However, thanks to the fantastic open-source software community, a non-cost alternative is available to one and all. GIMP (GNU Image Manipulation Program) is a powerful program, distributed in Windows, Mac OS and Unix formats, that can do many things, including the simple tasks of cropping and sizing photos in preparation for use on the web pages.

If you use a Mac computer, you may want to check out this tutorial about using iPhoto to size your photos for the web.

This tutorial will guide you through how to prepare images for your web site or online store. First, we'll explore some fundamentals of images for the web, then we'll move on to obtaining the GIMP and getting started with it by learning how to crop and size images.

Fundamentals of Web Images

A digital photo or graphic is a file comprised of bits of information arranged in certain formats that programs understand to display in a certain way. Just as any other digital file, the size can range, from a small number of kilobytes to a hefty number of megabytes. The smaller the file size, the faster a file that is being called to a web page loads; therefore, we want to have our images for the web as small in file size as possible without sacrificing image quality.

Digital images come in various formats such as jpg, tiff, gif, png, psd. The preferred formats for web use are jpg and png. You will want to save any image you wish to use on a web site in either of these two file formats. The png format is capable of handling transparency, but generally yields a larger file size than the jpg format. If you don't need any transparency in your image, jpg is the recommended format.

Images will also need to be a certain size in pixels in order to display correctly. This is our image size. A common size for the header image for a web site would be 900 pixels wide x 200 pixels high at 72 ppi (pixels per inch.)

Depending on the task, digital images require certain resolutions for certain tasks. To print a large sign or banner, a printer may request you submit your digital artwork at 600 ppi. Most small format printing looks good with artwork and photos at 300 ppi. For the web, the universally accepted resolution for graphics is 72 ppi.

A very common width for web site layouts is 900-1000 pixels. So, you can imagine that if you had a web site with a header area, a left-hand navigation column and a right-hand content area, that photos you enter in that content area couldn't be wider than about 700 pixels. Where you want to place the photo and for what it will be used are considerations for what size to make your photo.

Luckily, images can be made to display either smaller or larger than actual size using CSS, so one has some flexibility in deciding how to size images. For this reason, when preparing product photos that will be used for a close-up view, I size them to 800 pixels maximum on the longest side of the image. That way, the same image can be used for thumbnail, medium size, and large photo, sizing them for the layout once they get to the browser using CSS.

Obtaining and Installing GIMP

First, download the proper version of GIMP for your operating system. For Mac users, you can skip that first link and use this one to get to the download page for GIMP for Mac.

GIMP installs like most other programs. Just follow the prompts that your operating system gives you and seek help from links on the pages from which you downloaded the program.

When you first open GIMP, you'll see that there are a bunch of little boxes that show various tools and options, as well as a main window with a menu across the top that includes: File, Edit, Select, etc. Get to know your GIMP by exploring those menus and reading the GIMP Documentation.

How to Open an Image in GIMP

  1. From the main window, navigate to File >> Open. Browse the file system on your computer to find the image and click "Open."
  2. Protect your original image from mishaps by navigating to Image >> Duplicate. You can now close your original image and preserve its integrity from your image manipulation pursuits.
  3. Save the image. Go to File >> Save and browse to the location you wish to deposit your web ready image. Select a name for the image at this point. It is good to avoid using spaces in files that will be called for web sites, so a good name would be "product-001.jpg"
  4. A dialog box will appear. For Quality select 85%. Expand the Advanced Options by clicking the triangle and make sure there is a check in the "Optimize" box. The other settings are probably fine with whatever comes up as default.
  5. Your image is ready to get ready!

How to Crop an Image in GIMP

  1. Locate the GIMP Toolbox Dialog Box. Find the Rectangle Select Tool (the icon looks like a square window) and select it.
  2. Locate the Toolbox Options Dialog Box. If you cannot find it, you can force it to display by navigating to Windows >> Dockable Dialogs and selecting the dialog box you wish to have on your screen.
  3. To crop an image freehand, put your mouse over the image with the Rectangle Select Tool active. You'll see crosshairs. Select the part of the image you want to keep by starting at a corner of the proposed area, clicking and holding, and dragging the rectangle across the area. When you have the area you want to keep, let go of the mouse and you'll see the selected area with the "marching ants."
  4. Navigate to Image >> Crop to Selection. This will discard the part of the image outside of the selection.
  5. To crop an image in a specific shape, there are options to explore by playing with the Rectangle Select Tool Options. As an example, I will illustrate how to crop in the shape of a square. In Toolbox Options, check the box next to "Fixed:" and select "Aspect Ratio" from the drop-down menu. In the box directly below enter "1x1" (without the quotes.) Then go to your image an select your square area. The tool will now keep the shape of a square as you drag.
  6. Navigate to File >> Save to commit your changes.

How to Size an Image in GIMP

Let's assume we take the square image we just cropped and finalize our preparations to use it as a product photo on our e-commerce store.

  1. We're going to make our square product photo 800 pixels on all sides. Navigate to Image >> Scale Image.
  2. A new dialog box will emerge. In the Image Size Width box, enter 800. The height will automatically adjust to 800 as soon as you exit the Width box.
  3. In the drop-down menu to the right, make sure that "pixels" is selected.
  4. In the box next to "X-Resolution" enter 72.00. The Y-Resolution will update to match when you leave the box.
  5. Next to "Interpolation" select either "Cubic" or "Sinc."
  6. Click Scale. This will change the size of your image. If it gets too small to see you can navigate to View >> Zoom >> 100%. Another neat View aid is View >> Shrink Wrap, which removes excess dialog box space around the image or expands the window size to fit the image if possible.
  7. Navigate to File >> Save to save the current version of your product image, cropped and sized for use on the web.

As you get more proficient with the GIMP, I hope you have fun exploring other features of this amazing program! And remember, you can always Edit >> Undo!

More Tutorials

Kerry Shamblin Photography