9 ms·
Glue is a simple command line tool to generate CSS sprites
- splitbrain 15y agoThis makes no sense to me. It assumes that I'll attach the icon to it's own HTML element because it sets the width and height explicitly. Adding icons to your links won't work this way. Generating useful sprites is much harder than this guy thinks IMHO.
- ceejayoz 15y agoSprites are used for a lot more than just adding icons to links.
- splitbrain 15y agoAdding icons to links was just one example. If you're coding semantic correct HTML you very rarely have background images that are exactly the size of your HTML element. The way that glue generates sprites makes them only useful for when you're replacing img tags.
- Brajeshwar 15y agoChecking it out. This should be interesting. CSS Spriting was made way manageable with Lemon, a Compass plugin which later became part of Compass Sprite. The few limitations on the part of Compass Sprite, had always let me do my own sprite, I usually like those tightly packed image sprites.
- chriseppstein 15y agoYou should tell us what those limitations are :)
- viroide 15y ago+1
- wiradikusuma 15y agoHow is it compared to http://csssprites.org/ http://csssprites.org/?
- splitbrain 15y agocsssprites is much more complicated to use but will take image alignments into account which makes it the more useful tool.
- vidarh 15y agoWhere Glue generates the CSS for you, csssprites seems to expect you to first add all the sprites as backgrounds to the CSS rules you want to use, and then annotate them with comments and then process your CSS to replace those rules with suitable rules. Glue on the other hand generates the CSS for you, but expect you add a CSS class to the elements that should contain the sprites (or you can modify the generated CSS of course).
- giloux 15y ago+1
- krosaen 15y agocool! wondering how this differs from http://yostudios.github.com/Spritemapper http://yostudios.github.com/Spritemapper
- alpb 15y agogood point, spritemapper seemed more confusing although it gives you a fine tuning it lacks the simplicity.
- zennit 15y agowhat about https://github.com/jakesgordon/sprite-factory https://github.com/jakesgordon/sprite-factory
- zennit 15y agosprite-factory also works with guard https://github.com/christopherhein/guard-sprite-factory https://github.com/christopherhein/guard-sprite-factory
- baby 15y agoI don't get the sprite thing. How is it better for optimization to load every single image of the website right away, and to reload the same picture when the image is modified?
- ceejayoz 15y agoFor lots of tiny images like icons, you're often better off loading one 200kb image than 100 2kb images. HTTP requests have significant overhead.
- ryankshaw 15y agoso I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-data/ http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/ http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer brings up 2 possible drawbacks of a data-uri based approach: http://stackoverflow.com/a/3525961/897583 http://stackoverflow.com/a/3525961/897583 but it seems like if you are worried about your other css rules being blocked by your data-uri background-images, either put them in a css file that loads after your important rules, or just put them at the bottom of the css file. and it seems like with gzip the increase in size is negligible.
- afhof 15y agoCaching is probably a good reason for using the sprite approach. Sprites are probably less dynamic than the HTML being generated, so the client will likely be able to just pull up the sprite from Cache.
- ryankshaw 15y agoI am not suggesting putting data-uri's in the html, i am suggesting doing it in a css file. which would cache just as well as any sprite you may be using
- tomjen3 15y agoYou limit the number of connections necessary to download the sprites, you avoid having the client 'hickup' in when you show a new button and you only have to have on cache-hit.
- ryankshaw 15y agoagain, I am not suggesting doing data-uri's inline in the html. I suggest doing it in a special css file. if done right, in which case the 'hickup' and and extra http requests would not happen.
- brainsqueezer 15y agoPHP users. I'm looking for something like this in PHP. Anyone?
- pavel_lishin 15y agoIt doesn't seem like it would be terribly difficult to port to PHP; why not do it yourself?
- alexchamberlain 15y agoWhy? Would it not be simpler to do this before hand?
- joshfraser 15y agoOne thing to keep in mind when generating sprites is cachability and the various paths that people will take through your site. You should consider the probability of those sprited images being served together on a page. I've seen people blindly sprite all their images on their site, even if only a small percentage of those images are used on a key landing page. This can cause a bad first impression with a slower experience than necessary. Worse still, I've seen people create a separate sprite for each page on their site and complete lose the benefits of local browser caching. While this might look good on a single WebPageTest, it's terrible for your overall performance. A good method is to identify your top landing pages, then look at which images always appear together and might make sense to be sprited. Keep in mind, if they are small and are included on every page, it may make sense to use a data URI instead. You'll also want to make sure to sprite your images in the same order vertically that they appear on the page to allow for progressive loading.