As someone who doesn’t really keep up with what’s going on in the world of web design (as in HTML, CSS etc), I was pleasantly surprised when I ran into an article on CSS sprites. The term sprite will be familiar to those of you who have encountered any kind of graphics programming on old hardware such as Commodore 64 and Amiga. A sprite, according to Wikipedia, is a two-dimensional/three-dimensional image or animation that is integrated into a larger scene.
How does this apply to web design? Well, some clever web designer figured out that you can composite a number of smaller images into one large image and then use CSS to display a particular part of that image. The advantage is that the browser only needs to request one image from the web server even though there appears to be many on the page. This leads to fewer HTTP requests and all-round improved performance. Additionally, it decreases any kind of lag that might be introduced when switching images.
Using CSS sprites is easy. Just combine a number of images into one and use the offset parameters of the CSS background property to define which part of the image you want to display. I use CSS sprites for the icons in the main navigation of this blog. The composite image is called nav_sprites.png. As you can see, the first sprite in the image is the blog icon (the plus sign). In CSS, I’ve defined this as:
background: url(img/nav_sprites.png) 0 0 no-repeat;
The hover style for that link is defined as:
background: url(img/nav_sprites.png) 0 -28px no-repeat;
In other words, the same image, but the image for the hover style is offset by -28 pixels from the top of nav.png. The next image is offset -56 pixels and so and and so forth. It should be worth mentioning that in addition to setting the offset, you might also need to set a width or height for the element in question to prevent stuff from the adjacent sprites to be displayed.
In my case, I placed all sprites in one “column”, but there’s nothing stopping you from adding multiple columns to the master image. In that case, you need to use the horizontal offset parameter as well (0 in my case).
Personally, I love these kinds of tweaks. CSS sprites are really easy to implement and even though the performance gains might not be huge, I’m a big fan of anything that streamlines the operation of computers and technology in general. There’s been some discussion on where to draw the line when it comes to CSS sprites. One could, in theory, include all images that are used on a website in one big composite image, but I think that’s taking it too far. If the browser needs to download a huge image before it can display any graphics at all on the page, the user experience will suffer. I think a good practice is to group images together. In other words, one composite image for icons, one for general UI elements, one for borders/corners etc. And don’t forget, this only applies to images that you display with the CSS background property, not the <img /> tag.
Happy spriting!
Edit: I forgot something. If you’re a bit lazy and you already have a large number of images that you want to combine into one master image, there are a couple of generators online that will do the job for you. I’ve tried CSS Sprites Generator and it worked great. There’s also this one which appears to have more features, but I have yet to test it myself.
Edit: Solution in the comments.
I’ve been playing around with the iPhoto ’09 face detection and face recognition stuff today. Having tried a lot of stuff to get the best results, I now want to “reset” the face recognition database or whatever so that I can start from scratch and teach it properly. Does anyone have any idea how to do this apart from emptying my library and re-importing everything again? There must be a way, right?
I work at Lund University. So does approximately 5,500 other people. Each employee has a 250 MB mailbox in a horribly outdated and buggy e-mail system called iPlanet Messaging Server. Work is currently under way to migrate all those mailboxes to Exchange. In the process, the mailbox quota will be increased to 2 GB (!). That’s a potential 11 terabytes of mailboxes. I’m glad I’m not involved in that project :)
As I was watching TV with my wife yesterday, I heard a rather loud grinding noise from my Mac in the next room. I approached the computer and noticed the screen was black and that there was a disturbing ticking noise from one of the harddrives. Turns out my system disk, a 36GB Western Digital Raptor, had failed.
At first, I was a bit worried that I had lost data, but luckily, when I first installed Leopard, I had set the location of my home directory to the root of a different harddrive (my main storage drive). In other words, even though my system disk crashed, all my documents, music, movies as well as application settings and stuff like that was stored on a different drive. I replaced the failed drive and installed a fresh copy of Leopard. I then reset the location of my home directory to the storage drive and rebooted. After about an hour of re-installing applications on the new system drive, I was up and running as if nothing had happened.
Storing my home directory on a separate drive has saved my bacon more than once. I strongly recommend it.
This last brush with harddrive death has made me realize that I need to setup a more robust backup scheme. If my main storage drive had failed, I would have been screwed. I think I have a DVD backup of most of my important documents and development stuff somewhere and I have an iTunes backup that’s a few months old, but apart from that, I have no backups.
Can anyone recommend a good tool for backing up to Amazon S3? I’ve heard good things about Jungle Disk, but I’m open to suggestions.
Religulous is Bill Maher’s documentary on the lunacy of religion. Here’s are his final comments at the end of the film.