Problem with opacity after saving as PNG-8 or GIF from Photoshop


I am a web developer and I have a problem with the opacity of a photo after saving as a PNG or GIF. I have an image with a transparent background with a layer with less than 1% opacity. After saving it loses the opacity and shows a solid background.

Below is how my image appears before and after saving:

enter image description here

I want something like the upper image but the result is like the lower image.

7/6/2017 7:14:00 PM

Accepted Answer

GIF and PNG-8* don't support alpha transparency. Each pixel either needs to be completely transparent or opaque, no partial transparency—so your <1% opacity won't work.

You have a few options:

  1. Use PNG-24, which supports full alpha transparency. If you need to you can then use a third party tool (such as CompressPNG or TinyPNG) to convert to PNG-8 and retain the alpha transparency.

  2. Make the areas completely transparent. You can either modify your original artwork or map a color to transparency in the Save for Web dialog (as seen in this Q&A).

  3. If you are using a recent version of Photoshop (CC) you can use the new export (File → Export → Export As), which (as far as I know, I don't actually have CC to check)does support full alpha transparency with PNG-8.

* This isn't a limitation in the PNG format but Photoshop's Save for Web feature.

4/13/2017 12:46:00 PM