As a developer, manipulating images is something I need to do very often, but surprisingly many developers are intimidated by graphical tools and defer this quite simple task to "more artistic types". But the manipulations generally performed are simple mathematical transformations, and so artistic ability is not required (which is good thing as I have absolutely none). I usually use the GIMP to perform these functions.

Image resizing

This is the most common manipulation I do to images. Digital cameras for example produce very high resolution images, that are not appropriate to send by email or display on the web.

GIMP Firefox 2 Your browser
Putting large images on web pages for example has 2 disadvantages. The obvious one is slower downloads for visitors, and increased resource usage on their machines and your servers. The second is that most browsers scale images very badly and don't apply any interpolation techniques, as can be seen here. The image on the left was resized in the GIMP with default settings, whereas the others have higher resolution and are being resized by the browser.

While the default interpolation algorithms in the GIMP work well, one can use more sophisticated techniques to scale digital images. One situation where the GIMP algorithms don't work well is when downsampling screenshots or more generally computer generated images with detailed vector content prone to aliasing. Imagemagick has some great info on image resizing issues and techniques, and after some experimentation I determined that the catrom filter is best for shrinking screenshots et. al. which I use like: convert -filter catrom -resize '600x>' orig.png smaller.png. Note pngcrush is useful also as `convert` tends to not compress the png data well.

Cut and Paste

There is a lot you can do with cut and paste, so it's worth getting to know the various selection tools available in the GIMP. For example I created the "tux stout" logo below in a couple of minutes by cutting the head off the pint and pasting it onto the tux image. The main technique here is that you can resize the pasted layer (the head of the pint) independently of the main image, by selecting "Scale Layer" in the "Layer" menu. Also ensure the images are in "RGB" mode so that there are no "jaggies" introduced when resizing.
+=

Image enhancement

Recently I needed to highlight some images for a web site I was working on. Highlighting the rather dull image as shown turned out to be quite simple using the GIMP when one understands how layers are used and can be combined. The steps involved were:
  1. create another transparent layer and call it "light"
  2. set layer mode to dodge
  3. select gradient tool
    • normal mode
    • radial shape
    • white foreground, black background
    • drag from top-center to middle
    • set addition mode
    • drag from bottom-center to middle
  4. Adjust the brightness of the light layer to taste

Further Information

Getting to know graphical tools is becoming an increasingly important skill for any developer, and has the added advantage of both being very rewarding and quite simple, especially given the many tutorials available. There are lots of functions available in the GIMP worth exploring and they're fully automatable. There is even a maze solver included :)
© Jul 31 2008