Optimizing Images

Images used on webpages, or that you send to your friends in an email need to be fairly small files so they'll load quickly. Nobody wants to wait several minutes while an email downloads and statistics show that if your web page takes over fifteen seconds to load your visitors are likely to move on without looking at your site. If you have a website, you can test your loading speed online, free, at SiteConfidence. Bear in mind that they deliberately test your site at the average speed of wireline connections which comprise the vast majority of Internet connections. Most web designers go to considerable lengths to design web pages that work properly on all the popular browsers. Using images that have small file sizes is equally important to good web design.

The two most popular image formats used on the web are gif images (with a .gif file extension) and jpeg images (with a .jpg file extension) so these are the formats I'm going to discuss. There's been a lot of controversy over the patent rights to .gif images and there are a lot web sites which strongly recommend switching to Portable Network Graphics (which have a .png file extension), but so far there's been no legal ruling that makes it unlawful to use gif images and until there is I'm not really very concerned about it. A few minutes of surfing and checking image formats will convince you that it would be a major undertaking for thousands of websites to cease using the gif format and I'm betting it won't become necessary.

Jpeg Compression

If you open an image in your graphics editor to play with as you read this section you should be able to quickly get a grasp of the concept, but make sure the image you open is, in fact, a jpeg image with the file extension ".jpg" or you're going to get awfully confused.

The process of reducing the file size of a jpeg image without reducing it's dimensions is called "Compression" and in many software applications is referred to as "Quality". I'm not "up to speed" on the mechanics of how jpeg compression is accomplished but it has something to do with averaging out the colors. In a case where two adjacent pixels are a similar but different color the software changes them to the same color. When the file is permitted to store a smaller number of colors it's size is reduced. By increasing the amount of compression you're adjusting how great a color difference will be altered by the software A small amount of compression can make the file size a little smaller while producing no visible change in the quality of the image. A large amount of compression can produce a highly visible reduction in the quality of the image. To "optimize" the image for use on the web (or in an email) you must find the best compromise between image quality and file size. Here, for example, is my friend Huck Ledbetter:

With no compression with compression set at 65

The image on the left was cropped, slightly resized, and saved from a photo he sent me. This image is 67.3 KB (kilobytes) in size. the image on the right was saved with a compression value of 65 and is 25 KB in size. As you can see, there's no easily detectable difference in the two images yet the one on the right is considerably less than half the size of the one on the left.

In most software the compression settings are available through the "Options" button on the "Save as" dialog window.

This happens to be XnView but no matter the software,
clicking on "File", then "Save as" opens a dialog window.

Clicking on the "Options" button in Xnview,

opens a window which gives you access to the compression adjustment.

Selecting "Save" or "Save as" in Irfanview opens a dialog box

with the compression (and other) controls
shown in a smaller, adjacent window.
(If the "Show options dialog" box is checked)

In XnView and Irfanview a compression value of "100" means the image will be unaltered (saved with no compression). In most cases, with color photographs, a compression value of "65" results in a much smaller file size without too much degradation in image quality but there are no hard and fast rules. It's best to experiment with each image and let your eyes be the judge.

Some applications work differently from XnView and Irfanview. In Paint Shop Pro (PSP), for example, the compression settings are available under the "Options" tab, as with XnView,

but the settings are reversed. A value of "1" represents no compression and the numbers ascend from left to right.

This jpeg compression setting, from PSP,
corresponds to a setting of "75" in Xnview or Irfanview

It doesn't really matter which way your software works. As long as you understand which you have, and how to use it, you can produce smaller image files for use on your website or in your email.

Always save your compressed image under another file name so that your original image remains unaltered. You'll want the best possible quality in images you intend to print. This will also enable you to open both images and compare them side by side to determine if more, or less, compression is in order.

Jpeg compression is most notable in color photographs. Here's me and my grandson Tanner. (compression values shown are from XnView)

Compression = 100 File Size = 105k

Compression = 65 File Size = 11k

Setting the compression at a value below 65 resulted in very little additional
reduction in file size while producing far more visible reduction in image quality.

Gif Images - Reducing Color Depth

Gif images can consist of somewhere between two (2) and sixteen million (16,000,000) colors and herein lies the key to reducing their file size. A file that contains sixteen million separate color settings is necessarily going to be larger than one which only contains sixteen values. The concept is quite similar to jpeg compression. Permitting the file to store fewer colors reduces the size of the file and, as with jpeg compression, a drastic change can visibly reduce the quality of the image.

As always, with images, there aren't any hard and fast rules but generally speaking gif images are a good format for line drawings or artwork which uses a limited number of colors. To use as an example, I resized an artistic photo of wildflowers and saved it as a gif image with 256 colors.

The original jpeg compression = 65 file size = 20.1 KB	Converted to a gif Color depth = 256 File size = 28.9 KB
Note that the gif is considerably larger than the original jpeg and is starting to show degradation in image quality, particularly in the sky. More on this later.

Any good image editor that can open gif images is likely to offer you the choice of "Reducing color depth"but my editor of choice for gif images is IrfanView. To reduce the file size of a gif image with Irfanview click on "Decrease Color Depth" under "Image".

This opens another window with several choices you can select, using radio buttons.

I selected "Custom", set the count for "64" and saved the image (under another name of course) which resulted in this image:

Color depth = 64
File size = 18 KB

At this point, you may be wondering why I'd bother saving this image as a gif when it's only slightly smaller than the original and is exhibiting image degradation. Well, I don't know that I'd use this image for any purpose beyond this tutorial but sometimes the differences aren't quite so subtle so it's a good idea to try both formats with artwork or simple images.

Portable Network Graphics: An Open, Extensible Image Format with Lossless Compression

Portable Network Graphics, png, images are an excellent alternative to gif images. This is especially true since recent versions of Irfanview come with a plugin developed by Ken Silverman. This little utility can take a while to run (because it makes several passes in refining the image size) but it creates very nice images that are slightly smaller and higher in quality than gif images made from the same original. I've recently started using png images, created with Irfanview, in my tutorials and elsewhere on my website.

Lisa's vector art portrait
of me in jpeg format
file size = 20.1 KB

Converted to a png
Color depth = 22
File size = 5 KB

Worthwhile Additional Information

Sometimes the first step in optimizing and image is to make it smaller. Under the "Image" selection (top bar) in XnView or Irfanview one of the choices on the menu is "Resize".

Xnview at left, Irfanview at right

Clicking on this choice opens a window that gives the width and height of the image and allows you to change those values. There's a check box labeled "Keep Ratio" (in XnView) or "Preserve aspect ratio" (in Irfanview) that, when checked, permits you to alter the height or width, whichever you chose, and the software will automatically adjust the remaining dimension in order to prevent any distortion in the image.

Xnview at left, Irfanview at right

If this box is unchecked then height and width can be adjusted independantly which can result in some very strange images.

Both XnView and Irfanview have an "Undo" icon on their toolbar.

In XnView, it looks like this XnView's undo icon

In Irfanview it looks like this Irfanview's undo icon

In both programs the "Undo" option is also available under "Edit" on the toolbar but the icon is much faster and easier to use. In Irfanview, clicking on Undo simply undoes whatever was your last operation. In XnView, the Undo selection will undo whatever your last operation was but it will also redo the same operation if the Undo option is selected again. This can be very useful for toggling back and forth between an altered and unaltered image for purposes of comparison.

Sometimes resizing an image by a large amount causes the image to become a little blurred. When this happens, try resizing the image in increments of no more than about 20% at a time, sharpening or tweaking the focus very slightly after each step.

Incidentally, I'm still learning just like almost everyone else on the web so if you spot an error here or have some useful information to add to this page please use our online Feedback Form to let me know about it.

The image tools mentioned in this tutorial are listed on my "Favorite Freeware" page.

This tutorial, by Don Crowder, posted on June 20, 2004