Transparent png image is not transparent in browser

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?

enter image description here

enter image description here


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.


enter image description here

Here’s an example transparent PNG I created using that method.

enter image description here

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.

Source : Link , Question Author : jbomen , Answer Author : Billy Kerr

Leave a Comment