- Tools & Process
In this post, some of the shown image requests will be replaced by CSS3 gradients -
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 (
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!
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.
Split image into separate gradients: Footer
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.
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:
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!
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.