There might be a industry standard name for this process, but I call it using Doom Tiles. If you ever hacked around on the original video game Doom (or even Quake), you’ll get the reference I think.
What is boils down to is loading one large graphic for all the icons on your site. Or at least, grouping sets of icons onto a large graphic, and loading the whole set at one time.
The reason this technique is useful is because opening and closing an HTTP connection from a client to a server can be a very timely process. If you run ySlow or Safari’s Network Timeline, you’ll find that a lot of HTTP connections can really hurt your site’s performance. It gets an order of magnitude worse when you are building an iPhone web app, or an app that goes over a cell network.
Here is a step by step on how I use this a technique (and like I said other people have probably done the same thing but call it something else).
First, it makes things a lot easier if you define icon / asset sizes up front and stick to it. In this example I am choosing 50×50 for simplicity.
Fire up your favourite image editing software, and create a 50×50 gird using the Grid or Guide tools. I use Pixelmator (it’s powerful and it’s inexpensive).
Then go nuts on it with your über graphic designing ability:
(Don’t be upset if your art doesn’t look as good as mine. I am a professional.)
Once you have your Doom Tile, you can use it in your html by using the background-position CSS attribute. You can use background-position to choose which part of the image you want to display. Remember that your values are going to be negative because 0,0 is the top left of the graphic and you’ll need to move the graphic left to change the tile you want to show – “pull it left” for lack of a better term.
For example, if we wanted to show the second tile on the first row we would need to shift the graphic to the left by subtracting 50 from the X axis. Something like this:
...
img.example {
height: 50px;
width: 50px;
padding: 0px;
background: url(DoomTile.png) no-repeat;
}
img.example-2 {
background-position: -50px 0px;
}
...
<div>
<a href=""><img src="" class="example example-2" alt="" /></a>
</div>
This defines the image’s view port to be 50px by 50px, sets the background to our Doom Tile, and then moves the background image offset to -50px on the X axis. This moves the second tile into the image’s 50×50 view port. Likewise, if you wanted to move to the second row you would subtract 50 from the Y axis.
You can download a working example of this here (only tested in Safari, but should be fine in any modern browser). This is what the example looks like when run:
You can also use this for image hovers or for simple animation (which is how it was used in Doom). The example also has a simple demo of animation using the second row of tiles.
Even though this is a simple example, you can see by Safari’s Network Timeline why this is a helpful technique. The example site only makes two connections (not including the XHTML logo), but displays 5 graphics and an animation.
« FieldRunners iPhone App | Home | Windows 7 »
Brilliant. Have seen this used, and have used it on a smaller scale – however, I have haven’t seen it explained as well before. w/ The Doom reference? forgetaboutit!
Dave Shae called these ’sprites’ (same game terminology)
http://www.alistapart.com/articles/sprites/
This is an interesting concept Rob and as I spend a lot of time looking at performance issues I am interested in what you expound here. My only thought point is if there could be browser specificity issues, I realize you have tested on Safari so far and it will be interesting to see if there are any issues with other browsers.
@Jim Priest – that’s a good name actually. That’s really what they are “Sprite Maps”. I just gave that article a quick look and either he is doing something slightly different than this, or his example seems overly complicated, but I think in the end he is saying the same thing.
@Mike Brunt I’ve used this a lot doing iPhone application development, and a bit doing normal web site development, and I have a vague memory of IE6 not working right. Other than that I don’t think there is a problem (IE7, FF, Opera, etc). If you don’t feel like downloading the example, you can try it if you want: http://robrohan.com/examples/DoomTile%20Files/DoomTilesExample.html
@Mike Brunt I just gave it a quick look, and it looks to work fine in IE7, Firefox required a blank.png for the src or it would render the view port correctly (might be able to be fixed with a bit of CSS play though), and IE6 worked ok too except with the animation example where it reloaded the page on every frame change (because IE6 is dump ;)). Hope that helps.
I remember the first time I saw this. It was the Hotmail rich editor toolbar probably back around 2000 or 2001. I was trying to hack together a rich editor and wanted to “borrow” the Hotmail toolbar icons. Took me for ever to figure out the twists and turns their code was taking, but that was nothing compared to the surprise I got when I found out that all the icons were a single gif.
Their implementation was more or less the same as you describe with the added twist that the icons were laid out in 4 rows. One row for each possible button state – up, down, over, disabled. If the icon didn’t have multiple states, the same icon was copied in each row above. The net result was that all you had to do to switch button state you was modify the css position by 20px vertically for each state. That layout also made it really simple to edit and compare the icons side by side.
Once I got my head around what was going on I was suitably impressed.
I had completely forgotten about it ’til just now :-)
How different is this from the sliding doors technique that’s been popularized by the web standards groups for CSS design for at least the last 5 years or so, (http://www.alistapart.com/articles/slidingdoors/)?
regards,
larry
Doing a quick look on that article, not reading it mind you, it seems to have nothing to do with sliding doors. Or at least very little. That appears to be how to get tabs to look a specific way, and this is about having all the icons on your site in one file. If you wanted to update all the icons on your site, you could just replace the one file. Further, the reason for the use of this would be to try to make your website load time a bit faster – that seems to be a technique to make something look pretty.