Use JPEG for transparency instead of PNGs

Question

JPEGs are smaller in size then PNGs. So. I thought that if I can make the "background" in a jpegfile transparent with some code maybe I save some kilobytes.

So does anyone now for example how to make the color "#d67fff" in an image transparent, with PHP or JS?

Answer 1

JPEGs are not always smaller in size than PNGs. Each format has its uses. JPEGs are great for complex images like photographs and will have a smaller file size than PNGs when compressing a photo. PNGs are great for logos or buttons and will be smaller than a JPEG when compressing those kinds of images.

JPEGs do not support transparency so what you're hoping to do is not possible. Use a PNG as it would be ideal for this kind of an image.

Answer 2

"On adding alpha channels to JPEG images" requires you to embedded the PNG alpha layer into the JPEG image as metadata, and then use Javascript to convert the <img> tag to <canvas> and process that alpha layer.

His example works in Firefox and Webkit browsers, but not in my IE8.

Given the amount of work (preparing a JPEG file with PNG alpha layer) and problem in IE8 I would not recommend this. Instead you can use OptiPNG to optimize PNG size.

Answer 3

JPEG compression artefacts would mean that a lot of pixels you might expect to be #d67fff aren't - unless you use lossless JPEG, in which case you're not getting the compression benefits you expressly want.

In the future you may be able to do this with CSS clip, but at the moment arbitrary polygons don't see to be supported.

The best way to achieve this with a JPEG that I can see is to use SVG. Either use the JPEG as a pattern image to fill a polygon, or create a polygonal clip for it.