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 comprises 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 programs is called "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 color differences, it's size is reduced. By adjusting the amount of compression, you're adjusting how much different, in degree, the colors are allowed to be before the software will alter them, thus 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 will produce a highly visible reduction in the quality of the image. When you "optimize" the image, you're merely selecting the amount of compression you're willing to allow, thus you're selecting how much reduction in quality you're willing to permit. In some software the compression settings appear when you click on "Save". For example, I use a discontinued Corel software called "Photohouse" for some editing of jpeg images, and when you hit "Save" (or "Save As") you wind up with a window showing two small images labeled "Original" and "Result" (before and after as it were), and the compression is showing as "0" (zero), which, in this software, means "no compression". This software is a little deceptive too, in that the "Result" image doesn't change at all when you alter the compression value, but I've learned that, with most images, I can raise the compression value as high as thirty five (35) before the image becomes unusable.
Other software programs, like my favorite jpeg editor,
XnView requires you to use the "Save As" selection (Under "File") to access the compression settings. When you hit "Save As" in XnView, there are three buttons on the resulting window; "Save", "Cancel", and "Options".
When you click on "Options", another window opens and on that window there appears a slider labeled "Quality" with numbers one (1) to one hundred (100) appearing in a box. In XnView (and many other editors) a quality setting of one hundred represents "no compression", and experience has taught me that, for a normal image, like for example a color photograph, I can pull the compression down as far as sixty five (65) without the image appearing too terribly different, while it's file size goes down considerably.
(Options Screen in XnView)
Incidentally, always save your compressed image under another file name, so that your original image remains unaltered. This will enable you to open both images and compare them side by side, to determine if more, or less, compression is in order. My wife has worked with simple black and white "clip art" images and found that she could reduce the compression (in XnView) to as little as ten (10) without seriously degrading the image.
Every image is different, so you'll have to "play" with each image to determine the best level of compression, i.e. the best compromise between file size and quality, for that image. Most editors have the ability to open two or more images simultaneously (XnView certainly does), so I strongly recommend viewing the images side by side while you're adjusting the level of compression that's right for a particular image. By the way, XnView doesn't default to a compression level of one hundred, it remembers, and holds, the last value you used, so either reset the compression level to one hundred when you finish with an image, or always remember to check the compression setting before you save an image (and that's best done by always using "Save As" rather than "Save").
Jpeg compression is most notable in color photographs.
Here's me and my grandson Tanner.
(compression values shown are in 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
As with the previous section, you might want to open a gif image in your editor to "play" with as you read this section.
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. Any good image editor, that can open gif images, is likely to offer you the choice of "Reducing Color Depth". My editor of choice for gif images is
IrfanView. Begin by clicking on "Decrease Color Depth", under "Image".
This opens another window with three choices (selected with radio buttons), one of which is "Custom" and there's a box that permits any number you like, between two (2) and two hundred fifty six (256).
Entering a number, and clicking on "OK" will instantly apply the value you've selected to the image and if you're watching the image, you can see the effect of your selection. If you don't like the resultant image, just click on the "Undo" icon (an arrow at the top of the screen that circles counterclockwise), and repeat the process, until you find the value that best suits you.
Color Depth = 10
File Size = 2k | Color Depth = 32
File Size = 5k | Color Depth = 256
File Size = 6k |
 |  |  |
Worthwhile Additional Information
Sometimes the first step in optimizing and image is to make it smaller. Gif images can be slightly resized without problems, but I've noticed that large changes in the size of gif images often results in unacceptable distortion in the image. In order to make large changes in the size of gif images, I first save the image as a jpeg, with XnView, resize the jpeg image (per instructions given below) and then resave it as a gif image if that's the image format I've chosen (more on this below too).
Under the "Image" selection (top bar) in XnView one of the choices on the menu is "Resize".
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 also a check box labeled "Keep Ratio" that, when checked, permits you to alter the height, or width, whichever is more significant to your application, and the software will automatically adjust the remaining dimension in order to prevent any distortion in the image.
If this box is unchecked, then height and width can be adjusted independantly, which results in some strange images unless you're making very small changes. Another selection on the top bar of XnView is "Filter" and one of the choices on that menu is "Enhance". Moving your cursor to "Enhance" produces a side bar with several choices on it.
The "Enhance Focus" or "Focus Restoration" feature can often fix an image that's slightly out of focus, but, in my experience, it's a bad idea to use this option more than once on a given image. XnView's "Undo" button (also an arrow that's winding counterclockwise) permits you to toggle rapidly back and forth between the altered image, and the unaltered image (which existed before you made the most recent change) making it very easy to decide if the image has been improved by whatever operation you last selected. The "Enhance Detail" selection (another choice under "Filter"/"Enhance") is a feature I use very frequently. My experience in resizing jpeg images has been that it's very often a good idea to reduce the image by no more than 25% at a time, and to enhance the detail of the image after each reduction.
In this instance too, the ability of the undo button to toggle back and forth between the altered and unaltered image makes it easy to see if enhancing the image's detail was desireable.
Which image format is best, depends on the image. Images with many different colors, like detailed artwork or photographs, are usually best saved as jpeg images, while simple artwork, with fewer colors, will have a smaller file size if saved as a gif image. When I'm not sure, I save the image in both formats and use Windows Explorer to check and see which has the smallest file size. If the file sizes are about the same, I open them side by side in XnView and compare them visually to select which one I'll use on the web. Since most of the images used in this tutorial required only a few colors, they had smaller file sizes when saved as gif images. The exception was the two images of me and my grandson Tanner, which were both saved as jpegs in order to show you the difference compression made in the file size, which was substantial in this instance.
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.
This tutorial written and posted on November 2, 2002 by Don Crowder.
(and updated on November 15th, 2002)
