Question

I’m looking to use CSS gradients for an element of my web app that is drawn repetitively, as it would allow me more flexibility in dynamically changing its appearance. However, my question is whether gradients are more expensive for the browser to render than bitmap images. Or do images use more processing power? (And I’m not concerned with cross-browser compatibility- the app will only be used on the iPad)

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.

This above answer is directly lifted from How does the performance of using background-gradients in CSS vs using images?

---

These links can be useful read for you

Browser Repaint/Reflow performance: using CSS3 Gradients vs PNG Gradients

CSS gradients are faster than SVG backgrounds
http://leaverou.me/2011/08/css-gradients-are-much-faster-than-svg/

Runtime Performance with CSS3 vs Images
http://jacwright.com/476/runtime-performance-with-css3-vs-images/