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:
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.
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.
The solution is to (instead of "saving" it) exporting your graphics in Photoshop as a 32-bit PNG (standard if you export with the tick in the box for PNG-transparency) which will make the transparency "true" making it show how you intended in more/all apps that support transparency/alpha channels. For instance this changes the results for the iOS13/Photos app! :) You can read more about this here: https://helpx.adobe.com/photoshop/using/export-artboards-layers.html
