Give your JPEGs alpha channels

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.

Author avatar

About the author

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.