Background Images and Colors
By Submit Corner
Tell a Friend About This Page
Overview: Rather than creating large background images, consider using these techniques to cut
your bandwidth.
Background images were first introduced into Netscape and Microsoft browsers since version 3.x
and have since been widely adopted by many webmasters as part of their site design. However,
many web designers are not utilizing the fact that backgrounds "wrap" in the background of web
pages. These techniques can help shave your file size down by several fold.
Experiment With Smaller Dimensions
Because browsers tile background images, it is possible to create very small (ex: 1600 width x 2 height)
background images to span across the entire web page. This technique will put the burden of
composition on the browser as opposed to excess bandwidth.
Avoid Interlacing Background Images
Because interlaced GIF files use additional bandwidth in order to start delivering graphics as they load,
you can easily cut out a couple hundred bytes per image loaded if you use non-interlaced GIF's. Check with
your graphics software documentation on how to set this option.
Maximize Compression
Because most background images use small image dimensions, compressing backgrounds can usually save an
extra 20-30% while keeping quality and detail quite modest. Most software packages have the option on
deciding whether you want to save higher quality images or lower file size. Try experimenting with these
options in your graphics software until you find the setting which produces small enough files without
sacrificing image quality.
Substituting Graphics With Tables
Alternatively, web designers who use solid colors as a background image may be able to get around using images
entirely by using either the BGCOLOR tag (embedded into the BODY, TABLE, TR or TD tag) or by using a combination of tables
to simulate the effect.
Sample Usage
BACKGROUND Image Usage
Syntax: <BODY BACKGROUND="/images/background.gif">
BGCOLOR Usage
Syntax: <BODY BGCOLOR="#CCCCCC">
Syntax: <TABLE BGCOLOR="#CCCCCC">
Syntax: <TR BGCOLOR="#CCCCCC">
Syntax: <TD BGCOLOR="#CCCCCC">
Code Examples
Sample 1: 1600x68 Background Image (1.1kb)
Sample 2: 1600x27 Background Image (2.5kb)
Sample 3: Using Backgrounds With Tables
