Transparency issue when uploading PNG to website

[Bansbansbans]

Hello,

When uploading a PNG with transparent background to my webiste I am having a problem. The whole transparent area seems a little darker and not fully transparent, so the pictures edges are slightly visible

Has anyone had the same problem  before and could help me?

Thank you!

Wanda

[Derek Cross]

Assuming you have an Image with transparency in Photoshop, try: Export > Export As, select PNG from the Format drop-down menu and tick Transparency.

[Bansbansbans]

Thank you fir your reply!

I have done this when creating the PNG, only when uploading to my website I can see the edges against the websites background. 

[Derek Cross]

It sounds as if you haven't done a very good cut out in Photoshop.

[Guest]

Here is the solution for this Sir/Mam.

Neither uploading as a raw file, you may try this.

Go to File > Export > Export as > and select PNG in the format menu with transparency selected.

By this, your image will be exported without background.

[Bansbansbans]

Hi thank you for your reply. 

I have done this when creating the PNG and the background is transaprent when using it in other Adobe programs like Illustrator. But when I upload it there is this slight shadow as seen on the image attached to my question

[Guest]

I think I understood your reply in a correct way. Sorry if misunderstood your query.

Photoshop works with pixels and illustrator works with vector art. So, there will be a slight blur in the image.

Tip :

Search for any hided layer or unused layer or layer with effects you don't want and delete it. By exporting your PSD file, these unused layers may cause this problem.

After deletion, export your file, and try again.

Thank you

[Bansbansbans]

Thank you for your reply!

I checked my PSD file and merged all layers (attached you can see s screenshot) and exported again as PNG and the problem remains the same. It only occurs when I upload to my website and I also looked at the webiste on different browsers and it is always there

Do you have any other tips? 

[Derek Cross]

In Photoshop create an additional white layer and put it under you image in Layers, to see if the issue appears. If it does, make further changes to the image in Photoshop the re-export it without the white layer.

[Bansbansbans]

Thank you for your reply!

I have done this and there is nothing in the background of my file, the background is fully transparent. 

Only when I upload to the website the shadow appears. 

[davescm]

How did you make the area transparent? A common way is to use a selection and fill or brush the area of a mask that is to be transparent with black. However, if your colour, used on the mask, is not completely black i.e. RGB 0,0,0 then your mask may look black and the area may appear transparent against the grid, but it will not actually be fully transparent.

So check the black value you are using in your mask.

Dave

[Bansbansbans]

Hi Dave 

Thank you for your reply!

I masked it but after realizing the issue I also selected the areas I want to be transparent with the lasso again and deleted all pixels just in case there is something still lying around. 

I will try and mask the way you told me now to see if it changes anything

[Guest]

Thank you for your appreciation.

By seeing your message, it sounds like the website you mentioned is perfect as majority of the browsers are responding.

An Extra Tip :

By working in transparent images, You may select the subject and use masks. This will lead the project to remove the white bg . After doing this you'll see transparency grid (black and white square grid).

Then apply the layer mask by right clicking the mask in the layers panel. And then export it.

You may check the website you mentioned above for any disorders.

With regards,

Aswin Balakrishnan