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 engine to create certain aspects of the user experience.

One specific example is with a horizontal "bar" that runs the entire width of the widget. He created a really snazzy gradient that involves several stops of different colors and opacities, and he feels that the small size of the image is preferable or at least comparable to the added lines of CSS code needed to generate the gradient natively.

We're already using CSS sprite technique to reduce the number of return trips from the server so that's not an issue for us. Right now it's simply the pro's and con's of using sliced up imagery versus rendering with CSS and HTML.

Is there a definitive rule as to how large an image needs to be to be the "worse" option of the two?

UPDATE: Since a few people have mentioned the complexity of the gradient as a factor I'm going to present it here:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

Very complex! ;-)

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.

Answer 2

In general, if it can be done with CSS, definitely skip the image. If for no other reason it's easier to maintain.

HOWEVER, a complex gradient is likely where I'd give in and throw in an image. Having recently implemented some CSS gradients, it is a bit of a mess right now.

Ultimately, Fabian Barney has the correct answer. If it's an issue of performance, you need to measure things. In the grand scheme of things, this is likely low on the performance issues to dwell on.

Answer 3

i think CSS is more reusable. Imagine you have to repeat the same image over and over again in the same web document. Lots of HTTP requests there. But that's my opinion, please correct me if I'm wrong I think CSS is way more expressive and flexibly stylish. However, there are things you have to watch out for. Stuff like browser specific prefixing kill pages with too much CSS.