Bandwidth Conservation Society / Image Tips / Background Images


The ability for later browsers to support Background Images is a lot of fun... But, many sites have background images that are unnecessarily large. Here are some notions about reducing background image byte count.

Background Images (at writing supported by Netscape and Microsoft)

HTML: <BODY BACKGROUND="bg.gif">

HTML Note: It's not a bad idea to investigate the BGCOLOR call when you spec a background image. Using a color similar to the main color of your background image can retain visual integrity if the image isn't loaded. (How could that happen?)

HTML: <BODY BACKGROUND="bg.gif" BGCOLOR="#FFFFFF">

First, a couple of premises (premisi?):

  1. The background usually doesn't need great detail. An embossed logo (extremely common) a texture, or even an image should usually be light on detail so as not to compete with the text on top of the image.
  2. Because browsers tile the image, it is possible to create very small backgrounds (ie 4 pixel by 72 pixels) and put the burden of composition on the browser. (Versus large images that put the burden on the 'net for delivery.)
  3. Because browsers that support backgrounds also support JPEG, it's appropriate to examine JPEG as a primary choice.
Rules of thumb
With those notions in mind, here are some strategies to reduce the bytesize of the image.
  1. If you use a GIF file, don't interlace it. This increases file size (slightly) and unnecessarily hammers the browser cpu as it tries to tile and render the image.
  2. If you use a GIF file, experiment with smaller dimensions The background image for this page is a file that is 8 pixels by 1000 pixels. Because it is simple in color and pattern, the GIF format brought it down to 157 bytes. Slower CPU's or Video displays may not paint this image as quickly, but the net overhead is extremely modest. Here, the effect is a black banner across the head of the page. Kinda different.
  3. If you use a JPEG, try more aggressive compression settings. Because the image will have text on it, usually detail is modest. Consequently, greater compression settings can be used.
Copyright 1995, World Access Yellow Pages, Inc., Aurora, CO, USA. All rights reserved.
Trademarks & Servicemarks. Email: feedback@infohiway.com