Gimp image editor

Gimp image editor

This article contains important information about using images on your web site.

The free Gimp image editor is a useful tool for editing images. Here are some of the tasks you will use this free editor for while buliding your web site:

  • Resizing images to make them smaller and faster to load. – Important tip: Large images will make your web site slow to load and may turn away potential clients.
  • Adding images to articles – resizing before uploading into aritlce.
  • Adding images to image gallery – resizing before uploading into gallery.
  • Touching up stock images and adding effects.
  • Adding images to your shopping cart.

Download free Gimp image editor

  • Download and install Gimp from www.gimp.org/downloads
  • Start Gimp and change the following: In the Gimp menu, click “Windows”, then click “Single-Window Mode” – This mode is easier to use when editing images.

What images should I work with?

Most images used today are .jpg images. This image format can store high detail images (image file is large) and also very low quality images (images sizes are smaller). You should always try to work with .jpg picture files.

Another popular image format is .png – This format is popular in that it allows one to create a transparent background. Usefull when switching web site colors as the transparent background will match the web site color. E.g. a company logo.

As a general rule, we suggest that all images should be a .jpg image unless it requires a transparent background. The reason is that we generally find that .jpg images allow for smaller file sizes (less for web site to load making web site faster).

Understanding file sizes

Before moving onto the image resize section, it is important to get a feel for image file sizes. In the example below you will notice 4 images. The “sample” image is 1233KB and the other images slide 1 – 3 are all approx 50KB each. A 50KB .jpg image is a good size. These images are used on our websitebuilderonline.com web site and are of descent quality but at the same time have a small file size. Important: Your goal is to achieve as small of an image file as possible, while retaining enough quality in the image so that it does not look grainy.

A file size of 1233KB which is equal to 1.233MB is generally too large for most web sites. You would only want a picture this size if you need to display a high quality picture from an image gallery.

We generally stick to file sizes between 5KB to not more than 400KB for most of our web sites. Most of our images (90% of them) are not larger than 100KB. If your images generally range between 35KB – 60KB, then you are doing a good job at resizing! – With this in mind, you now see that 1233KB is very large for a web site page. If you have two of these large images on one page, you can quickly see that you will run into slow page load times.

image-sizes

To view the file sizes of your images, open Windows explorer file browser, then look for the view icon – See example below: 

resize-images-windows-view-menuClick the “Details” option to see the file “Size” column as shown above in the files sizes image list.

resize-images-windows-view-menu-select-details

How to identify image dimensions 

  • Load Gimp by double clicking the Gimp icon: gimp-icon
  • Go to Image->Canvas Size. Look at the “Width” and “Height”.

The following sections describe the most commonly used tools when using the Gimp image editor.

Tool: Image->Canvas Size – Increase or decrease canvas size

This tool is located in the menu: “Image->Canvas Size”. It can be used to increase and decrease both the width and height of your image. This does not scale the image – E.g. It does not stretch the image.
Usage: Assuming you have an image with a width of: 590. If you would like the image width increased to 600. You can use this tool to do this.

Tool: Image->Flatten Image – Consolidate image layers 

This tool is located in the menu: “Image->Flatten Image”. The Gimp image editor uses layers to represent images. You can visualize this like a stack of pages on top of one another. These layers can make editing in the tool a little frustrating for beginner users. Use this tool to remove all layers and merge them into one layer thus making it easier to edit the image.
Usage: If while working with your image you get too many layers (you can see the layers when you have selection rectangles or squares that do not go to the edge of the image), then use this tool. You can also use this tool if you find that changes you try to make to the image are not taking effect. The cause of this is that you are most likely editing the wrong layer.

Tool: Image->Scale Image – How to resize an image with Gimp

This tool is located in the menu: “Image->Scale Image”.

IMPORTANT  Please spend some time getting familiar with this tool. It is extremely important to resize web images. Resizing images is something you will need to do whenever you are adding images to your web site.

Important image resize tip: The general rule for resizing images: Make the image as small as possible without the picture quality apperaing too low when viewed on the web page. If you stick to this simple principle, your images will be as small as you can get them.

  • Load Gimp by double clicking the Gimp icon: gimp-icon
  • Open your image from Gimp, go into Gimp menu: “File”, then “Open”
  • Once image is open in Gimp, in the menu, click “Image” then click “Scale Image…”
  • Click the drop down to select %, then enter 50 in the “Width:” field, then hit the “Enter” key on your keyboard. Your screen will now look something like this:

gimp-scale-image

  • Click the “Scale” button.
  • If the image looks too small or too large, in the menu click “Edit”, then click “Undo Scale Image” – This will put the image back to its original size.
  • Continue to repeat the above steps but try a different scale percentage each time until you are happy with the image size.
  • Once you are happy with the size as displayed within Gimp editor, its time to export the image and check the file size
  • In the menu, click “File” then “Export”.
  • Enter the file name and make sure you put a .jpg file extenstion at the end of the file name to tell Gimp what file type you want to save your image as, then click the “Export” button – See example below:

gimp-export-image

  • A window will pop up requesting what quality you would like the image saved as. We always leave this at 90.
  • Then click the “Export” button.

gimp-export-image-quality

  • Open up Windows file explorer and check the file size. Ensure that the file size is acceptable as explained in the “Understanding file sizes” section. if the file size is not acceptable, repeat the image resize steps and adjust the scale percentage.

An example where an image needs to be re-sized to specific dimensions

Important: If you work through this example, you will get a good feel of how the various tools explained above can be used together to achieve a desired result.

Example:

You have an image with the following dimensions: 590×273 px (pixels). You need to resize this image for your shopping cart because you need all the image dimensions to be the same across all products. All other images in your shopping cart are 500×375.
The steps below will show you how to correctly resize your image to 500×375 for your shopping cart:

  • Open the image in Gimp
  • Your original image is too wide (590) and you need it to be 500 pixels.
  • Click “Image”->”Scale Image”.
  • Enter the width as 500. You will notice that the height changes automatically to 231. – This is the correct way of scaling to keep the image proportional.

gimp-image-example1

  • Click the “Scale” button.
  • Your image now satisfies the correct width of 500. Now you need to get the image height to 375.
  • Click “Image”->”Canvas Size”, then enter the height of 375. Make sure that the chain icon shows as a broken chain (So that the width is not automatically calculated) – We want the width to remain as 500 pixels.

gimp-image-example2

  • Click the “Resize” button.
  • You will now have two layers on your image.
  • Flatten the layers: “Image”->”Flatten Image”.
  • If you need to place the image in the center, continue to follow the steps:
  • Click on the rectangle icon at the top left of Gimp image editor (where all the tool icons are displayed).
  • Draw a rectangle/square around your image.
  • On your keyboard Ctrl + X to cut the image – you should notice the image disappear.
  • On your keyboard Ctrl + V to paste the image. You can now move the image so that it is centered.

How to create a transparent background

To create a transparent background, follow these steps:

  • Open image in Gimp
  • Go to menu: Layer->Transparency->Add Alpha Channel.
  • Click the “Fuzzy Select Tool” – Looks like a magic wand.
  • Click on the background of the image.
  • Select the “Del” key on your keyboard.
  • The background of the image should be checkered squares indicating that background is transparent

transparent-backgroun

transparent-background-finished