To view my active website, please visit https://abstract.properties

AlphaJPEG

By combining two images, an alpha channel can be extracted.

What is it?

AlphaJPEG is a JavaScript library for the generation and consumption of JPEG images which contain extra information to obtain an alpha channel.

Why is this useful?

Though, WebP allows for superior (to JPEG) lossy compression with an alpha channel, it is not a viable image format in the modern browser landscape. Once WebP takes over, this tool will be obsolete.

This tool will allow you to perform lossy compression on an image with an alpha channel in an image format supported by all modern browsers. Anecdotally, this results in a JPEG 20-50% of the original PNG file size with very little discernible artifacts.

How does it work?

A source image with an alpha channel is rendered onto a white background and a black background. These two images are combined into a single JPEG image which is twice the original image's width and lacks the original image's alpha channel.

To render, the red, green, and blue channels are obtained (via averaging) from the images rendered on white and black backgrounds. The alpha channel is obtained by calculating the delta of the white and black image's green channels. The green channel is used because JPEG images have higher green channel quality than the other two, since green is the most sensitive color to the human eye.

Where do I get it?

https://www.github.com/sufianrhazi/alphajpeg

Demo

Drag an image (with an alpha channel) here to preview.

JPEG Quality:

Change background color