Latency-friendly gradient backgrounds using tables

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

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

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.

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.

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

• Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests. The first in a series of articles from Yahoo! about increasing web site performance. This one discusses the impact of making a large number of HTTP requests for individual files, and the latency cost they incur.
• Performance Research, Part 2: Browser Cache Usage - Exposed! The second in the Yahoo! series of web site performance. This article discusses the browser cache, and how little it actually helps.