Images on this site were compressed using e-Vue MPEG4 technology in 2001, which was groundbreaking at the time for its DRM component and higher compression than JPG, however e-Vue is no more — we are transitioning these images to JPEG for 2004.
To fix this, move your mouse pointer over the image until you see the offending color appear in your info palette, then click it. You can then double click that color from the color table palette, and specify the color be the same as the other shade, and your HTML background. This removes the offending shade and the image will now have a single color backing.
The Spacer
Probably the most powerful method of Web page image optimization, is to replace as many elements on your Web page as possible with a "spacer.gif" image. This 1x1-pixel transparent GIF is a tiny file and is cached by the browser the first time it's loaded, so every time you use it thereafter it's like getting a whole bunch of free graphic content. An example of how this is used by professional Web designers, is to replace any line rules or solid color non-content areas with the spacer. To take advantage of this trick, you must have already learned how to "slice" a graphic layout into HTML in ImageReady, or similar application.
In the example ABOVE, all of the content in red would be replaced by a "spacer.gif" and HTML color instead of the graphics, which are created during the "slice" operation.
The first step is to look at your page in the browser and anywhere that you see solid color, consider it a candidate for spacing. If you have a solid gold line-rule, the process involves finding the image code in your HTML, such as <IMG SRC="images/layout1-01.gif" height="1" width="256">. Here you would change the file name to "images/spacer.gif" and the width to "1." Above the image code, there would be the table cell HTML, such as <TD height="1" width="256">. Simply add this inside of the brackets, BGCOLOR=" #FFCC00" (the HTML code for "gold").
Now, when the browser loads the page, it will fill that table cell (the "TD") with the color you've specified, and instead of loading a 1x256-pixel image, you're only loading a 1x1-pixel image. And as you duplicate this procedure throughout your page for vertical and horizontal rules, and other areas, the page loads super-fast because you're only loading one image in place of many.
This requires some experimentation, since some table cells may
be there for proper spacing of your entire layout, and, in those
cases, if you're replacing something like a 20x30-pixel
graphic with a spacer, your results may vary by setting the spacer
to either 20x1 pixels, or 1x30 pixels.
The Optimum
By using these techniques and some experimentation, you will find
that a fanatical approach to reducing image size for the Web results
in greatly improved performance of a Web site overall. Rather
than think "Oh, I'm only saving 1K," you should
be saying, "Wow, I saved 1KB." Believe me, they add
up, and your site visitors (or your clients and their visitors)
will thank you.
Christopher Simmons has been optimizing images for Web sites since the days of Netscape 1.0 and is president of Neotrope, which offers Web design and brand marketing services. E-mail him at cs@digitalauthor.com. A shorter version of this article appeared in the January 2001 edition of Micro Publishing News.
