1. Scenario
  2. Tools & Process
    1. Simplify gradients: Header and navigation
    2. Split image into separate gradients: Footer
    3. Other notes of the conversion process
  3. Result

Scenario

This post directly follows the previous post on reducing image requests by using sprites. Therefore I will go through my sample project and replace its background gradient images with CSS3 gradients.

Image requests before gradients

In this post, some of the shown image requests will be replaced by CSS3 gradients - head.gif, nav.png, content3.gif, content-shadow2.gif, foot.gif, stats_bar.png.

When necessary, background design will be simplified instead of re-building it 1:1 when converting from images to CSS3 gradients.

Tools & Process

Converting gradient images to CSS3 gradients is a time consuming process, as each image has to be revisited and converted on its own.

I found ColorZilla’s Ultimate CSS Gradient Generator to be good tool to support this process, as it provides an automatic conversion of uploaded images to CSS3 gradients.

However, manual work for each image was yet to be done. I’ll show you some exemplary results.

Simplify gradients: Header and navigation

Each line had a single background image (head.gif and nav.png). I used the gradient generator for each, but then simplified the generated gradient to go mostly from one start color to one end color. Moreover, I extracted the separating borders out of the gradients to stop them from scaling, which looked blurry. Somehow during conversion I got the colors mixed up, so the resulting header is a little darker - which I found to be good-looking, actually!

Header: before and after using CSS3 gradient

Result: Minus two requests, 800 bytes in images saved - and only some lines of SCSS added. The generated CSS, however, is 1.398 bytes in size (minified CSS). With gzip compression enabled, this goes down to 793 bytes. Summing this up, download size for these two gradients stayed constant, but two requests were eliminated.

#header {
    border-bottom: 1px solid #002565;
    background-color: #1d81d2; // Old browsers
    @include filter-gradient(#1d81d2, #0045a1, vertical); // IE6-9
    @include background-image(linear-gradient(top,  #1d81d2 0%,#0754ad 49%,#0249a4 65%,#0045a1 73%,#0045a1 100%));
}

#navigation {
    border-top: 1px solid #295ca3;
    border-bottom: 1px solid #001a3f;
    background-color: #003d91; // Old browsers
    @include filter-gradient(#003d91, #002c6a, vertical); // IE6-9
    @include background-image(linear-gradient(top,  #003d91 0%,#002c6a 100%));
}

This image originally covered two distinct lines in the footer. To have both areas work play nicely with a CSS3 gradient, it had to be split in two parts, which went quite nicely.

Footer: before and after using CSS3 gradient

Interesting to note here is that a) I messed up the new height (probably missed 1px border height) and b) the CSS3 gradient is not rendered smoothly.

Anyhow, one request was saved, whereas request size went up 30% or 200 bytes (600 bytes image vs. 793 bytes gzip compressed CSS).

Other notes of the conversion process

In addition to gradients, CSS3 box-shadow proved useful to get rid of some image requests, namely content3.gif above (1.2KB). In addition with a solid border, it’s quite hard to tell the difference:

Shadow: before and after using CSS3 box-shadow

When trying to convert the largest image loaded, content-shadow2.gif, I found it to be difficult as it was a degrading shadow from top to bottom, at 200px in height.

I decided to sacrifice this design gimmick for performance, and could therefore save an additional request and 7.2KB!

Result

Image requests with gradients

Minus 6 requests, minus 9.5KB in total - pretty great.

When you start converting your background gradients to CSS3, plan some time to do it correctly. In my opinion, the results will be worth the effort.

Instead of using CSS3 gradients, you might as well consider using sprites instead, however they will most likely add some download size overhead.