Image Editing

Getting a grasp of all those file formats and manipulating images for the web is easier than you may think. Below we offer a super-simple tutorial on how to resize a picture in GIMP.

Before you get started, though, take a look at What You Need to Know Before Preparing Digital Images for the Web. This handout covers the essentials everyone working on the Web needs to know before posting photos and other fat files, starting with the golden rule of digital anything: Always save a copy first.

Once you’ve got the idea, continue on to our 10-minute tutorial on resizing images (below) for the Web with GIMP.

More image references:

Web Style Guide’s Comparison of gif, jpeg, and png files
Web Style Guide’s primer on browser-safe colors
Free Image Editing Software for Windows
Wikipedia: Image editing
Wikipedia: Comparison of graphics file formats

Tutorial

The GIMP animal, Wilbur

GIMP stands for the GNU Image Manipulation Program.

It is a free, open-source software package for manipulating digital images. It is powerful and has many of the same features as the more expensive, proprietary Photoshop package has.

You can download an installable version for Windows. Be sure to download and install the Help files, too. The Help files, alas, are not available in Arabic, but there are versions in Dutch, English, French, German, Italian, Korean, Norwegian, Russian, Spanish, and Swedish.

Once you’ve downloaded the files, double-click the installer for each.

You should now see GIMP in your All Programs list and a shortcut icon on your desktop. Double click the icon to open GIMP.

Simple Image Resizing

Click on File -> Open, and select an image to resize. (In our workshop it’s IMG_1276.jpg, a picture of the Hungarian parliament building taken on the Buda side of the Chain Bridge that spans the Danube.)

Maximize your image and click on the GIMP window bar to bring the palettes forward.

Go to Image -> Scale Image. A window will pop up that looks like this:

Scale Image dialog box

Image size refers to the actual size of the picture in pixels and a variety of other dimensions.

X and Y resolution refers to the number of pixels per inch, and the shape of the pixels. When the two values are equal the pixels are square. 72 dpi (ppi) is the maximum resolution needed for on-screen viewing.

Interpolation is the process by which intermediary values are calculated when you enlarge or transform an image. You can find a detailed explanation of this and other features in the GIMP glossary.

Click Scale when you have entered the dimensions you want.

The image will get smaller on the screen. Hit the 1 key or go to View -> Zoom -> 1:1 (100%) to see the actual screen size of the image. Evaluate it for artefacting or noticeable pixelation. There shouldn’t be much, because the resolution here is 72 dpi and the image is smaller than the original.

Here’s the image at 100 percent.

The file at actual size, 300 x 225 pixels

If you’ve made all the changes you want, go to File -> Save As.

Save As dialog box with extensions showing

Click the plus sign (+) next to Browse to locate the folder you want. Click the plus sign (+) next to Select File Type (By Extension) to save as a JPG or other file type. Click Save.

Saving As a jpeg, with naming convention and extension pointed out

Another box pops up to let you set the Quality of the JPG. Move the slider bar while looking at the image in the viewer window to reduce the file size more while avoiding artefacting. Saving as different file types will result in different fine-tuning options.

Save As dialog with Quality slider bar

Click Save to finish the process.