Colors Affect GIF Loading Speed

Although the images above appear almost identical, they are considerably different, particularly in file size. Did you notice how the image on the left loaded faster? Here's why. Both images were scanned in 16.7 million colors, then we reduced their color depth. When we refer to color depth, we are speaking in terms of the mode which dictates the maximum number of colors in an image. Possible modes are 16, 256, 32K, 64K and 16.7 Million (true color). As we indicated in the previous page, an image must be reduced to all the way to 256 Colors max. before it can be saved as a GIF. The image on the left was reduced all the way to 16 colors, while the image on the right was reduced to 256 colors. As you can see, there is very little difference in the appearance of the images.

In the example above, the image on the left has an actual file size of 8.52KB. The file size of the image on the right is almost 20KB. That means it will take almost 2 1/2 times as long to load! If your web pages contain 4 or 5 large images for logos, products, image maps, bars and icons, all formatted as GIFs in a 256 color mode, you will add a considerable amount unnecessary of loading time which means and lost visitors and sales!

The speed at which an image loads is determined two things: modem speed, and file size. Additionally, file size may not be affected by the actual number of colors in a image, it is often affected by the color depth mode and actual image size. In actuality, the image on the left can be increased to almost twice its current display size, and still load faster than the image on the right because of the color depth we reduced it to.

Maintaining the integrity and quality of an image when reducing the color depth can be pretty tricky, sometimes it depends how many colors are in the original image, how they blend, etc. In most cases (particularly with scanned photos) the image's quality will be sacrificed to a degree when attempting color mode reduction. There are a number of things you can usually control though such as diffusion, color bleeding, and dithering palettes, etc. Most good graphics software applications can handle it, but it does take some practice.

Okay, here's a little sales pitch. If you've gotten this far and you're still stuck, maybe it's time to ask for some help. When it comes to Web Graphics we know our stuff! If you want us to give you a hand with your own web page images or even a banner, contact the Crafters Home Network Webmaster using our Support Form ...we'll be happy to give you a quote.