Definition of ‘Sprites” according to Dictionary.com
sprite also spright (sprīt)
n.
1. A small or elusive supernatural being; an elf or pixie.
2. An elflike person.
3. A specter or ghost.
4. Archaic A soul.
5. Meteorology A large, dim, red flash that appears above active thunderstorms in conjunction with lightning.
Hrm…not quite what I had in mind for the Sprites I am referring to, though having ’small and elusive supernatural beings’ on your web page might be awesome.
According to Alistapart.com, Sprites were originally used in old video games using bitmapped 2-dimensional icons. The problem came when hundreds of thousands of these icons were needed to keep a game’s play flowing. The solution? A giant master ‘grid’ that held those thousands of tiny graphics to later be pulled into the games visual flow based on positioning.
Using CSS and the Sprites technique on the web isn’t new or revolutionary. The date of that Alistapart.com article is March 5th, 2004. However, as web sites become larger and the need for a better user experience increases, web designers & developers need outlets and tools to increase the performance of their website. By using Web Standards, CSS, and Sprites, websites can increase the loading speed of the site while still maintaining effects such as image rollovers and image placement.
ChaCha’s Sprites Refresh
ChaCha’s homepage and results page uses the Sprites technique. Several other projects we are working on will soon be receiving a “sprites” refresh as well which will help cut down on our existing HTTP requests as well as image file sizes. Keeping up with the latest technological trends is vitally important to any web company, and sprites are just one of the many performance enhancing techniques we are implementing.
Yahoo is our Sprites Guinea Pig
I want to use Yahoo! as our Guinea Pig. According to my Firebug, Yahoo’s homepage on first load requires 210kb of stuff to download. This ranges from JavaScript files, images, stylesheets, text, etc. Most things that require 210kb to download would take several seconds for people on slow internet connections. Even though as a user, the first time you visit Yahoo you are downloading 210kb of information, the “experience” you have makes it appear that isn’t the case. The site literally “pops” when you visit it for the first time. Yahoo’s Exceptional Performance team goes through their list of 14 elements that makes that initial user experience incredible.
Image Sprites are just one of their 14 bullet points to decrease the HTTP requests a user makes when visiting their website. I suggest watching their “High Performance Websites: 14 Rules for Faster Pages”, it’s fantastic.
Yahoo’s Icons (Sprites)
Yahoo has an extraordinarily large amount of tiny icons sprinkled throughout their homepage. The left hand navigation is a perfect example. The left hand navigation shows 18 icons. If the icons were downloaded individually, a first time visitor would make 18 HTTP requests. It’s not that the file size of the icons is large as they are roughly less then 1kb apiece. It’s that waiting for 18 icons to download takes time and delays the loading of the webpage. What did Yahoo do? They built a large “grid” of icons to represent 1 download. Check out the left hand navigation grid. Official count: 74 icons.
Here is a sample of Yahoo’s icons.
So even though the left hand navigation is setup for 18 icons, they have an extremely large list to “allow” for more icons to be displayed. Assuming all 74 icons are 1kb apiece, that is 74kb to download and 74 HTTP requests. Talk about a slow load.
BUT, because Yahoo utilizes the Sprites technique, instead of 74 individual HTTP requests, it becomes 1 HTTP request. All at the low file size of 15kb. The dimensions are: 420px x 1700px.
Using CSS, the icons are properly positioned using the background-position attribute based on an elements ‘class’ or ‘id’.
In Summary
Using CSS for things like Sprites is not for a designer/developer’s faint heart. It does take some practice, patience, and great understanding of how the background-position attribute works. It also takes great detail in building a proper ‘image sprite/grid’ to use with your CSS. There are online tools that help you build a sprite map, such as the CSS Sprites Generator. I personally don’t use tools like that, as I manually make mine.
As mentioned above, ChaCha’s homepage and results page are benefiting from the Sprites technique and has reduced our HTTP Requests on the homepage by 59%.
Next Article
In my next article, I will explain how to make a steps menu using CSS and Sprites in detail similar to this one. The example will be directly in alignment with a steps menu procedure we are using in a portion of our new Thin Guide Application. Stay tuned…
About Bryan K
Be the first to leave a comment