1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Implemented Sprites

Discussion in 'Closed Suggestions' started by Andy Huang, Aug 3, 2010.

  1. Andy Huang

    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 :)
     
    krstep, Fred. and Enigma like this.
  2. Enigma

    Enigma Well-Known Member

    XF already uses very few images to begin with, but this is still a worthy idea.
     
  3. Brandon_R

    Brandon_R Guest

    3 javascript file, 3 css file and now one image file? That's insane :)
     
  4. Andy Huang

    Andy Huang Well-Known Member

    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 :)
     
  5. Enigma

    Enigma Well-Known Member

    Nah, keep them as separate images and automatically rebuild the sprite when the admin adds/changes smilies, etc.
     
    Fred. likes this.
  6. Andy Huang

    Andy Huang Well-Known Member

    I like the way you think :)
     
  7. BirdOPrey5

    BirdOPrey5 Well-Known Member

    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.
     
  8. Enigma

    Enigma Well-Known Member

    Thanks. :)

    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).
     
  9. Andy Huang

    Andy Huang Well-Known Member

    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.
     
  10. Brandon_R

    Brandon_R Guest

    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 :)
     
  11. BirdOPrey5

    BirdOPrey5 Well-Known Member

    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.
     
  12. Andy Huang

    Andy Huang Well-Known Member

    Definitely true.

    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.
     
    Enigma likes this.
  13. Ahmed

    Ahmed Well-Known Member

    Great idea, I think it's better to put images that are the same width and height in one image.
     
  14. Floris

    Floris Guest

    How do customers of XF who want animated smilies use a sprite?
     
    BirdOPrey5 likes this.
  15. Andy Huang

    Andy Huang Well-Known Member

    Do animated gif sprites for the smilies then :)
     
  16. Floris

    Floris Guest

    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.
     
  17. Enigma

    Enigma Well-Known Member

    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.
     
  18. Ahmed

    Ahmed Well-Known Member

    There can be an option in the admin cp to use animated smiles or sprite.
     
  19. Brandon_R

    Brandon_R Guest

    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.
     
  20. Erik

    Erik Well-Known Member

    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. :)
     
    Ahmed likes this.

Share This Page