PNG with transparency not displayed correctly in web browser

[ireneh25068149]

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

[Jacob Bugge]

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?

[ireneh25068149]

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]

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.

[Monika Gause]

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?

[ireneh25068149]

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]

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

[ireneh25068149]

Dear Monika

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.

Any clue? Thanks.

[Monika Gause]

Most probably the shadow is set to multiply. Or maybe some other blending mode.

This doesn't get transferred into PNG.

[ireneh25068149]

Dear Monika

Transparency is set on "normal"

[ireneh25068149]

Dear Monics

Certain layer are  indeed set on "multiply".

How can I transfer this to PNG?

[Monika Gause]

You can only try and make your shape darker. But you can't get the multiply into the PNG

[meganchi]

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.

[ireneh25068149]

Dear Meganchi

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

[ireneh25068149]

Dear Monika

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

Any idea?