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.

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.