ErrorVault.com
Home > Spriteme
Spriteme FAQ
Find out more about SpriteMe by reading these blog posts and watching this video.
About Sprites
- Q: What are CSS sprites?
- Q: Why should I bother to create CSS sprites?
- Q: Do many web sites use CSS sprites? Does it make much difference?
SpriteMe Functionality
- Q: What's a bookmarklet? Why did you create SpriteMe as a bookmarklet?
- Q: What browsers has SpriteMe been tested on?
- Q: What's the "share your results" link do?
- Q: Why aren't JPEG images sprited by SpriteMe?
SpriteMe Gotchas
- Q: I get an error when I try "make sprite".
- Q: Some DHTML background images weren't detected by SpriteMe.
The SpriteMe Project
- Q: Is SpriteMe open source?
- Q: Where can I find the code?
- Q: How do I contribute a patch to the project?
- Q: Where's the current bug list?
- Q: How do I submit a bug?
- Q: Who created SpriteMe?
- Q: How are the images combined?
- Q: Who do I contact for more information?
Q: What are CSS sprites?
A: A sprite combines multiple background images into a single image. This is a technique for making web pages faster because it reduces the number of downloads in the page. See Chapter 1 in High Performance Web Sites by Steve Souders for more information about the performance benefits of using sprites. See CSS Sprites: Image Slicing's Kiss of Death by Dave Shea for more information about how sprites work.
Q: Why should I bother to create CSS sprites?
A: Using sprites reduces the number of HTTP requests in the page. This is one of technique for making web pages faster. This is especially important for users with slow Internet connections or who are far away from your servers. Also, some browsers, including Internet Explorer 6 and 7, can only make two HTTP requests in parallel (to the same server). If the page has multiple background images, they are downloaded sequentially, resulting in a slow page.
Q: Do many web sites use CSS sprites? Does it make much difference?
A: The use of CSS sprites is growing. In 2007, only two of the Alexa top ten U.S. web sites used sprites. Today (2009) nine of the top ten sites use sprites. It's a recognized technique for speeding up web pages. And yet, many popular sites that could benefit from sprites don't use them. As of September 2009, here is a list of web sites with the number of HTTP requests that could be eliminated if they used sprites: CNN (30), eBay (21), WSJ (39), and USPS (37).
Q: What's a bookmarklet? Why did you create SpriteMe as a bookmarklet?
A: A bookmarklet is a JavaScript file, plain and simple. The key of a bookmarklet is that the user can choose to drop this JavaScript file into any web page they choose. So it's a way to add functionality (like discovering sprites) to web pages that wouldn't otherwise have that functionality. I use bookmarklets frequently to enhance web sites. I build tools as bookmarklets as a first choice - that way they can run on all browsers. If I can't do what I want using a bookmarklet, I'll next try Greasemonkey, and finally as a browser plug-in, typically a Firefox add-on. See the Wikipedia definition of bookmarklet for more information.
Q: What browsers has SpriteMe been tested on?
A: SpriteMe has been tested successfully on Firefox 3.x, Ineternet Explorer 6-8, Chrome 2, and Safari 4. It generally works on Opera 10, but the sprite injection step needs more work.
Q: What's the "share your results" link do?
A: Sharing your results records SpriteMe's savings. These results are visible in the savings page. The results that are saved are the URL (minus any querystring), the number of background images and their total size before SpriteMe was run, and the number of background images and total size after SpriteMe was run. No personal information is saved. The IP address is not saved. Do not share your results if you do not want other people to see your page's URL!
Q: Why aren't JPEG images sprited by SpriteMe?
A: Currently, SpriteMe has no knowledge of the number of colors uesd by each image. It's important to stay within the 255 color limit to minimize image file size. Creating sprites that combine jpegs with other images typically results in a significant increase in file size. It's possible that jpegs could be combined together and with other truecolor images. See issue #69.
Q: I get an error when I try "make sprite".
A: Although it's possible that the spriting web service is broken, this most frequently happens when someone tries to sprite images that are not publicly accessible. The sprite images must be accessible by the coolRunnings spriting service. If you can't make them publicly accessible, you could create a local instance of coolRunnings. Instructions for doing that are TBD.
Q: Some DHTML background images weren't detected by SpriteMe.
A: SpriteMe finds the background images in the page by crawling the DOM. If you elements that are created dynamically, but aren't currently in the DOM, their background images won't be found. One workaround is to create a temporary page that uses all the background images. But it might actually be better if the sprite contained just the background images used in the initial rendering of the page, so the sprite image is smaller and downloads faster.
Q: Is SpriteMe open source?
A: Yes. It's licensed under the Apache License, Version 2.0.
Q: Where can I find the code?
A: On Github in the spriteme repo.
Q: How do I contribute a patch to the project?
A: TBD
Q: Where's the current bug list?
A: bugs/issues
Q: How do I submit a bug?
A: Go to the issues list to submit a new issue.
Q: Who created SpriteMe?
A: SpriteMe was created by Steve Souders, the web performance guru behind YSlow, High Performance Web Sites, and Even Faster Web Sites.
Q: How are the images combined?
A: SpriteMe uses coolRunnings, a sprite generation service built by Jared Hirsch.
Q: Who do I contact for more information?
A: Go to the SpriteMe discussion list on Google Groups and submit a post.
Microsoft & Windows® logos are registered trademarks of Microsoft. Disclaimer: ErrorVault.com is not affiliated with Microsoft, nor does it claim such affiliation. The information on this page is provided for informational purposes only. © Copyright 2018
