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.

 

[Shelley]

Because they wanted the greater Designer flexibility of being able to use whatever image format they want.. like animated .gif .

I frequently use animated .gif Post Icons. There are only 4 of them, they are small files always, if a designer or admin doing their own style wants to use .gif or whatever, they should be able to - natively, without having to hack the code - that designer flexibility has now been removed which I personally find to be disappointing.

Yeah that is one of the negatives and I will agree that if your using .gif for imagery it's one of the cons I mentioned in my previous post and can sympathise with kim.

 

[Marcus]

But options are hard to maintain. So I can live with that there are no sprites for images. Of course for me it would be better if there are sprites. But with the sprite integration, I would put automatically all non-animated images into a sprite.

 

[Shelley]

I'm all for options

I think I misunderstood you, I was actually referring to a smiley spritesheet solution be optional. If the optional solution for nodes is made then I think the optional selection should be for people wanting to remain using individual imagery.

 

[Kim]

I think I misunderstood you, I was actually referring to a smiley spritesheet solution be optional. If the optional solution for nodes is made then I think the optional selection should be for people wanting to remain using individual imagery.

Yeah, a smilie Spritesheet would have to be optional or not at all, it just wouldn't work at all in the real world.

I would love this new node spritesheet in particular to be optional (seriously don't care about the other smaller icon one, that is fine as a sprite sheet), but the Node icon one I would love to see as an option.

 

[Floris]

I agree, optional or bust. Seems the logical step to take.

 

[Jeremy]

Yeah, a smilie Spritesheet would have to be optional or not at all, it just wouldn't work at all in the real world.

I would love this new node spritesheet in particular to be optional (seriously don't care about the other smaller icon one, that is fine as a sprite sheet), but the Node icon one I would love to see as an option.

Smilie sprite sheets with optional "groups" so If I have ones that are 10x10 and some that are 20x20 I can specify which sprite sheet to put them in and CSS auto-changes.

 

[Cezz]

Smilie sprite sheets with optional "groups" so If I have ones that are 10x10 and some that are 20x20 I can specify which sprite sheet to put them in and CSS auto-changes.

I envisioned kier simply adding an extra field to the smiley page or "CSS"... so you would specify a file name currently, if it is just a file name the image is included like normal, however if there is Css set then it will set the image as a background with the css applied, allowing you to set height, width and position... default action is nothing is set!

 

[x_Stricken_x]

I don't get what everyone is up-in-arms for about Sprites. They often (not ALWAYS) make "slow" websites run faster since there is less HTTP requests to the server; and in that request you spend less time loading a bunch of "images" versus loading each image individually (not-sprite'd). It may just be because I'm familiar with CSS as well as Sprites and the technique behind it, but in my opinion it's good to see software finally recognizing better techniques and taking advantage of them (including HTML5, as well as CSS3). This also may be partial to the fact that I'm a developer and a designer; but I digress

Also, I do get not everyone is tech-savy, but (again in my opinion) every webmaster/forum administrator should at least know basic HTML, CSS as well as MySQL and PHP; what if their forum breaks and (by some chance, for example) the support website/forums are down? They are then relying solely on their own knowledge, or lack there of, to get their site/forums back up-and-running. Sorry for the rant, just felt my need to throw in my two cents

 

[Kim]

I don't get what everyone is up-in-arms for about Sprites.

I don't believe anyone is "up in arms" about it, I myself question the validity of doing it this way, when no-one has ever accused Xenforo of being "slow" - EVER - it just isn't, so why make life harder for designers and admins than it has to be? Why remove designer flexibility when there is very little or no benefit for most sites?

The very first thing 90% of people do is change the look and feel, many do it themselves, and many others engage someone else to do it for them via a pre-made premium, or free theme or whatever. In the case of the Node Icons in particular, there is very little advantage gained by removing the single image link on 4 small images, and unless it is a dead simple change to convert it to a single image link (no idea if it is or not, not having seen the code for how it is done in 1.1) why remove this option for the sake of a miniscule time saving which would only be of benefit to a very few massive boards.

I guess my comments fall into the "It wasn't broke - why'd you fix it" basket.

Again.. my 2 cents

No doubt Spritesheets are hear to stay, and no doubt I will learn to live with it as I have said. But questioning the decision doesn't make one "up in arms" about it, we're not children here.

 

[Digital Jedi]

...Why remove designer flexibility when there is very little or no benefit for most sites?

... In the case of the Node Icons in particular, there is very little advantage gained by removing the single image link on 4 small images, and unless it is a dead simple change to convert it to a single image link (no idea if it is or not, not having seen the code for how it is done in 1.1) why remove this option for the sake of a miniscule time saving which would only be of benefit to a very few massive boards.

Think of it this way. Ten people visit your site at the same time. Four images make for forty HTTP requests to your server. With a sprite, it's just ten requests. Now compound that by the number of users who call up your server throughout the day. Minimal amounts of time shaved off of an individual user compound quickly, and not just for massive boards. It's the entire principle behind CSS layouts over HTML tables to begin with. That only shaves off a few seconds, as well, and can be challenging for coders coming from old school HTML tutorials. But, seconds in web building equate to resources that add up to more than just the time it takes four images to load for an individual user.

 

[Shelley]

I don't believe anyone is "up in arms" about it, I myself question the validity of doing it this way, when no-one has ever accused Xenforo of being "slow" - EVER - it just isn't, so why make life harder for designers and admins than it has to be? Why remove designer flexibility when there is very little or no benefit for most sites?

The very first thing 90% of people do is change the look and feel, many do it themselves, and many others engage someone else to do it for them via a pre-made premium, or free theme or whatever. In the case of the Node Icons in particular, there is very little advantage gained by removing the single image link on 4 small images, and unless it is a dead simple change to convert it to a single image link (no idea if it is or not, not having seen the code for how it is done in 1.1) why remove this option for the sake of a miniscule time saving which would only be of benefit to a very few massive boards.

I guess my comments fall into the "It wasn't broke - why'd you fix it" basket.

Again.. my 2 cents

No doubt Spritesheets are hear to stay, and no doubt I will learn to live with it as I have said. But questioning the decision doesn't make one "up in arms" about it, we're not children here.

I think it's more about minimising http requests than the sizes of the icons themselves.

That said, And myself welcoming the sprites I also feel Kim has made some good arguments, after-all, if we all just sat here and agreed (which i'm sure some people are guilty of) I would like to think that a option for people whom wish to use individual imagery for the node sprites should/will be looked at, if it's at all possible which I'm sure it is in your powers to do so. Considering there's not too much fuss regarding the other spritesheet mainly because these icons will probably never be animated, I do feel that node icons and many others use animations to distinguish the read and unread markers so .gif is their one and only option if for example they want to gradually animated them to a lower opacity, or have them pulsating, spinning etc .

This post is not against spritesheets, personally I can't get enough of them and if i could I'd slap an over-sized spritesheet on index and voila style completed. I just feel with the very good points kim has put across an optional solution to switch (for nodes) should be looked at as a possibility to be set to individual images.

 

[Kim]

Personally I don't care if you all want to have a big old SpriteSheet parade, I'll cheer from the sidelines, but it would be nice to have the option of doing the Node icons (and all the gradients etc.. please don't even consider this) the old fashioned -never-been-a-problem way thanks

 

[MGSteve]

Kim, its called good practice and there is really never a reason not to do it. Just because it 'worked fine' in the past, doesn't mean it shouldn't be improved and updated.

 

[ibnesayeed]

I had a fantastic idea to handle sprites and individual images. I have written a paper around it but never send it to anywhere for review or publication. I had shared it with my adviser and housemate only.

If browsers care to implement that feature then we could have made a significant drop in number of HTTP requests per page, including not only the CSS background image but, virtually any image on the page. Still having backward compatibility in a graceful manner.

 

[Forsaken]

Kim, its called good practice and there is really never a reason not to do it. Just because it 'worked fine' in the past, doesn't mean it shouldn't be improved and updated.

Why are you being so condescending? She understands the benefits, she is only bringing up a few issues that using sprites will bring with them.

Kim tends to use animated node icons, which would not work with sprites. Chances are the sprites will be using the same style properties existing in 1.04, and all she would have to do is change the file path and remove the code for selecting the proper area of the spritesheet.

She is also thinking about end-users (Especially for custom styles), where more often than not they have very little knowledge past installing the style itself. Most people do not understand HTML or CSS, and sprites can get a bit confusing.

 

[CTXMedia]

I think it should be a case of where it is practical - use them.

Smilies - no; complicated to add/remove from spritesheet and doesn't support animation.
Node icons - probably not; since of the few "states" only one or two will be used in the main, so spriting them doesn't offer a great HTTP request saving per page load.
General icons/imagery - yes; multiple HTTP requests reduced to one is a good saving, and for graphics that are unlikely to change very often (or at all once your skin is completed) spires are ideal.

And despite them being around for years, most site owners will be new to the idea of sprites (like me ) and will need some help adjusting to how to work with them (remember, many site owners just "run" their communities and don't necessarily have the design/programming skills that some of us more geeky admins do!).

I've warmed to the idea (for selected parts of a site), and as a big-board owner I'm interested in anything that helps to cut down on resources and increases page loading speed, so I'll learn how to work with them (I'm sure it'll be easy once I'm used to it); but we need to ensure that non-techy admins are given the support they need too (and that we don't get carried away with spriting everything!).

Cheers,
Shaun

 

[Kier]

Kim tends to use animated node icons, which would not work with sprites. Chances are the sprites will be using the same style properties existing in 1.04, and all she would have to do is change the file path and remove the code for selecting the proper area of the spritesheet.

You are absolutely correct.

Here is the style property for the 'Unread Forum' icon, which is now a sprite. As you can see, you can change it to use a regular image without having to change anything except the image URL and the background position. Simples!

 

[Kim]

You are absolutely correct.

Here is the style property for the 'Unread Forum' icon, which is now a sprite. As you can see, you can change it to use a regular image without having to change anything except the image URL and the background position. Simples!

View attachment 18922

Yay...

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

 

[MGSteve]

Why are you being so condescending? She understands the benefits, she is only bringing up a few issues that using sprites will bring with them.

Kim tends to use animated node icons, which would not work with sprites. Chances are the sprites will be using the same style properties existing in 1.04, and all she would have to do is change the file path and remove the code for selecting the proper area of the spritesheet.

She is also thinking about end-users (Especially for custom styles), where more often than not they have very little knowledge past installing the style itself. Most people do not understand HTML or CSS, and sprites can get a bit confusing.

Apologies if it came over condescending, it wasn't meant to. I appreciate its more confusing for novice users, but they can always just upload a separate file and link to that anyway, its just obviously not as efficient.

 

[Paul B]

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.