Image Manipulation with GIMP

It can be disappointing when we have a set of images to use in a web page or mobile app but they have a background colour which leaves an unwanted rectangular border or background, instead of cleanly merging with the page background.  GIMP (GNU Image Manipulation Program) can help us with manipulation of these images to allow the transparency needed for the image to merge seamlessly with the page barkground.  GIMP is a powerful image editor with capabilities and output quality similar to the popular but expensive Photoshop program.

In this article we will take a JPG image with a white background and convert it into the PNG format with "Alpha" channel transparency. The first section of the article takes us through the process for converting, resizing and exporting an  individual image.  The second part of the article extends this with use of a great batch process plugin, BIMP,  which handles multiple procedures with a batch of images and allows us to save the procedure for future use.

The programs are freely provided by their respective authors and if you find them useful, please check their websites and donate for their continued development.

Adding transparency, resizing, and converting to PNG format with GIMP

1. Select image (This example uses a JPG with white background)
2. Add Alpha channel from the "Layers / Transparency" menu ( the available channels can be seen in the Layers/channels box)
3. Add color to alpha from the "Layers / Transparency" menu (White was selected in this example)
4. Resize image to needed size with "scale image " from the "Image" menu
5. Convert / Save to PNG with "Export as.." from the "File" menu  (either select "PNG" from the extensions box or simply type "png" as the filename extension.

[fslideshow:7 width:600 height:0 delay:10 border:1 align:auto src:disp link:1 title:top Manipulating images for transparency, size an format with GIMP]

1. Install BIMP plugin if not present
2. Open Batch procedures menu
3. Add images (or folder)
4. Add first procedure (use "Change Format and Compression" - to convert to PNG in this example)
5. Add second procedure ("Resize" image in this example)
6. Add third procedure (use "Other GIMP procedures" and search for "alpha" - select "ColortoAlpha" )
7. Select output folder
8. Run (Apply) the batch procedure
9. Save the batch procedure for future use

[fslideshow:8 width:600 height:0 delay:10 border:1 align:auto src:disp link:1 title:top GIMP batch process using the BIMP plugin]

[tag image gimp bimp]