Fix image upload adding outlines to transparent images

Images I upload to Roblox with transparency channels look bad because Roblox uses the wrong resize algo server side (probably interpolating all channels when it should only interpolate all channels when alpha = 0).

This should be an easy fix for something that is causing a lot of grief.

In game:

White outlines (look at the shield icon)
image

In photoshop:

Black with alpha (shield icon)

EDITS: I went down a rabbit hole trying to figure out why there are white outlines and proposed a bunch of dumb theories.

17 Likes

Something about images being scaled causing them to fill in “artifacts” with only transparent pixels.

On another topic, there’s also a different fix.

The outlines you mentioned might be compression artifacts.

2 Likes

They are pngs so there are no compression artifacts.

I don’t want to run all my images through a 3rd party tool. I want Roblox to fix the bug so developers can spend their time making games instead of pre-processing textures.

The fact that those posts are from 2016 and 2017 drives me a little crazy. @nsgriff

17 Likes

@Shedletsky

Thanks for the report, I’ll let the team know.

5 Likes

I currently have to use pixelfix to prevent the black outlines. It is extremely annoying and makes uploading icons take far too much time for me. Don’t know why I haven’t thought of making a post like this. Hopefully roblox fixes this soon

1 Like

I’m currently getting the same problem. Originally my images looked crisp (I had used XAXA black outline fix and it was working this morning. I’ve since come back tonight and noticed that the images have gotten the black outline on them again. The same images. So it must be something to do with how they are rendered or something, cause they were looking perfectly normal this morning.

Quick show, this was taken earlier this morning

Bottom buttons as well as their icons are crisp and clean. Then a SS I took a few minutes ago

These are the same icons/images. I haven’t changed the UI in this time, so I don’t know what the rendering is doing to the UI in game, but no pixelfix plugin/software/whatever works. The images look fine when uploaded and are fine for a few hours, but revert back to the ugly black outlines a few hours later

Images only look bad on mobile** They look normal on PC, and I haven’t tested on a tablet. The images also render a lot better in studio on a mobile/tablet emulator than they do with a real mobile device, if that’s any help @nsgriff

Buttons on PC


Look crisp. Also worth noting, I originally used Quentys solution, with the gimp plugin, which I was under the impression worked, but ye. It don’t :confused: I also tried the PixelFix, that didn’t work either.

It’s honestly a shame this is is still being an issue that hasn’t been adressed for over 5 (!!) years…

My image:
User profile picture

How it looks in adobe xd:
image

How it turns out in Roblox:
image

If anyone found a fix in meantime (that actually works, pixelfix didn’t), let me know.
Edit:

Found this article: Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium. I hope Roblox will finally get working on this.

1 Like

Unfortunately, the issue still persists.
image

They both have the same texture, the only difference is the distance of the camera.

good to see this went nowhere. bumping this so this issue can be solved. Very annoying especially with flipbook particles when resolution and clear picture is vital.

1 Like

Make sure the images are NOT premultiplied!!

Premultiplied images are images that are multiplied by their alpha channels before use to save processing time when used, Roblox might not know your image is premultiplied and multiply it again adding unwanted outlines to your images.

2 Likes

Can you explain how you would do that in paint.net? I’m not familiar enough with any other and I mainly use this for imagery and I have this issue that I want solved, to have clear faces with no grey outlines that also upscale a little, when looked at further away(for some reason). Also Roblox please fix this :heart:.

This phenomenon, stems from the limitations inherent to the bilinear rescaling algorithm we use for Alpha blended textures. While we currently expect developers to address this with Color Bleeding 3rd party tools, we understand this isn’t an ideal solution for every case, especially considering the practical challenges involved in converting and updating large numbers of images.

We have been discussing this issue internally, but unfortunately I can’t promise any specific solution or timeline at the moment.

4 Likes