Surely the single most important thing you can do to improve the speed at which your web pages load is to reduce the filesize of your images. The slower the connection, the more important it is. Even those users with ISDN and T1 links are subject to "net-lag", or bottlenecks within the backbone of the Internet itself. Are there other things we can do? How effective are they?

Do your homework. When you want to push the limits, you're going to end up alienating some of your potential audience. Check out the Browserwatch link at the bottom of the page. Educate yourself and become aware of what hardware and software people are using before simply stating "Best viewed with Netscape v2.0."

The use of interlaced GIFs and Progressive JPEGs doesn't improve download speed or layout speed at all. They simply present the user with a full-size, lower quality image sooner than the standard method of display. So, when do we use these schemes, and when don't we?

I can think of no strong, objective reason to not use them. As I have mentioned earlier, I find the GIF interlacing schemes somewhat unattractive and the progressive JPEG display more appealing. If you are very concerned about the initial quality of the display of your image, you may want to avoid these features. However, you should consider that the viewer tends to feel that the download takes longer, becasue he/she has no idea what lies at the bottom of the image until it finally arrives. Sometimes, I spend hours searching the Internet for a particular type of image, and I sure wish that more people had used interlacing, because I would know much sooner that the image was or wasn't what I was after. Also, to put it quite simply, some people just don't want to wait. The progressive display scheme is more entertaining, and may therefore keep the viewer's interest in the page.

For small, fast-loading images, it probably doesn't matter anyway. If the image data arrives faster then the browser can render the individual passes, the browser will usually skip one or more of the passes and just display the final image.

While each save of your JPEG image results in further and further image loss, GIFs can be saved over and over with no degradation in quality. If JPEGs are to be used, then a lossless format should be used throughout the editing process and eventually archived. Never erase the original. Export the image to JPEG with a carefully chosen compression prior to posting on the web.

This is sort of obvious. If your viewers' browser (cache) is properly configured, it can display your images over and over, from page to page, without having to re-download it. That's pretty quick and efficient.

Anti-aliasing is the technique used to help eliminate the "staircase" effect resulting from dissimilar, adjacent and contrasting colors. It is especially apparent in text and angular lines or edges. The anti-aliasing operation blends the two adjacent, dissimilar colors with a gradient that is usually one to three pixels wide which "smoothes" the edge. The operation can be very effective, and should be used whenever possible. The problem with anti-aliasing is that it typically adds to the number of colors used within an image. Anti-aliasing is rarely found or required in JPEG images, because the content of images that lend themselves to the JPEG format usually do not contain subjects which require it. So GIFs are more often associated with anti-aliasing, and we tend to want to minimize the number of colors in these images.

I rarely create a GIF image with less than 4 colors, because it leaves no room for anti-aliasing. A two-color image can be quite effectively anti-aliased while adding only two additional edge-blending colors, but it can take a lot of work, sometimes manual labor, to maintain effective anti-aliasing at the 4-color level. 16 colors is plenty for blending two to four colors in a single image, and since 4-color and 8-color GIFs are not supported by many graphics programs, especially those with powerful anti-aliasing tools, you could make a case for sticking with 16 colors whenever anti-aliasing is important. In short, be aware of the effect that anti-aliasing has on the number of colors in your image, and in turn, the filesize. (If your browser doesn't support re-sized images, don't forget to view these images externally and zoom in yourself.)

A point that should be made is that a transparent GIF can't anti-alias against a background: you need to know which two colors you're blending between. For example, if one took the black-on-white anti-aliased example shown above and made the white background transparent, the image would look bad against a red background, because the edges of the text would still show as shades of gray, rather than the black/red mix that'd be needed. GIF can't deal with this problem because it only has transparent and not-transparent. Some newer formats, such as the upcoming PNG standard, can solve this problem by using "partially transparent" pixels.

This technique, similar in many ways to interlacing, uses Netscape's LOWSRC attribute of the IMG tag. This allows you, the HTML programmer, to specify a low-quality, faster-loading image for inital display, and then, after the entire page has been loaded, Netscape will go back and get the high-quality versions of each of those images which used the lowsrc attribute. This is quite different from interlacing, which still requires each image to be downloaded before another new task is begun.

Let's assume that your browser is configured to handle four communications tasks at one time, and there are ten images in the page. Interlaced or not, the images will take the same amount of time to download, and after the HTML document and one of the first three images have been downloaded completely, then another task is assigned to the next image, and so on. Using the LOWSRC attribute, Netscape can begin loading the remaining images as soon as the low-quality versions have been downloaded, which results in the entire page being laid out, complete with low-quality images, much sooner than is otherwise achievable. After the entire page is downloaded, Netscape starts requesting the high-quality versions of those images, and begins replacing them four at a time.

So, the LOWSRC attribute can improve page layout time, although it appears initially with lower quality images. When very highly compressed JPEGs are used for the low-quality image, this quality is almost always better than the first scan of an interlaced GIF. The downside is that the total number of bytes transmitted using LOWSRC is going to be higher, and therefore, it's going to take longer to get to the highest-quality display of your page. Here's a demonstration of the LOWSRC attribute at work.

This is, at least, the intent of the LOWSRC attribute, but you can load anything you want for either the low-quality or high-quality images, and they can be of any quality you desire. Some pages use this syntax to replace the preliminary high-quality image with a second, entirely different high-quality image, resulting in a uniquely dynamic page.

Most browsers are able to maintain more than one "connection" to a web server at a time. This means that the browser is receiving multiple files simultaneously. The first file to begin downloading is the HTML file. As this file is being downloaded, JPEGs and GIFs are also being downloaded, usually four at a time. By the time all the images have been transmitted, the HTML file has long since finished, yet unless the browser knows in advance how much page space to leave for these images, it has to wait until every image has at least begun downloading in order to complete the text layout of the HTML file.

Most popular browsers support the height and width attributes of the IMG tag. These attributes are used to tell the browser how much space to leave for each image before it has even begun to download them. The result is that the user can begin to read the text of the HTML file or even click-out to a link contained within the file much earlier than he/she would if the height and width attributes were not specified.

Not only is it simple and easy to do, it represents one of the most effective performance enhancements one can apply in HTML programming. So always, always, always specify the height and width of each image used in your page. With browsers such as Netscape and Explorer, these attributes can also be used to resize images. Remember the JPEG compression sample blow-ups? The actual images transmitted were only a fraction of what they would have been if I had blown them up ahead of time and transmitted them that way. By letting the browser perform that function for me, I saved a few minutes of download time.

Many browsers will accommodate your HTML errors without displaying your screw-ups, but some don't. Don't assume that your HTML tags and attributes are properly arranged just because the page looks fine with your browser. Use the HTML validation services to check your code for illegal syntax and such. These services can also help you determine browser compatibility by seeing which versions of HTML your code conforms to. The lower the level, the greater the browser compatibility.

• JPEG
  • JPEG Image Compression: Frequently Asked Questions by Tom Lane
  • Introduction to JPEG (from comp.compression FAQ) by Tom Lane, (technical)
• General
  • World Wide Web: Frequently Asked Questions by Thomas Boutell (see "Authoring web pages, images and scripts" section).
  • Victor Engel's No Dither Netscape Color Palette by Victor Engel

ReaCompressor for Windows

Shareware. Advanced JPG/GIF/PNG/TIF image compressor. By showing an image in your own settings and desired quality it helps you better optimize an image and make the right decision on it's format, quality and size.

ReaConverter Pro for Windows

Shareware. Advanced image converter between 24 graphic formats in a batch mode. You can combine the batch conversion with image editing. A command line utility allows you to process image files in console mode.

Paint Shop Pro for Windows

Shareware. An all-around great graphics editing, viewing and conversion package. Supports GIF87a (interlaced and non-interlaced), GIF89a (interlaced and non-interlaced), GIF color depths of 2, 16, 32, 64, 128, 256 colors, JPEG (compression range 1-99). Simplest, most intuitive user interface around. Supports external filters, too.

Graphic Workshop for Windows

Shareware. Supports GIF87a (interlaced and non-interlaced), GIF89a (interlaced and non-interlaced, transparency), GIF color depths of 4, 8, 16, 32, 64, 128, 256 colors, multiple-image GIFs, JPEG (quality range 1-100), progressive JPEG. Strong dithering tools. Strange interface.

GIF Construction Set for Windows

Shareware. Dedicated to GIF header, control block editing for multiple-image GIFs. A must for creating GIF89a animations. Supports GIF89a (interlaced and non-interlaced, transparency). Easy to use.

© Douglas E. Gray.

---

You can convert RAW, JPG, GIF images, prepare photos for the web with ReaJPEG - batch photo editing software and raw converter.