Implemented  Sprites

Andy Huang

Well-known member
The forum already loads ridiculously fast. But I think it will be even faster, and lighter on the server (1 http request instead of how many ever now) if we make use of CSS sprites for things like smilies, buttons, etc.. I've looked around and saw no suggestion for this, so I figured I'd throw this into the pot :)
 
Upvote 3
This suggestion has been implemented. Votes are no longer accepted.
3 javascript file, 3 css file and now one image file? That's insane :)
The way I see it is a couple images still... at least 1 for smilies, 1 for buttons (editor, collapse, etc.), and 1 for general icons (forum read, new post, etc.)... But 1 image could work too, I suppose :)
 
Nah, keep them as separate images and automatically rebuild the sprite when the admin adds/changes smilies, etc.
 
I'm not familiar with sprites but is that 1 image file with all the images combined into it? If so that sounds like a bad idea, in practice, because one of the first things people will want to do is customize the images and they can't be expected to rebuild single files.
 
I like the way you think :)
Thanks. :)

I'm not familiar with sprites but is that 1 image file with all the images combined into it? If so that sounds like a bad idea, in practice, because one of the first things people will want to do is customize the images and they can't be expected to rebuild single files.
Why not have an admin interface where you could upload your individual files and then XF rebuilds the sprite images internally?

Also, you wouldn't want one sprite image. You need separate sprites for horizontal and vertical gradients, for example (IIRC).
 
I'm not familiar with sprites but is that 1 image file with all the images combined into it? If so that sounds like a bad idea, in practice, because one of the first things people will want to do is customize the images and they can't be expected to rebuild single files.

Yes, it is combining all images into one single image.
More information can be found here: http://www.smashingmagazine.com/200...f-css-sprites-techniques-tools-and-tutorials/

Customization can be done fairly simply if it is done correctly (see what Enigma mentioned in #5). There are also many pre-done tools online which will help you merge your small images after you have them hand crafted to your needs.
 
That's looking at it from a developer's POV. We need to look at it from a regular admin's POV and the first thing they would want to do is customize their images.

*Side Note - Just giving you guys the other side :)
 
They do look really cool... maybe it could be an option? Even with online tools or an admin cp tool many people are just going to want to be able to change an image and not have to do anything else... but if there was an option so those who wanted to use it could (kind of like moving avatars and attachments to the file system) then that would be ideal.
 
That's looking at it from a developer's POV. We need to look at it from a regular admin's POV and the first thing they would want to do is customize their images.

*Side Note - Just giving you guys the other side :)

Definitely true.

Why not have an admin interface where you could upload your individual files and then XF rebuilds the sprite images internally?
Even better:
Keep files as separate small individual images in the package. Call the images you need through sprites.php or something which stitches them together, and caches the output. In admin interface, make a big rebuild cache button to manually rebuild cached sprite sheet, AND have interface for admin to upload new images and rebuild the sprite sheet at end of the process.
 
That's going to be a huge image if you have a lot of smilies, and they're all animated. Every one having various amount of frames per second.
 
You could also detect if the uploaded smilie is an animated gif and special-case it. Not include it in sprites. Should still work fine if the system is designed properly.
 
After all the discussion i have come to this conclusion, I guess sprites would be good for sites like facebook and yotuube where the images don't change that much. They had 1 set of similies and buttons for about 2 years now. For a software like this where to each man his own, it would end up doing more harm than good.
 
The way I've seen them doing gradients around the site I don't think it would be possible to have a gradient sprite, because the gradients are used on elements of varying width and height.

However for other little icons and smileys, sprites would definitely be nice to have. :)

As far as editing smileys, you guys kind of have to look at it the other way: instead of uploading a bunch of small files, you would only have to upload one image. And if you wanted to edit multiple smileys at the same time, they're all in the same image. Likewise, designers who make smiley packs wouldn't even need to slice their images necessarily - they could design in one image and output in one image, perhaps along with an XML file to define the locations of the individual smilies in the image. :)
 
Top Bottom