Latency-friendly gradient backgrounds using tables

Technologies: HTML 4+, CSS 2+

A typical web page color gradient uses a thin GIF or PNG image repeated for the width of the page. However, the network latency cost for the image is high, slowing down the site. Instead, skip the image and draw the gradient with a table and thin rows of varying background colors. The table is much faster to download and looks the same.

Gradient background methods

Let's look at the typical way to create a background gradient, and then a tricky latency-friendly way.

A typical gradient using a background image

For a typical image gradient, add a <div> and style it with a background gradient image 1 pixel wide, 100 pixels tall, and repeated for the width of the <div>. Give the <div> a height then add a <p> for text atop the gradient. Style the text.

Sample text

Image gradient
HTML <div class="gradient-image">
   <p class="gradient-content">Sample text</p>
</div>
CSS .gradient-image { background: url(blue_bg.gif) repeat-x;
   height: 100px; }
.gradient-content { font-size: 24px; font-weight: bold;
   margin: 1em; }

This method is simple and widely used. While the background image is tiny, network latency still delays getting it. Latencies for international and cell phone visitors can exceed 1/2 second per file. That's a long time to wait for a simple gradient background. To go faster, get rid of the background image and use a colored table.

A latency-friendly gradient using a colored table

Instead of an image, use a table with 50 to 100 rows, each a few pixels high. Color each row with a different background color. Surround the table with a <div> and add a <p> for text atop the gradient. Style the text and enable absolute positioning to take the text out of the flow and place it atop the table. The result is visually identical to the gradient image.

Sample text

Table gradient
HTML <div><p class="gradient-content">Sample text</p>
<table class="gradient-table" cellspacing="0"
   summary="">
<tr><td class="g0"></td></tr>
<tr><td class="g1"></td></tr>
      ...
<tr><td class="g49"></td></tr>
</table>
</div>
CSS .gradient-table { height: 100px; width: 100%;
   border-spacing: 0; }
.g0 { background: #054CC0 }
.g1 { background: #0A4FC1 }
      ...
.g49 { background: #FFFEFE }
.gradient-content { position: absolute;
   font-size: 24px; font-weight: bold;
   margin: 1em; }

CSS purists will certainly object (I'm cringing myself). However, the method looks good, it has no image to download, it avoids high latency costs, and it improves page load times. Purity is good, but performance is better.

Comparisons

Comparing features

Both methods work in all modern web browsers on all platforms. Image and colored table backgrounds have been supported since the early days of the web.

The image background method is obviously a lot more flexible. Graphic designers can do anything they want with a background image, from gradients to photorealistic metallic finishes. But for a simple gradient, the table method delivers the same results and it's much faster.

Both methods print identically. If page backgrounds are turned on in the visitor's browser, both print and look fine. If backgrounds are turned off, neither method is visible.

Comparing sizes

The table gradient background requires about 3 Kbytes of HTML and CSS, but it compresses very well to 796 bytes. The image gradient requires only 240 bytes of compressed HTML and CSS, but adds 300 bytes for a GIF image, and about 250 bytes for the web server's HTTP response before delivering the image. That brings the image method to 800 bytes – about the same as the table gradient. A taller gradient requires a bigger image or more table rows, but the two methods remain about the same size.

Additional page size (bytes)
Type of data Image gradient Table gradient
Compressed HTML 92 263
Compressed CSS 147 533
Compressed GIF (50 colors) 311 0
HTTP response for image 250 0
TOTAL 800 796

Comparing load times

A gradient's impact on page load time is the download time plus the time spent waiting for the download to start. Since these two methods are the same size, the download times are the same. But the waiting (latency) times are not. The image gradient has an image to wait for, but the table gradient does not.

US visitors to a US web site will usually see a latency of about 1/10th of a second. Overseas visitors to the same site may see 1/5th of a second or worse, while visitors on a cell phone may stall for a 1/2 second or more. The table below shows the impact of this latency on the image gradient method compared to the table gradient.

Additional page load time (seconds)
  Image gradient Table gradient
Connection Latency + Download Latency + Download
US home to US server
500 Kbytes/s, 100ms latency
0.100 + 0.002 = 0.102 none + 0.002 = 0.002
International home to US server
100 Kbytes/s, 200ms latency
0.200 + 0.008 = 0.208 none + 0.008 = 0.008
Cell phone to US server
30 Kbytes/s, 500ms latency
0.500 + 0.027 = 0.527 none + 0.027 = 0.027

As expected, the download times are the same. It's latency that makes a difference. The table gradient has no image to download and no latency delay, making it up to 50 times faster than the image gradient method.

These load times are just estimates. The real world is more complicated. Bandwidths and latencies vary from moment to moment based upon network and web server load. The latency on a cell phone can vary from 1/2 second to 3 seconds or more, depending upon signal strength. Pipelining, keep alives, caches, and parallel downloads also affect the results.

Conclusions

For today's Internet connections, latency is a bigger problem than bandwidth. Latency-friendly design reduces page load times by reducing the number of files required by a page. Pages load faster and demand less of the visitor's network connection and the web site's server.

The table gradient is obviously less flexible. But for simple gradient backgrounds it works well, it avoids latency costs to download a background image, and it has faster page load times.

Clearly, the gradient image can be cached. But recent performance studies by Yahoo! found that visitors rarely arrive with your content already in their cache. Instead, they have to download it again on every visit. For that initial download, the table gradient is faster. For subsequent page loads, the two methods are about the same.

Appendix: Perl script to generate a gradient table

Here's a Perl script to generate HTML and CSS for gradient background tables. Cut and paste the script's output into your page and style sheet.

# Perl script to generate table gradient
# Gradient parameters
@startColor = ( 5, 76, 192 );
@endColor   = ( 255, 255, 255 );
$rows       = 50;
$height     = "100px";
$width      = "100%";
 
# Generate styles
print( ".gradient-table { height: $height; width: $width;"  .
        "border-spacing: 0; }\n" );
@hex = ("0","1","2","3","4","5","6","7","8","9",
        "A","B","C","D","E","F");
@delta = ( ($endColor[0] - $startColor[0]) / ($rows-1),
	($endColor[1] - $startColor[1]) / ($rows-1),
	($endColor[2] - $startColor[2]) / ($rows-1) );
@color = @startColor;
for ( $i = 0; $i < $rows; $i++ ) {
	$hexColor = "";
	for ( $j = 0; $j < 3; $j++ ) {
		$color[$j] = ($c = $color[$j]) + $delta[$j];
		$hexColor .= $hex[int($c/16)] . $hex[$c%16];
	}
	print( ".g$i { background: #$hexColor }\n" );
}
 
# Generate table
print( "<table class=\"gradient-table\">\n" );
for ( $i = 0; $i < $rows; $i++ ) {
	print( "<tr class=\"g$i\"><td></td></tr>\n" );
}
print( "</table>\n" );

Further reading

Comments

Latency-Friendly Gradients

The bold text "Sample Text" in these tables does not print -- is that because it is "behind" the table, or has it disappeared entirely?

Hidden "Sample text"?

I'm sorry, but I cannot reproduce the problem you are seeing. The "Sample Text" should be in front and prints properly for me on all current web browsers.

Thanks

I've been looking for gradient info for 40 min. Most of the stuff google spits out us borderline useless. This is great stuff. Clear and high quality. Thanks for putting this together.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

Nadeau software consulting
Nadeau software consulting