A Note About Ed
Ed is one of site's Mascots, and as head of PR, you'll see him the most. He doesn't do much yet (managers generally don't), but expect lots of cool stuff soon, and not just animations.
When you look at Ed, you don't see much except a grasshopper. However, you'll realize that this guy is composited over a colorful background, which requires PNG files. A transparent PNG of that size is pretty big. It was over 400K! For just one image!
But, I'm not satisfied with that. A JPG would be smaller, but doesn't support transparency. So what to do? I did both! I saved a JPG version of the image (only 35K!) and then used Gimp to extract just the alpha channel from the transparent version. The alpha channel went into a PNG of its own, but without any picture data, resulting in a 43K file. The code then uses an HTML5 SVG element to apply the PNG as a mask against the JPG image. 78K instead of 422K!
The balloons are pure CSS. And a little more CSS fiddling got the screen working correctly on mobile systems, plus there is a cheat. I have the Tengine web server set to detect mobile browsers and magically "overlay" a directory of modified files for mobile. In most cases CSS works fine, but combining both has lots of options!
If you haven't seen the result ----> Click Here!