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?

4 Answers 4


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.

  • or a gif if the picture is simple enough as they usually have smaller sizes then png. Aug 31, 2011 at 17:34
  • 1
    @cory actually PNG is always smaller than GIF when using the same conditions. GIFs are limited to 256 colours and PNGs aren't, but you can reduce PNGs to 256 colours and then it will be smaller file size than a GIF. Sep 1, 2011 at 10:35

"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.

  • 2
    +1 for technically interesting, if highly impractical.
    – Su'
    Aug 31, 2011 at 8:11

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.


I've developed lossy PNG to make such hacks unnecessary. You can have small file and transparency and a cake too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.