Question

Suppose I am using a DIV element for which I can either add a background image or can replicate the same style creating a CSS3 gradient. Now, for Phonegap applications (where all the image files reside in the device itself), which option is better to go for.

I am asking this because I saw somewhere that the gradients takes some computation time where using image may create a loading time issue. But for Phonegap apps, the image load time issue may not be there. So, maybe just using the image be a better option here?

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.