What are the advantages of using an imageless button?

Question

The discussion on this answer to the question "How can I use Google's new imageless button?" Has prompted this question.

Google seems to think that going imageless is good for some reason, but from the comments cited, I fail to see the advantage. Is it worth it to send dozens of lines of HTML and who knows how much CSS to render these imageless buttons, rather than simply load another image, especially when techniques like CSS sprites are available?

When would this technique be preferred? The other question asks how it can be done, but I want to know why it should be done.

Answer 1

I think in this specific case I can only see the advantage that the buttons can be programatically generated. If you don't know what your button will say it's probably easy to make this way than generating it using somekind of image library generator.

Also changing one CSS can make you change the look-and-feel of all buttons at once. Using image buttons you'll need to update everyone and each of images.

Answer 2

Isn't this done because the height of the button may vary (for example the text size)?

Answer 3

1. The page load is smoother as no images have to be loaded and will appear later than the rest

2. The button text is also readable in the case somebody cannot read/view images, yet you have the graphical look. (building a graphical button with images in the traditional way around real text is as complicated HTML as this method)

3. As they mentioned in their blog, these buttons are skinnable without creating and storing custom images.

Basically, you get all the advantages of plain text buttons over custom imaging, while still having a nice, skinnable graphical look.

Answer 4

1. Localization (it's easier to translate text than images)
2. Skinning/themeing (it's easier to change the look and feel with single CSS than recreate multiple images)
3. Accessibility (screen readers can read properly, text scaling works properly)
4. Performance (the CSS is shared and so is loaded once from the server)
5. Functionality (it's easier to expand the button with new UX elements like dropdown arrow when you don't have to change the whole picture)

Btw, the "imageless" button might as well contain an image inside the visual template. This approach is quite similar to XAML's approach to templating and styling the visual tree.