0

Is it better to draw a button and than use as background-image(for example .png) or to make same button using html+css. Will performance change significantly ? An average button weights 60 KB?

  • 1
    you might wanna refer to this post [http://stackoverflow.com/questions/8069535/is-it-better-to-use-images-or-css-to-keep-performance-of-a-webpage-or-applicatio][1] [1]: http://stackoverflow.com/questions/8069535/is-it-better-to-use-images-or-css-to-keep-performance-of-a-webpage-or-applicatio – imnancysun Jan 30 '15 at 19:09

2 Answers2

1

If you use an image it's going to be harder to change the text, the look, the color, etc.

Unless your button is super fancy, I would go with html+css.

mbillard
  • 38,386
  • 18
  • 74
  • 98
  • not sure, if it's really harder. it's much easier to draw a hover button in PS –  Jan 30 '15 at 19:03
  • 1
    Only when you're not familiar with CSS. You can add `.btn:hover { background-color: #f00; }` and have a hover button. It all depends on how complex your buttons are but I find that simpler is more flexible and looks better. – mbillard Jan 30 '15 at 19:27
  • 1
    Also an html+css button will be way way less than 60kb. 60kb is not much but if you have a lot of different buttons on the page it adds up. Also you'll have to code something to make the button change on hover. – mbillard Jan 30 '15 at 19:28
1

It doesn't affect the performance for your website if you have one or lesser image but it would be little painful to your website to load them if you use a lot of images for the buttons or something else.

So, you should consider yourself. If you can layout the same thing with just css then I would like to recommend you to use that way, its very light than using image.

If you want to use single image in multiple places then you don't need to worry about the performance because it just loads one time for all places even for different sizes.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231