Is it better to use images or CSS to keep performance of a webpage or application as high as possible?

Question

My project\'s creative designer and I have had some amicable disagreements as far as whether it is better to use slices of his comp or rely on the browser\'s rendering engin

Answer 1

Measure it! Not the answer you like I think, but it really depends how complex the CSS will be and therefore how long it takes to be rendered.

In most cases it'll be the render time (CSS version) vs. request overhead and transmission time (image version). You will most probably see the big numbers here. Since you're already using image sprites you're reducing the request overhead to a minimum.

Browser compatibility should also be something you should be aware of. Here images will often win over CSS when it comes to gradients and something like that.

Some very complex CSS3-site to demonstrate what I mean: http://lea.verou.me/css3patterns/ This is a VERY nice case study, but incredible slow. It lags when loading. It lags even more when scrolling. And I am sure it is much slower than a solution using an image sprite for all of that.

Don't treat me wrong! I love CSS, but images are fine too. Sometimes even finer.

Summary

Measure it! When you do not have the time to measure, then estimate how complex the css would be. When it tends to get complex, then use images. When you've compatibility issues, then use images.