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.

 

[Markus]

Even still the Xenforo developers manage to surprise us with a good fantastic enhancements for the forum software.
I don't think i have ever before seen developers like these that are full of working ideas to make everything just a bit smoother...
Let the client do the processing while the server can be in peace

 

[Wildcat Media]

Sprites have been around for awhile. I think for the beginner, I like to describe it as like having a single sheet of paper with all of your art drawings on it, positioned within a grid. Then we use a second sheet of paper with one square cut out of the middle of it, which lets you view only one of your drawings at a time; coordintes, like a map, point to where the particular drawing is that you want to look at.

The sprite image is the single "sheet" with all of the icons on it, and CSS gives us the coordinates (x and y position, etc.) to locate and view only one small portion of that larger file.

 

[CTXMedia]

Why do the positions have a minus sign in front of them; 0px -178px etc?

 

[Paul B]

Because the background image always moves left and up.

The top left corner coordinates of the sprite sheet are 0, 0 (x, y).

 

[Kier]

Why do the positions have a minus sign in front of them; 0px -178px etc?

0px 0px is the top left corner of the image. To move the viewport to the right, you must move the image to the left, with a negative horizontal px value.

 

[Edrondol]

Kier ninja'd by Brogan by 1 minute. Welcome to our world, Kier.

 

[CTXMedia]

Because the background image always moves left and up.

The top left corner coordinates of the sprite sheet are 0, 0 (x, y).

0px 0px is the top left corner of the image. To move the viewport to the right, you must move the image to the left, with a negative horizontal px value.

Thanks - that helps.

 

[Kim]

Golly, this is going to take some getting used to, first thing I do is change the icons, and they are never the same size as the originals... not to mention they are sometimes animated .gif files... I guess that will have to be totally rewritten/worked around to accommodate those in the future.

 

[Kier]

Golly, this is going to take some getting used to, first thing I do is change the icons, and they are never the same size as the originals... not to mention they are sometimes animated .gif files... I guess that will have to be totally rewritten/worked around to accommodate those in the future.

True, but a fair number of our icons used background images already, so if you had made different sized versions, you would have had to edit the CSS in any case -- nothing has really changed in that regard.

 

[Digital Doctor]

Golly, this is going to take some getting used to, first thing I do is change the icons, and they are never the same size as the originals... not to mention they are sometimes animated .gif files... I guess that will have to be totally rewritten/worked around to accommodate those in the future.

Does Bambua's information help ?
http://xenforo.com/community/threads/css-sprites.19650/page-3#post-252238

This CSS sprites seems like a great idea.

YouTube tutorial

Cool tutorial.

 

[Xarcell]

I'm glad to see this, sprites is really the way to go if you have alot of images. By reducing the number of HTTP requests on a site that is running on a shared server will load alot faster, and a little faster on a dedicated one. Best choice is to use as few icons as you possibly can(my opinion), then use sprites for the rest. Happy to see this has made it's way into xF.

Only problem with sprites is that they can be a headache to setup if your not experienced.

 

[Kim]

True, but a fair number of our icons used background images already, so if you had made different sized versions, you would have had to edit the CSS in any case -- nothing has really changed in that regard.

True, but making that change was a cynch, just a tiny bit of CSS or via the Style Properties as a 2 second job - this might be too, I just don't know anything about this whole concept, reminds me of those horrible old Image Map Co-Ordinates which I always hated.

Whilst I can see why a Sprite would make perfect sense on a huge site like Google, or Amazon, which has a LOT of icons and images going on, and millions of loads per minute - for forums it just seems like overkill to me.

I am sure I can learn to live with it.

 

[iTuN3r]

Looks like time to learn something new .

 

[SilverCircle]

It seems like a bit more up-front work but really the long-term benefit is much better. It's easier editing your style and switching out icons. Not to mention the bandwidth you save from having one single file.

It's not the bandwidth, it's the number of HTTP requests that matters. Most browsers limit the number of concurrent requests they'll make to a single server and that limit isn't exactly high. By reducing that number, you can significantly improve page loading performance.

Just check google page speed index - the #1 item they will recommend is using CSS sprites instead of single images and they know why.

CSS sprites is just the way to go today. Another interesting way is to use inline images (regular img tags) with clipping regions.

http://css-tricks.com/3427-css-sprites-with-inline-images/ (this can be a bit trickier than sprites, but the idea is the same).

 

[CyberAP]

Actually I like sprites. And this will be no problem for designers - just change paths.

 

[Xarcell]

for those that are confused about how sprites work, "close your eyes and imagine" 2 pieces of paper in a stack. A top sheet and a bottom sheet. The top sheet has a small square cut out of it, and the bottom sheet has all the images on it. Using CSS you would move the bottom sheet around to view what image you want through the top sheet's cut out square, or "window".

That's why with the CSS code, you have positive & negative numbers for top/left positioning.

 

[John L.]

It's not the bandwidth, it's the number of HTTP requests that matters. Most browsers limit the number of concurrent requests they'll make to a single server and that limit isn't exactly high. By reducing that number, you can significantly improve page loading performance.

Just check google page speed index - the #1 item they will recommend is using CSS sprites instead of single images and they know why.

CSS sprites is just the way to go today. Another interesting way is to use inline images (regular img tags) with clipping regions.

http://css-tricks.com/3427-css-sprites-with-inline-images/ (this can be a bit trickier than sprites, but the idea is the same).

Thanks for the info . I always imagined it saved some amount of bandwidth, but maybe I was mistaken. I realize the speed improvements it provides.

Using image sprites will reduce the number of server requests and save bandwidth.

http://www.w3schools.com/css/css_image_sprites.asp

 

[Jeremy]

Thanks for the info . I always imagined it saved some amount of bandwidth, but maybe I was mistaken. I realize the speed improvements it provides.



http://www.w3schools.com/css/css_image_sprites.asp

In theory it can save bandwidth by creating 1 image so that you transmit less data, but the main advantage is less calls.

 

[RobinHood]

How will this affect those of us who have purchased/installed custom themes? Will we only reap the benefits if the theme author updates it accordingly?

 

[Paul B]

That's always the way with styles and add-ons.

It's up to the authors to update them with each new release.