Participating Frequently

Question

PNG with transparency not displayed correctly in web browser

Forum|Forum|6 years ago
May 3, 2019
3 replies
2315 views

Dear Community,

As I have not found any solution on the web and in this forum, I try to describe my problem.

I'm exporting an image from Illustrator to a PNG file. When I look at the image with Microsoft Image Viewer the image looks perfectly fine. it's also fine if I insert it in a Word File. However, when I look at it in a web browser it seems as not all layers are exported or as if the transparency is not shown correctly. I attach the screenshots. Also when I insert the image into the website the image is not displayed correctly.

Export as JPG works perfectly well, however I need the transparent background.

I tried als kind of exports (for screens, for web/legacy as well as export as). Always the same problem.

I hope that someone may help. Please let me know if you need additional information.

Best regards,

Irene

This topic has been closed for replies.

meganchi

Legend

I have a feeling it is how you are exporting your png.

Instead of going to File..Export as Web, try going to File, Export, "Export As...", then use the drop down menu to select PNG file type before saving.

Another way to save out your png is by pulling up Illustrator's "Asset Export" palette under the Window menu. Then you can select your art and drag and drop it to the palette and choose your file type options.

ireneh25068149Author

Participating Frequently

Dear Meganchi

Thanks for the reply. I tried this... no change.

ireneh25068149Author

Participating Frequently

Dear Monika

Thanks for your reply. Yes this somehow would make sense, but how to change the blending for PNG?

Any idea?

Monika Gause

Community Expert

The one in the browser: do you just open the PNG? Is your web browser's default background color set to black?

Or is that already inserted in a web page with black background?

ireneh25068149Author

Participating Frequently

I drag and drop the image to Chrome and than the background gets black. I'm not worried about that. If I insert the image in the website the background is transparent. It's only the shadow that looks weired.

Ares Hovhannesyan

Community Expert

Did you try to export GIF? Can you share your Ai fail?

Also you mentioned "when I look at it in a web browser it seems as not all layers are exported or as if the transparency is not shown correctly" Which layers you mean?.

Jacob Bugge

Community Expert

Irene,

I am a bit unsure how to interpret the images and their difference: there seem to be more rather than fewer parts shown in the browser, and quite different colours.

Apart from that, there is a whitish fringe on the inner blue part of the butterfly (only) visible on the darker background(s). Have you used (Art) optimization?

ireneh25068149Author

Participating Frequently

Dear Jacob

Thanks for your reply. I bought the butterfly from shutterstock and only changed the color from white to blue, removed the background and added the font.

Also if I just use the butterfly with no font, the image is not shown currectely. There seems to be a problem with the transparency in the layers.

Very weired. I friend of mine could export the butterfly properly but we did not figure out, what is wrong on my end.

Screenshot of Chrome:

Screenshot of AI with black background, just for comparison

Screenshot of AI with transparent/white background

Jacob Bugge

Community Expert

Irene,

Very weired. I friend of mine could export the butterfly properly but we did not figure out, what is wrong on my end.

I believe it is worth pursuing this and determine the exact (difference in the) ways yous have done it.

Failing that, you may try to:

1) Move a copy the artwork and lock the original so you can compare, then add a black rectangle behind everything and lock it;

Working on the copy set the Blending Mode to Normal for everything and (using the term object instead of layer, the latter being Photoshop speak:

2) Select each object, prefererably from the bottom up and judging be the appearance of the parts sticking out (you may Ctrl/Cmd+Shift+G to Ungroup if needed/convenient, or use Alt/OptionClicking with the Direct Selection Tool to pick each), and adjust its Opacity in the Transparency palette so that it appears in the same way as the original (and Ctrl/Cmd+G to Group if Ungrouped);

3) Try to Export (or Legacy Save for Web or whatever) the adjusted copy and make the final comparison.

You can redo 2) of parts of it until you are satisfied.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded