Question

Which technique has better rendering times and is generally better? File i’m working on is very big and there are more than a 300 small icons (16×16) in sprite. Below two examples. First is automatically generated css by SpritesSticker

.sr-chat-min-btn { background: url(icons.png) no-repeat 0px -153px; }
.sr-btn-views { background: url(icons.png) no-repeat -42px -141px; }
.sr-star-gold-right { background: url(icons.png) no-repeat -21px -141px; }

Second is “optimized” version by me.

.sr-chat-min-btn, .sr-btn-views, .sr-star-gold-right { background:  url(icons.png) no-repeat }
.sr-chat-min-btn { background-position: 0px -153px; }
.sr-btn-views { background-position: -42px -141px; }
.sr-star-gold-right { background-position: -21px -141px; }

Answer 1

If there are any performance differences at all on the client side, it’s in the computation of the styles, not the loading of the sprite images. And I can guarantee you that there are no performance differences at all.

Load times are an issue concerning the server or the Internet connection, not the browser’s rendering engine.