Glen Maddern on CSS filters

Glen Maddern made an awesome GIF-based slideshow for a JavaScript talk. He explains how he built it to perform well:

I honestly don’t know if this is a “good idea”, but it solves this particular problem. My reasoning goes like this:

  • The GIF isn’t very big, dimensions-wise
  • Scaling up the image takes work
  • Applying the filter takes work proportional to the number of pixels
  • Why not apply the filter first?

He applied the blur first, then scaled up the image using a CSS transform. Neat hack.

(via Web Design Weekly, #96)