Please see this example image below to reference (Illustrator was used here to export). Has anyone noticed that any transparent png files when dropped in a browser (like Chrome or Firefox) do not seem to have transparent backgrounds? I used to drop graphics in Chrome or Firefox as a check before sending a file and I would see a fully transparent background. This example shows the artboard area as white instead. Is there a fix when exporting? Or a setting in the browser?
-
Are you certain you don't have some improper export setting, like a matte color?– ScottMar 5, 2021 at 6:01
-
Well, I feel positive about this. Please try a png that should have a transparent background like a logo and view it in Chrome or a Firefox browser.– jbomenMar 5, 2021 at 6:20
-
it works fine here.– ScottMar 5, 2021 at 6:37
-
2Post the png, rather than a picture of it & we can have a loo .– TetsujinMar 5, 2021 at 7:52
-
Please see the added png above. thanks– jbomenMar 6, 2021 at 0:09
1 Answer
Not sure about Chrome, but for Firefox you need an extension called Transparent Standalone Images because in Firefox transparency is normally only visible when the PNG appears on a web page with a background. It might be better instead to check your images in Photoshop or GIMP, where transparency is displayed using a chequered grid.
Another possible issue is how you are exporting the images in Illustrator. For example, if you are using Export for Screens, and you have PNG as the output file format, you need to click on the little cog icon, and change the background colour to transparent.
Example
Here's an example transparent PNG I created using that method.
Here's what it looks like in Firefox with the Transparent Standalone Images extension. Note also that I have no affiliation with the developers of the extension.