1

I am loading some images and I want to go from PNG to JPG to have a smaller file size. However as JPG there is no transparency information so the background of the image shows up as white.

How can I make this white background be transparent once I load my images?

Thanks in advance

Josh Brittain
  • 2,162
  • 7
  • 31
  • 54
  • Just set all the white pixels to be transperant in your code? I don't reccomend using white though. – miguel.martin Apr 11 '13 at 01:01
  • Duplicate question? http://stackoverflow.com/q/12598912/2266191 JPEG doesn't allow transparency. – David Baker Apr 11 '13 at 01:07
  • 2
    You should stick to PNGs in Flash. It is actually faster for Flash to render a PNG than a JPG (which sounds odd given PNG having an extra channel, but that is what Adobe has said in the past) – Josh Apr 11 '13 at 01:14
  • Flash can also compress pngs better/more than JPG's resulting in a smaller file size. – Amy Blankenship Apr 11 '13 at 01:47
  • If your png's are that big, maybe you're doing something wrong. Are you trying to use a Fireworks-native png without exporting, for instance? – Amy Blankenship Apr 11 '13 at 01:49
  • @Apocalyptic0n3 Could you please post reference to your claim about PNG vs JPG performance in flash? That an interesting topic but I was unable to verify by searching for it myself. Sorry OP for being off-topic. – chadiik Apr 11 '13 at 21:17
  • @Chadyk I did some searching and couldn't find a page in my history that showed it (I know I saw it in the last few weeks) which leads me to believe it is actually in [this Adobe Max](http://tv.adobe.com/watch/max-2010-develop/performance-tips-and-tricks-for-flex-and-flash-development-/) video from one of the Flex SDK devs. Sorry I couldn't be more precise, but I have seen it in multiple places and I do remember a benchmarking test from last year that supported that statement (again, no source :() – Josh Apr 12 '13 at 16:27

3 Answers3

2

I am assuming that you want to change the white pixels to transparent pixels at runtime. First I'll just say that the BEST answer , is to just use the PNG format. My opinion is that doing something like this at runtime is not a good solution. If you have that many images that the file size matters, then the runtime processing brings along it's own negative of a long pause while processing the images.

I personally would explore what I could do to decrease the size of the PNG files, and would likely NEVER use a solution like this.

However, if you choose to go this route, what you need to do is this :

  • Convert the image to a BitmapData with an alpha channel.

  • Loop through the BitmapData and make those pixels transparent.

or

  • Use the threshold() method of BitmapData.

As someone mentioned in the comments for your question, using white as the background color is not a good idea as ALL white pixels will be made transparent, not just the background ones.

So choosing a color that is not in the palette of any of these images is what you want to use as a background color

As a commenter noted, the threshold() method of BitmapData would probably work best.

MMM
  • 7,221
  • 2
  • 24
  • 42
prototypical
  • 6,731
  • 3
  • 24
  • 34
  • Wouldn't threshold() work better? Note that the BitmapData needs to be created with thie ability to be transparent for this to work. – Amy Blankenship Apr 11 '13 at 01:40
  • If you note the first bullet point, it specifies creating a BitmapData with an alpha channel. Yes, threshold would work as well. – prototypical Apr 11 '13 at 03:40
1

JPG (Technically, JPEG File Interchange Format) files, as understood by common browsers and graphics applications, do not support storing an alpha channel with the image like PNG does. Depending on your application, you might want to store a separate black-and-white "image" file which is the transparency mask for the JPG, and use the pair. There are extensions to the format that can be used in custom software, but they won't be understood elsewhere.

But first, make sure that JPG is really what you want to use. JPG is only appropriate for "photographic" images, which don't typically have transparency masks (though there are certainly exceptions). If the image is more Icon/Drawing-like, then it is likely that JPG won't be much smaller than the PNG anyway, and have ugly aliasing artifacts, so just optimizing the PNG will give you better results.

Lee Daniel Crocker
  • 12,927
  • 3
  • 29
  • 55
  • While the technical description of the JPEG file format is accurate, once an imported resource is in the Library, its original file format is irrelevant to whether or not it can be manipulated at a pixel level in Flash. The results of what the OP wants to do are unlikely to be good, because a lot of the pixels they'll probably want to make transparent aren't going to be 0xFFFFFF, but that doesn't mean it can't be done. – Amy Blankenship Apr 11 '13 at 01:45
  • Yes, there are probably some other workarounds for what he wants to do: for example, reduce the dynamic range of the original image so that there's no white in it, then treat all-white as transparent. But as you point out, many exact pixel values won't survive the DCT, so there will be some almost-white speckles in the transparent area and maybe some tiny holes in the image. JPG just isn't the right tool for the job. Thus my recommendation to either stick with PNG or use a separate PNG for just the mask. – Lee Daniel Crocker Apr 11 '13 at 03:02
0

You may want to consider embedding the png's in a Flash library, then export as swf. You can then use Flash to compress your png using the lossy JPEG algorithm, but it will still keep the alpha channel. This could result in much smaller file sizes but with the benefit of keeping the 8-bit alpha channel (each pixel has 256 transparency levels).

By masking out a specific color, you'll only get a 1-bit alpha mask (a pixel is either fully visible or completely hidden.) You can also run into problems like when the color in the image corresponds with the matte color, which deletes pixels from the actual image you want to display.

The other problem with using a matte color in a JPEG image is that the JPEG compression will leave artifacts, especially around the edges of the object and the matte color. This makes it hard to properly mask out a specific color.

david.emilsson
  • 2,313
  • 1
  • 20
  • 24