How does the performance of using background-gradi

Question

Has any one, or know someone who has, evaluated the performance of using background-gradients in CSS vs using images?

It is definitely more flexible and more productive to use code but is there a performance downside to using css gradients for buttons, bars, etc?

Here is a sample cross browser CSS gradient:

background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */

background: -o-linear-gradient(top, #1E5799 0%,#2989D8 50%,#207cca 51%,#7db9e8 100%); /* opera */

Answer 1

According to an article on the Webkit Wiki, images perform better:

Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it's even advised to use static images for some of the text if possible.

Source: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

Of course, you have to balance that CPU time with the extra time it would take to load the image from the server. Also, for Internet Explorer, filters are extremely slow, especially if you have many on one page.

Answer 2

For Safari/WebKit on OS X performance is fine if you use a handful of background gradients, and seems to scale up with the power of the end user's computer. Some css elements are always poor performers, though--tr:hover is the worst one from my experience.

For example, on a brand new MBP (2.2ghz i7, 8gb memory) a page with a table with 30 rows and 5 columns, with a single background gradient on the tr hover, will stutter and skip when the user mouses over rows. It seems to start to get bad after about 8 rows for me, which is not very many.

You might want to consider using css gradients for development, and then converting them to images on problem pages before going live.

[This applies to OS X Lion in Safari 5.1 and WebKit r94958 (9-12-2011).]

Answer 3

the case of IE -- you are invoking a filter, which acts as a "plugin" for the browser, so some code gets executed to produce the desired output. I am guessing it's pretty fast, but if your page is quite long to calculate and render the colours would take more than showing an image somewhere on the page.