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.

 

[Junior]

O man...You know I've been doing the whole optimization thing with my forums and this is one thing I really wanted to see. I didn't even have to ask. Love it!

The two latest things are my biggest page errors in terms of speed and I hated looking at it. Looking forward to it.

 

[Kier]

Et voila:

 

[Paul B]

Yay!

 

[Karelke]

View attachment 18500

The two latest things are my biggest page errors in terms of speed and I hated looking at it. Looking forward to it.

Which tool is that? It looks like Yslow in Firebug.

 

[Cezz]

Which tool is that? It looks like Yslow in Firebug.

I think it is google's pagespeed, for firefox as there is a tab next to it for YSlow

 

[Junior]

Which tool is that? It looks like Yslow in Firebug.

http://GTMetrix.com

 

[Karelke]

Thanks.

 

[bambua]

From reading it right there's nothing really forcing you to do this. You can still use all the seperate files, it's just a css rule for each individual image anyways.

 

[CTXMedia]

From reading it right there's nothing really forcing you to do this. You can still use all the seperate files, it's just a css rule for each individual image anyways.

So you can carry on using individual image files, you just need to update the CSS?

Well that's okay then.

Cheers,
Shaun

 

[bambua]

So you can carry on using individual image files, you just need to update the CSS?

Well that's okay then.

Cheers,
Shaun

As a matter of fact as a test I just did it with the current default template it's just a matter of knowing how to do it.

 

[MGSteve]

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

Yet another idea to erm, 'borrow' for my own development efforts - thanks Kier

Great idea and anything that reduces hits on the server and speeds page loads can only be a good thing

 

[dutchbb]

Icing on the cake.

 

[Marc]

Top stuff K&M

 

[Shelley]

So you can carry on using individual image files, you just need to update the CSS?

Well that's okay then.

Cheers,
Shaun

It's more efficient this way. imo it is anyway, from a developers perspective and the end user it's a real time save if you construct your images on one source file which i do anyway and have done for years. this way you don't have to slice anything in your graphics editor/source image.

@Brogan if your using cs2 with built in imageready this loads png-8 fine.

 

[kkm323]

awesome!! this in my list of , to do...,
xenforo never turn me down... ever !!
thanx

 

[Muhammed El Sawy]

Good challenge
Go ahead
i note that google logo as a css spirit

 

[Peggy]

From reading it right there's nothing really forcing you to do this. You can still use all the seperate files, it's just a css rule for each individual image anyways.

Whew!

 

[Wildcat Media]

If you already have custom icons, it will just be a case of replacing the relevant ones (copy and paste) and re-saving the sprite .png.

Using these two sprites now makes it incredibly easy to change a theme. That is one reason I always resisted changing my own themes in the past (phpBB, vBulletin, etc.): editing dozens of files is very counterproductive. Editing two files will save a ton of work for me. And that's only two files to cache.

One example: I could overlay a tint in Photoshop and make them all a slightly different color, or desaturate them, all in one file. It's an overly simple example, but this is one way it'll make my life easier. (It beats the last time I used a GDK for forum icons and graphics--the single Photoshop file was full of dozens of slices, and was a pain to edit.)

I like this.

 

[Shelley]

Using these two sprites now makes it incredibly easy to change a theme. That is one reason I always resisted changing my own themes in the past (phpBB, vBulletin, etc.): editing dozens of files is very counterproductive. Editing two files will save a ton of work for me. And that's only two files to cache.

One example: I could overlay a tint in Photoshop and make them all a slightly different color, or desaturate them, all in one file. It's an overly simple example, but this is one way it'll make my life easier. (It beats the last time I used a GDK for forum icons and graphics--the single Photoshop file was full of dozens of slices, and was a pain to edit.)

I like this.

I think using the hue and sat method and adding a masking layer linked to an adjustment layer (hue/sat, colour balance) to make colour alterations only adds to the work. I've re-created most of the imagery in vector for 1 click true colour modifications which I think will be faster not to mention that the colour alterations will be more vibrant. Speaking of slicing (and for a project for a client I have coming up) I'll still be slicing the source file and having two slices (as seen in the screenshot) so I'm not messing with two different sheets on two separate files so decided to further that efficiency by including them all vectored (for truer colour alterations and saving time saving them.

 

[CTXMedia]

So if you edit a graphic on your sprite sheet and change its dimensions, do you then have to change the dimensions of all the other images around it within your CSS?

I'm completely new to the concepts of editing/using sprites - as you can see.

Cheers,
Shaun