How to save a PNG file as a JPEG with a transparent background using Adobes suite.

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

How to save a PNG file as a JPEG with a transparent background using Adobes suite.

I have been trying to figure this out but it saves the image with a white background, how do you get ride of that and keep it transparent? I also tried it as a GIF which worked but the quality is so poor it makes it pointless to go that route. TIA

I’m not so sure about Photoshop but in Fireworks you can save it as 32 bit PNG which has millions of colors and alpha transparency. I think in Illustrator it will export (“save for web & devices”) 24 bit PNGs with transparency as well (dialog box lets you choose) but I’m not too experienced with it.

Ok thx, yea I was trying to do it for a webdevice through Illustrator as VIPStephan used in his example, and I kept getting the white backgrounds so I will try it through fireworks when I get the chance....thanks much.

Gif's also support alpha transparency and the file sizes are smaller than the PNG's.

The first point is not true and the second one really depends on the kind of image.

GIF does not support true alpha transparency, only index transparency (i.e. 100% or 0%, nothing in between).

GIF is smaller for images up to a certain dimension but it’s very marginal. Like when I export background images for a website an image of 5x5 pixels might be smaller if saved as GIF but anything substantially bigger than that will be way smaller if saved as 8 bit PNG. However, those only support 256 colors (as GIF does) while a 24 bit PNG supports millions of them and makes larger images way smaller than a GIF would be while preserving a way better quality.

The first point is not true and the second one really depends on the kind of image.

GIF does not support true alpha transparency, only index transparency (i.e. 100% or 0%, nothing in between).

GIF is smaller for images up to a certain dimension but it’s very marginal. Like when I export background images for a website an image of 5x5 pixels might be smaller if saved as GIF but anything substantially bigger than that will be way smaller if saved as 8 bit PNG. However, those only support 256 colors (as GIF does) while a 24 bit PNG supports millions of them and makes larger images way smaller than a GIF would be while preserving a way better quality.

I use fireworks for graphics and thus far the only way ive been able to get a truly transparent background cross-browser was through gifs. When I try to use PNG's they end up with a light blue background on IE, and given that almost all of my clients use IE, they are very unhappy when they see that nasty light blue background. So if you know a way to get rid of that I'd love to know it. For now, gifs are the only way I've been able to achieve it....

If you save 8 bit PNGs (with alpha transparency – which is what makes it different from GIF) IE doesn’t show a blue background. Rather, it does show the semi-transparent pixels as completely transparent. That's basically kinda like a GIF then and not what it should do either but it could save some headache when it’s not that important to have alpha transparency.

I’d like to see you getting a drop shadow that allows different backgrounds to shine through with a GIF image. To get true alpha transparency in IE 6 you can search the web and find numerous solutions. My latest development with transparent PNGs, and one of the most challenging sites I had, is this website. If you study the source code you’ll notice an alternative stylesheet for IE 6 with a lot of weird long rules in it.

Search the web for “IE PNG transparency” and you’ll find ways to get alpha transparency in all browsers.