CSS filters, GIFs, and performance

Or, how to persist in not learning Photoshop

A few months ago, I blatantly ripped off Charlie Gleason’s idea. His presentation at MelbJS featured greyscale, full-screen, animated GIFs (of his own face, among other things) behind the text on many slides. I discovered that he’d painstakingly edited and optimised each GIF in Photoshop so it looked good behind the text on each slide.

I wanted to do the same thing, but without all that work.

The opening slide of my presentation

My presentation about strict mode in Javascript at Web Directions Code a few months ago was the result. You might want to open that in a tab now because I use 24MB of gifs and it can take quite some time to load. Oh, and because it was only built to run on my machine, it may not work at all on yours. Sorry about that. (If you’re interested in the topic, here’s a video of the talk).

This post is about some of the things I learned along the way.