20

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! ;-)

natlee75
  • 5,097
  • 3
  • 34
  • 39
  • 2
    This article comes to mind: http://coding.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/ – Damon Bauer Nov 09 '11 at 18:14
  • @motoxer4533 Thanks for the link! I think I saw that pop up in a Google search I ran before posting this question, but I didn't jump in because the result didn't make any real mention of images (I thought it was just comparing speeds of the CSS versions themselves). It's a great article that directly and indirectly addresses many aspects of our debate. It's not quite a definitive answer so I'm not marketing this as an official answer to my question just yet, but it's a convincing argument and if it helps me here maybe I will! ;-) Thanks again!!! – natlee75 Nov 09 '11 at 19:18
  • http://jsfiddle.net/CVm3Z/1/ Here's a fiddle for it, but I don't see any gradient. – chovy Nov 10 '11 at 05:03

3 Answers3

13

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.

Fabian Barney
  • 14,219
  • 5
  • 40
  • 60
  • Haha - that's what I figured it was going to amount to. The thing is the gradients aren't really THAT complicated... the designer is making it out to be more complex than it actually will be. The annoying part for me is not being able to sprite the backgrounds in the same file as the icons without creating an overly vertical image file. – natlee75 Nov 09 '11 at 19:52
8

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.

sudo rm -rf slash
  • 1,156
  • 2
  • 16
  • 27
DA.
  • 39,848
  • 49
  • 150
  • 213
0

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.

cosmas
  • 1
  • 3
    Correction, as asked. When repeating the same image over and over again, browser does not send more than one request. We are no longer in the '90s. Image will be requested and downloaded once, then multiple instances of it will render on screen. It will just take more memory. The case with CSS stuff like gradients is different. Each instance of an element with CSS gradient will be rendered separately, resulting in a performance impact equal to: T*N (Time to render * Number of elements). Also, CSS is very limited compared to what graphic editors can do nowdays. – Slava Aug 31 '16 at 15:18