Fix image upload adding outlines to transparent images

[Shedletsky]

Pixelfix: Remove the black edges on scaled images

Pixelfix [Pixelfix-1] Pixelfix changes the color of transparent pixels to match the color of the nearest non-transparent pixel. Transparent pixels stay transparent, but when resized and blended with non-transparent pixels they won’t cause dark borders. How it works Here are screenshots of images in Roblox that have been scaled down, showing with/without Pixelfix and with/without transparency: [Pixelfix-2] Since the transparent pixels are no longer black, they no longer make edges of the im…

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)

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.

[Operatik]

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

When scaling images, do not use colors from completely transparent pixels

As a Roblox developer, it is currently too hard to make images that scale well. When Roblox scales images, it considers the color of transparent pixels when it calculates the color of each pixel in the resized image. This means that if your completely transparent background happens to be black, it will give your image black edges. This is true of any color. [image] (The first one has black transparent pixels, the second one has white transparent pixels, the third has red transparent pixels) T…

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

Tutorial: How to fix the dark outline artifacting around your image guis

Often times, you’ll upload a decal with a transparent portion, and when you go to use it, you’ll see something like this: [blob.jpg] An outline appears out of nowhere to make your paint.net editing skills look bad. You know the image should really look like this: [blob.jpg] This isn’t a problem with the image, it’s a problem with the way ROBLOX samples their images. If the size of the image is native and the rotation is 0, you will see no border, but if you want to have rotations and diffe…

The outlines you mentioned might be compression artifacts.

[Shedletsky]

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

[nsgriff (griffted)]

@Shedletsky

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

[ScriptideALT]

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

[NinjoOnline]

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 I also tried the PixelFix, that didn’t work either.

[xJon_as (Jonas)]

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

My image:

How it looks in adobe xd:

How it turns out in Roblox:

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.

[UnitPeka (PEKA)]

Unfortunately, the issue still persists.

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

[imdaros]

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.

[baackup_1st (Backup)]

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.

[Zenogale (Leafrin)]

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 .

[neutrinostack]

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.