Instead of using canvas, for webkit at least it makes more sense to use <a href="http://webkit.org/blog/181/css-masks/" rel="nofollow">http://webkit.org/blog/181/css-masks/</a> Canvas is a good fall-back for other browsers.
For even bigger bandwidth savings paint a solid color over the non-visible portion of the jpg. There's no need to transmit all that image data if you aren't going to show it.<p>For this example I was able to quickly trim the jpg size from 35k to ~24k in about 60 seconds using Photoshop.
This was a common technique in game development a years ago, back when gospel was no larger than 10MB for downloadable casual games. You can get great compression with GIF/PNG for alpha channel and JPG or JPEG2000 for color data. The downside is you usually get multiple compression artifacts on screen (assuming texture compression like DXT), which doesn't apply for web use.
I take it he means an 8-bit alpha channel, not a 24-bit alpha channel?<p>Anyway, here's the JPEG FAQ explaining why using JPEG for alpha wouldn't be a good idea even if it was supported: <a href="http://www.faqs.org/faqs/jpeg-faq/part1/section-12.html" rel="nofollow">http://www.faqs.org/faqs/jpeg-faq/part1/section-12.html</a>
One thing that hasn't been addressed is the cost of making the second image request. There is probably a break even point for this technique where it becomes useful, but the added complexity greatly limits its utility.
Maybe this should be done by extending JPEG to support alpha channel?<p>It might have better chances for adoption than completely new format like WebP.<p>We'll just have another decade of complaining that IE doesn't support alpha, but we've been there and survived :)
That is a neat implementation and a nice hack to implement it with XOR.<p>You've also taught me another valuable less: I created exactly this (actually with slightly different masking method) about a year ago, but I never got around to releasing it. Thank you for reminding me that <i>real artists ship.</i>
Sure it's 33% the size of PNGs. It's 33% the quality. Am I the only person in existence who hates the "quantization" look?<p>edit: The strength of PNGs is not photography, but images with large blocks of solid colors; screenshots, etc. That's why the example in the article didn't suffer.
Neat hack, the lesson most of us should draw from this though is avoid designs that use big images with alpha transparency as they are many kbs! If you have to you maybe able to use this someday . . . for some of your users.