Fix: White Border around imported UI elements using .PNG alpha transparency

[Krabworks (CG_Krab)]

I wanted to share this just because this is something that I see dozens of threads about, all of which have completely wrong fixes suggested. Many have noticed this issue with .PNG files imported to UE after export from PS or other applications:

Jagged white borders around UI elements. I just wanted to post because there is (as far as I have seen) no thread posted with the correct fix for this issue, so hopefully this can help somebody googling the problem in the future…

First, some of the suggested fixes that I have seen in other threads which are absolutely wrong and which you should not do:

• Changing the pad mode from power of two
• Using a super high resolution image with altered compression settings
• Changing the filter mode to something like nearest instead of the default setting

These are all hacky fixes that will cause other issues and do not directly address the real problem. The issue is caused by the way Photoshop (and some other applications as well) handle .PNG Alpha channel on save, which is solid filled on Export. The fix is to just stop using Adobe’s problematic .PNG save as functionality and instead use something like fnord SuperPNG which has an option for Clean Transparency:

And the completely clean result:

Hope this helps someone

[quikscoper989]

bless your soul, i have been looking for a fix forever now ur a lifesaver

[Krabworks (CG_Krab)]

Cheers I don’t have the link unfortunately but another forum poster did a good deep dive on this issue in another thread linking to this one.

[Zellamic]

I installed the plugin, but after selecting the “Save As” option and choosing SuperPNG as the file format, this line still remains. I tried enabling the “Clean Transparent” checkbox, disabling it, and switching the image channel from 8 to 16 bits per channel—nothing helped. In Unreal Engine, this white outline still appears.

This is how it looks image viewer:

This is how it looks in UE5 editor:

Everything is set to default, except compression. I set it to UserInterface2D.
(Changing the compression does not affect this outline.)

[4ltShift]

This is because it actually is an editor problem. If you open your editor settings and just change the transparency setting under texture import to “always” and reimport the asset it should fix it - worked for me.

[Krabworks (CG_Krab)]

Never seen this setting before but seems awful haha

Looks like an import setting though so if you’ve imported already you’d have to re-import?