View Full Version : Performance issue when using images for buttons

11 Jul 2011, 5:33 AM
Hi All,

I created an application and using images for buttons.
I created classes for buttons and assigned cls and pressedCls to them, but its taking time to load these images.
Is there any other better option to do the same, please share if anyone have any idea regarding the same.

Thanks in advance,

Dhiraj Gupta

11 Jul 2011, 3:21 PM
Encode the image in base 64 and add in css via url("data:image/png;base64,....). This will save on server roundtrip times.

This works when the image size is really small i.e few kb

11 Jul 2011, 8:48 PM
@Dhiraj how did u manage to include image over button? i got issues with it.

i defined the url, size, background color in the .scss file.. the size n background color are implemented in the button, but the image doesn't appear.

plz let me know if u can help

12 Jul 2011, 7:13 AM
@bharatn : Thanks man.

Whats about css sprite?

@Shranes : i used it as

{ xtype: 'button', cls: 'temp_button', pressedCls: 'temp_button_pressed', text: 'Open', name: 'Open'}

background-image: url(../images/TempButtonNormal.png) !important;
background-repeat: no-repeat;
background-color : White !important;
border: 0 !important;
width: 71px !important;
height: 54px !important;
background-position: center;
font-family: Arial !important;
font-size: 16px !important;
border-radius: 0em !important;


12 Jul 2011, 7:54 PM
thanks Dhiraj..it works :)