Special Note: You've been looking at the same, old articles and you're thinking to yourself... "When are they going to update this?". The answer? Never. Why? Because we've moved all content to Cyber Aspect. What? You haven't checked it out? Well, what are you waiting for?

Web Builder Tips 'n Tricks

The Internet in its current state is still limited in the amount and variety of content formats that can be offered. This is due to both reasons of standardization, as well as bandwidth capacity that is available at the present time.

One of the major limitations is the image file formats that can be offered over the Internet. At current, in regard to bitmap images, the only choices are JPG, GIF, and PNG, although PNG is still yet to be widely supported, without the use of a special plug-in or activeX control for displaying the format. Strangely, it is actually PNG which offers the best quality and size combination of the three mentioned.

The reason for the W3C's acceptance of these three formats is largely due to the sizes associated with them. Through limitation of colors, as well as internal compression schemes, these file formats are only a fraction of the size of other bitmap formats such as TIF and PCX. The trade-off: Quality. If you've ever seen a JPG image that has been over-compressed, you likely know the effects of color-bleeding, pixelization, and other factors that result from high compression.

GIFs on the other hand, gain their resulting compression from the limited number of colors that are contained within the image. The maximum number of colors any GIF images can contain is 256, such as would be found in a photograph, which non-photographic images, such as computer art, could possibly contain anywhere from 2 to 128 colors. This number will be a direct result of how many colors were used in the creation of the GIF file, as well as other factors, which add colors, such as anti-aliasing. The result is that GIF images do not have the tendency to get distorted like JPGs do, even when compressed to a high amount. GIFs also have the ability to be created with certain colors being transparent, and also a series of GIF images can be placed in one file to achieve an animation effect. These latter features are available in the GIF 89a format, but not in earlier version specifications.

Down-Sizing

So, how do you get those GIF file sizes even smaller? And what about animated GIF considerations?

As we said earlier, a GIF image size will directly reflect the total number of colors that are stored within the image file. This means that the obvious answer to reducing GIF file size is to reduce the number of colors contained within. The trick: Reduce the total colors, without losing image quality.

If you're using a graphics program, such as Adobe Photoshop (We personally use Photoshop 5.0 for graphics, so we'll base the given examples on it.), when coverting your image to from the RGB color format to palette colors, you are presented with a dialog. In the case of images that contain a large amount of colors (more than the standard 256 color palette), the dialog will say "Adaptive" as the color conversion method, and underneath will be a small text box that contains a number of colors to be used. Normally, this would contain the number "256". By reducing that number to something smaller, you are also reducing the size of the converted file. Here though, you'll need to experiement with the number of colors, and the resulting image. First off, try reducing the image to half of the colors that are available, or 128 to be exact. Save the image, and then open it with your Internet browser (make sure that you view it from the browser, and not with Photoshop's results, since Photoshop can be misleading, often showing a perfect image, when in reality...). How does it look? Any loss of quality? If not, then go back to Photoshop, and choose your history item. Go back to before the color conversion. Try the conversion again, but this time with 64 colors. Any loss of quality yet? If you finally meet a number of colors that produces a noticeable loss of image quality, then you can start increasing that number, until the quality is restored. When you do find this number, you've also just created yourself a much smaller GIF.

Concerning animated GIFs, the most important thing to remember is that when animating the image, the only part that you need, is the portion of the image that changes, not the entire image. This normally means that the first frame is the fill image, and each image after that is just the animated portion. After each frame change in the animation, the original image background is restored. To use this method, for example, has the potential to change what might normally be a 50k banner advertisement, into something more along the lines of 10k.

In summary, keep your colors low and your animation frames minimal, and you'll be able to create high quality GIF images that are just a fraction of the size of a comparable JPG.

Back... To The Start