Home | Toolshop | Guides | FAQ's | Inside |
Submit Corner Logo
Browse Submit Corner

Submit Corner : Guides : Bandwidth Guide : Background Images and Colors

Toolshop

Assessment Tools
Keyword Thesaurus
Link Popularity Tracker
META Tag Generator
META Tag Scanner
Robot Generator
Submit Engine
Top Keywords
Word Tracker

Guides

META Tags
Description Tag
Keywords Tag
Revisit Tag
See Complete List

Search Engines
Google
Yahoo!
Overture
See Complete List

Site Improvement
Image Tags
Title Optimization
Effective META Tags
See Complete List

Software Packages
Ultimate Demon
SENuke XCr
See Complete List

Website Assessment
Editor's Viewpoint of Directories
Assess Your Site Indexing
Who's Linking To You
Competitor Identification

Bandwidth Conservation
Background Images
External Javascript
Optimize HTML
See Complete List

FAQ

Our Recommendations
Read FAQ

Webposition Gold - Download Now!

Inside Submit Corner

Advertise
Linking Info
Privacy Policy
Rave Reviews
Terms of Use
Local SEO

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

Sponsored Links



Win Great Prizes Just for Using Our Services

Latest Headlines

All links open in a new window
View All Headlines
(Mon, Jan 30 12:59:01)

Searches for Holidays to Africa Overtake North America and Close Gap With Europe
Source: Film Imaging
Date: Jan 30 2012 4:51PM

Google-backed DMARC system aims to block phishers
Source: ZDNet UK
Date: Jan 30 2012 4:51PM

Book reviews: Google books
Source: ZDNet UK
Date: Jan 30 2012 4:51PM

Searches for Holidays to Africa Overtake North America and Close Gap With Europe
Source: DMN Final Cut Pro
Date: Jan 30 2012 4:50PM

Earthquakes, Demi Moore and ACTA drive Google searches
Source: Yahoo Philippines News
Date: Jan 30 2012 4:49PM

Stop poaching staff, Jobs told Google
Source: Cyber India Online
Date: Jan 30 2012 4:49PM

Google, Facebook, Twitter Execs Grilled By UK MPs On Privacy
Source: Yahoo! Finance
Date: Jan 30 2012 4:48PM

There are 23 additional news headlines. Click to View All Headlines

Copyright ©2000 - 2009 Wired 2000 Corporation
All Rights Reserved
Privacy | Terms of Use