Our imaginations are wild! I have an Aunt on Facebook who loves to share a really weird “Sticker”. It’s this cat with psycho eyes who puts his thumb up and glares. The eyes are really scary. The word “GOOD” appears above his head. I think Facebook put it up for people to use ironically, but of course, my Aunt just uses it. The horror show I am describing is pictured below.
My Aunt’s Favorite Gif
I get a kick out of this thing, and today I decided I want to save the picture for some future use. So I right click, save as, and I’m done.
But Wait …
To my shock this was no regular GIF. This was a CSS sprite! (A sprite is a series of pictures, which are animated to create the illusion of motion). CSS is the language which adds design flare to the internet. As I sat there looking at the picture, I began to wonder how I would animate it and why Facebook would use a spritesheet, instead of a GIF. Then I decided to answer both those questions, and share the FASCINATING answer with the world. If you want to know a secret of this industry, read on.
9 Cats, 1 Image?
Unlike most of the things I blog about, this is actually kind of interesting. Facebook puts 9 cats in a single image and then covers it all up, so you can only see one cat at a time, like this:
Then, in order to create the illusion of motion, they choose which cat you see, in which order. Just like an old fashion zeotrope animation. If you’ve ever been to the Regina Science Centre, then perhaps you’ve played with one?
Old timey animation via Zeotrope
When you get down to it, this is not really different than a GIF file. Show several images in a particular order, and the human mind is fooled into seeing animation. So why didn’t facebook just use a GIF? well, that’s where things get interesting.
The Internet is Slow
I don’t mean to start a flame-war here but the internet is too slow. I will caveat that statement with “the internet is really, amazingly fast” but even that speed is still too slow. Bandwidth is the among the most precious resources in the Universe and we take it for granted. Well … you take it for granted. Web designers and developers don’t. Well… good ones don’t.
Your browser (Safari, Chrome, Firefox, etc. ) fetches resources from a server and compiles those resources into a website for your perusal. Most of this task is easy. There’s only 1 really difficult part: fetching. When your browser goes to the server to fetch your image file, it’s a like an ancient hunter, venturing into the great unknown. It may never see home again. It’s really sticking it’s neck out. And it’s not as fast as we’d like it to be. Let’s ask ourselves, just how slow is it?
You are a normal, decent, human-being, congratulations. As a normal, decent person, you would say that fetch-time is measured in milliseconds and is not a big deal. I am a programmer. I cringe every time milliseconds are wasted because I know that these milliseconds stack up rapidly. And the result is that the internet begins to seem slow.
With hundreds of billions of transactions between Browsers and Servers on Facebook every day, the designers and developers at that company need to be really stingy with bandwidth. So instead of sending 9 individual pictures of a cat, they send 1. Sure it’s 9 times “bigger” than a single cat would have been but your browser only stuck it’s neck out once and that may very well add up to years of saved time, literally, when you consider the volume of Facebook usership.
Now the Fun Part!
I am as much a showman as a scientist, so I cobbled together some JavaScript and CSS to emulate the work done by web designers at Facebook. Go ahead … animate the cat.
Okay, that’s it for today folks. If you need someone to explain CSS animation via a scary cat OR if your prince albert business needs a solid website or database or custom application, then …