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:
I want something like the upper image but the result is like the lower image.
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:
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).
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.