March 30, 2008: Web Image Sizing Basics with The GIMP
Keeping images small means faster page viewing. To start, make sure you select the correct format depending on the image itself. For photos or true-color images, JPEG (or JPG for even shorter) is most likely the way to go. For drawings or logos with a limited number of colors or images with text, choose PNG or GIF.
Photos & True-color Images
To keep your JPGs small, start by scaling the image to the appropriate dimensions. Keep in mind that some people browse with resolutions like 800×600 or even 640×480 so if you want to place an image within text, it might not be wise to do it with images that are 500 pixels wide as it’ll leave ilttle room for text to wrap around it. A better solution is to scale the image and provide a thumbnail (small snapshot or preview) which then can be linked directly to a larger version. This way, you don’t take up precious real-estate on the main page and you make it optional for the viewer to download the larger file if they desire.
To scale an image on The Gimp, right-click on it to pop-up the context menu, select Image and then Scale Image. If the image is wider than it is tall (commonly referred to as landscape mode), you probably want to keep the width under 300 pixels. You might have more flexibility with those that are taller than they are wide (portrait mode), as it does not use up so much horizontal space. However, you then might want to make sure it is placed so that enough text wraps around it else your layout may suffer. When scaling, note that if the dimensions are linked on The Gimp’s scale dialog, changing one dimension will automatically change the other to keep the correct image aspect ratio — to do this, change one of the Pixel Dimension fields and hit the enter key.
Try not to make the image too small or it might becomes hard to see some of the detail. If the image has a lot of wasted space around the main subject (if there is one), then crop some of the surrounding region. There are several ways to do this such as resizing the canvas or layer(s). However, an easier way is to select the area you want to keep (use the Select Rectangular Regions tool and mark the region on the image), then right-click and choose the Script-Fu | Selection | To Image menu. This will open a new window with the selected region as a new image. You can then scale this new image if needed for a thumbnail that provides greater detail.
Remember that the whole point of a thumbnail is to provide a teaser of what the viewer can look at. However, in some cases the teaser might be all you need so providing a link to the larger version is just a nice option.
The last step is to reduce the JPG image quality, an option that is presented when you choose to save the file. Make sure to enable the Preview (in image window) checkbox on the dialog so the image and resulting file size are updated as you move the Quality slider. For thumbnails, the file size is probably already going to be small enough so that lower quality settings are not necessary. For larger images, play with the slider until you find a happy medium between the resulting quality and file size. You should notice severe degradation if you bring the quality setting too low so don’t go too crazy. To be honest, most of the time I don’t bring this setting below 75%.
Icons, Logos, Buttons and other Low-Color Images
Since The Gimp for windows does not support the GIF format unless you’re in a country outside of the US or have a unisys license, I’ll only cover PNG as the format for saving logos, icons, or any image that uses less than 256 colors (photos usually do not fall in this category). Keep in mind that in some cases JPG might give you a smaller final size than PNG or GIF with low-color images — however, JPG can be really bad for images with sharp edges like anything with text, outlines, etc. because of the way it compresses the data. Still, you may see the resulting file size and think it is good enough while PNG may give you a much better bang for the buck.
The biggest trick to reducing file size when dealing with a low-color image is playing with its color palette. Depending on the format, image palette information is stored in either RGB or indexed mode. In RGB mode, each pixel is stored via its red, green, and blue components. In indexed mode, a list of available colors is stored and each pixel stores the position of a color in the list. Generally, indexed palettes have a limit of 256 colors max., but this limit can be set all the way down to 2, thus reducing the overall size of the image because of the limited palette.
When opening a JPG file or when creating a new file from scratch, The Gimp defaults to RGB mode which means it practically can have as many colors as you want. However, to save an image in GIF format (if available), its palette must be converted to indexed mode. JPG and PNG can use either so no conversion is necessary, although this is what you may want to do to reduce its file size.
When a palette is converted from RGB to indexed mode (Image | Mode menu), the maximum number of colors must be specified. The Gimp then tries to build a palette of the colors used by the image. If the image uses more colors than the palette can hold, then some of them are approximated by using entries in the palette that are close to the original. You can also use dithering to approximate colors but in some cases you might want to have it turned off as it causes spotty images (it all depends on the image itself).
Once the palette is converted to indexed, the image will potentially look very different. You should be aware that if there are gradient color changes in an image, an indexed palette might not be the way to go as gradients can required a lot of colors. In these cases, you might be better off with the original palette and instead play with JPG and PNG quality settings. Lastly, you should know that if you change the palette from RGB to indexed mode, changing it back to RGB won’t restore the original palette but rather limit it to those that were in the indexed palette.
The effects of reducing the palette size on an image with gradient colors. The top-left image (4,499 byte PNG) was saved with a 256-color palette; the top-right (2,712 byte PNG) was limited to 64 thus causing the color bands; the bottom one (5,946 byte PNG) was also limited to 64 colors but with Floyd-Steinberg dithering enabled. Note that gradient colors are also visible on the edges of its shadow.
Remember to always save the original in XCF (Gimp native) format so all the layer information is saved. Don’t overwrite the original file unless you are sure you want to keep all the changes you have made.