I built a website with a large image in the center and a CSS3 gradient behind it. It’s kind of silly that I’m spending 880kb on a PNG file just to get transparency, I thought. Transparency is just RGB channels plus an alpha channel. While JPEG doesn’t support it, there’s no actual reason that it can’t be done, and with so much use of transparency on the web, we’re piping giant images onto mobile devices all the time.
So I found this post by Jack Turner which explains how to accomplish it. As expected, it’s conceptually simple, and HTML5’s Canvas element allows us to slap the alpha channel of a PNG onto a JPEG, creating a beautiful image. I used it to reduce my 880kb PNG file to a 57kb JPEG + 55kb PNG file, or an 87% reduction in filesize. It looks the same.
Then I found Jim Studt’s article, which outlines an easy way to encode the PNG into the JPEG’s metadata, in a data element. His version begins with alpha0, which allows for nine more iterations of this standard to be built. The alpha0 specification uses a PNG’s alpha channel, which requires embedding an entire lossless PNG into the file, whose size is limited to either 32kb or 64kb. He recommends designing an alpha1, which allows for a JPEG file as alpha and allows it to span data elements, circumventing the filesize restriction.
It’s 2015. Jack’s article was written FIVE YEARS AGO. We should have transparent JPEGS already. This would be easy to implement for a developer. From my standpoint, what we need to do is straightforward:
- Implement Jim Studt’s suggestions for an alpha1 specification, which encodes a JPEG- or PNG-compressed single channel image into the APP7 metadata of a JPEG file.
- Write programs, GIMP and Photoshop plugins, and webapps which convert PNGs to these special JPEGs.
- File bug reports with major browsers. If it becomes widely used, all software will support it.
So what do you think, internet? Could we have this in widespread adoption by February 28?