XF 1.1 CSS Sprites

In an attempt to decrease the number of HTTP requests made (and thereby speed up pages), virtually all of XenForo 1.1's UI icon graphics come from just two sprites.

xenforo-ui-sprite.png

node-sprite.png

​

Attached below are the 24 bit versions of the same sprites, for those of you who wish to edit them but don't have a graphic program which supports the 8 bit versions.

 

[CTXMedia]

Anyway, I managed to reduce the get requests from 38 to 2 on one page alone.

Nice ...

 

[Digital Jedi]

I didn't think he was being condescending. I think he was being explanatory, like I was. I think the communication issue we're having here is some of you think we're trying to convince you not to use animated images, or that there shouldn't be an option to use individual images. That's not what we're saying. We're saying when they don't need to be animated, they should be sprite sheets. And we're explaining why that's a very, very good thing. Not just something new and shiny for coders to brag about having figger'd out. But something that cuts down on precious resources that even the smallest website should be concerned about.

 

[ragtek]

This thread pushed me into finally spriting my Pages, something I've been meaning to do for months (I had it pencilled in for this Winter as part of the annual update).

Anyway, I managed to reduce the get requests from 38 to 2 on one page alone.

And what affect had this on the load time of the pages?

 

[Digital Jedi]

Wondering out loud, is it still possible to use a sprite sheet with animations if the file is .mng, or would it just be a crazy large file, like if you tried using a GIF? I really have never really ever even seen one used outside of a technical explanation online.

 

[Digital Jedi]

And what affect had this on the load time of the pages?

It's not really about time. It's about the requests being made to your server.

 

[Floris]

Which results in affecting load time of a page.

 

[Digital Jedi]

Which results in affecting load time of a page.

Details.

 

[Agent]

cant wait for the release

 

[Shelley]

Yay...

This is why I love you guys, you give us choice

Excellente This was imo the best solution to give people the option. Me personally, I'll be using spritesheets. As tommy the tiger from the Kellogg commercials would say - they taste greeeeeeeeeeeeeeeat

 

[James]

Excellente This was imo the best solution to give people the option. Me personally, I'll be using spritesheets. As tommy the tiger from the Kellogg commercials would say - they taste greeeeeeeeeeeeeeeat

Surely the taste dependant on the appeal and flavour of the images? Or do you just have tasty ink?

 

[Deleted member 2163]

Wondering out loud, is it still possible to use a sprite sheet with animations if the file is .mng, or would it just be a crazy large file, like if you tried using a GIF? I really have never really ever even seen one used outside of a technical explanation online.

MNG is not supported in most (if not all) modern browsers, so you're out of luck with that =/

I really wish MNG was adopted as a GIF replacement. For now, I would stick to using individual GIF files for animated graphic. Though, in my opinion, you should avoid animated graphics whenever possible. I think about the only thing that should be animated nowadays are progress indicators and the like. Even then, they're somewhat disingenuous because they will animate regardless of what state the application is in.

 

[Shelley]

MNG is not supported in most (if not all) modern browsers, so you're out of luck with that =/

I really wish MNG was adopted as a GIF replacement. For now, I would stick to using individual GIF files for animated graphic. Though, in my opinion, you should avoid animated graphics whenever possible. I think about the only thing that should be animated nowadays are progress indicators and the like. Even then, they're somewhat disingenuous because they will animate regardless of what state the application is in.

I too wish .MNG was adopted and flourished years ago but it's been around for many years now and still it's not being supported so I have very little faith it will be supported anytime soon, if ever. Which is a real shame.

 

[Floris]

Details.

Not needed. Think about it ..
What is the reason to reduce http requests?

http://developer.yahoo.com/performance/rules.html

To help speed it up

speed = time. not distance.

ergo: improves page load time.

 

[Digital Jedi]

Not needed. Think about it ..
What is the reason to reduce http requests?

http://developer.yahoo.com/performance/rules.html

To help speed it up

speed = time. not distance.

ergo: improves page load time.

Oh no, I meant that differently. I was facetiously acquiescing.

 

[Digital Jedi]

I too wish .MNG was adopted and flourished years ago but it's been around for many years now and still it's not being supported so I have very little faith it will be supported anytime soon, if ever. Which is a real shame.

Would that have anything to do with the fact it uses the object/embed tags? I only just now realized that it required it in HTML documents.

Theoretically, though, would using a MNG as a sprite sheet be a good idea?

 

[Floris]

Okay.

Oh no, I meant that differently. I was facetiously acquiescing.

 

[x_Stricken_x]

MNG is not supported in most (if not all) modern browsers, so you're out of luck with that =/

I really wish MNG was adopted as a GIF replacement. For now, I would stick to using individual GIF files for animated graphic. Though, in my opinion, you should avoid animated graphics whenever possible. I think about the only thing that should be animated nowadays are progress indicators and the like. Even then, they're somewhat disingenuous because they will animate regardless of what state the application is in.

Gotta love a bit of Javascript(/jQuery/Prototype) and CSS3(for gradients/cool-ness)

 

[Deleted member 2163]

Would that have anything to do with the fact it uses the object/embed tags? I only just now realized that it required it in HTML documents.

Theoretically, though, would using a MNG as a sprite sheet be a good idea?

Theoretically, maybe... but you'd have to consider that all animations would need to be the same number of frames or have their frames divisible by the number of frames in the longest animation. Otherwise, you'd have animation "sync" problems.

I'm not sure that would be worth it, to be honest.

The only time I could see that being useful at all is if you had the same loading animation in a bunch of different colors, for say, a theme or different states of loading.

 

[Kier]

24-bit version of the updated xenforo-ui-sprite.png

 

[Kier]

Sorry, I've updated it again.