Give your JPEGs alpha channels

Heads up! This post was written in 2014, so it may contain information that is no longer accurate. I keep posts like this around for historical purposes and to prevent link rot, so please keep this in mind as you're reading.

— Cory

If you need alpha transparency on the web, 24-bit PNGs are usually your best bet. The only problem is that PNGs are lossless and can grow in file size very quickly — much larger than your average JPEG. So what if there was a way for JPEGs to support alpha channels?

I discovered this trick on eleqtriq. The author demonstrates how you can embed a JPEG into an SVG and, with the clever use of a mask, simulate a JPEG with alpha transparency. Since browser support for SVG is pretty good, there's nothing stopping you from using this method right now.

Cool trick, right? Check out Dirk Weber's blog to see exactly how it's done.