Black outline appears when scaling images

[thorisviking]

@buildthomas is correct.

You’ll need to reupload. Sorry for the inconvenience

[Locard]

I’m having this issue right now. You can find more about it here.

[vsnry]

Sorry for the bump, but it appears that 2 years later it still isn’t fixed.

[loleris]

New uploads?

[vsnry]

Yep, this tutorial was made only 2 months ago, if it was fixed there would be no need for the tutorial. I haven’t really experienced this issue as I don’t work with UI often, but I was having some weird outline problems with small images only a few weeks ago.

Fixing images in Roblox ui (black outlines)

Hi! Here’s an article about fixing ui images and those weird black outlines!

[yarncatss]

bumping. I’ve been using decals for a build, and these black outlines are a nuisance.

[catgirlin_space (Rosalina Saige)]

Is there any idea when this will be fixed? It’s annoying how my loading icon has a black outline around it.

[buildthomas]

This is fixed, the site no longer mangles the color of transparent pixels. You will need to make sure your source image is correct. If you have black transparent pixels next to an opaque color, that will still have a black outline. The site doesn’t do any kind of fancy color correction if that’s what you’re wondering, that’s intentional.

See:

Fixing images in Roblox ui (black outlines)

Hi! Here’s an article about fixing ui images and those weird black outlines!

[vsnry]

@buildthomas

This is fixed

The problem in OP is still not fixed as you said yourself that the site doesn’t do any correcting so you still have to manually correct everything yourself.

[buildthomas]

Please read again what I said. You are meant to correct this yourself. File a feature request if you think the site should re-encode transparent pixels to have the colors of the nearest opaque pixels, it’s off-topic here.

This bug report was, based on the responses here, about the site re-encoding all the transparent pixels to be black transparent instead, which guaranteed that black outlines would be present on the image.

[NinjoOnline]

Almost 6 years later and still no fix Before anyone tries to link me to any of these

Fixing images in Roblox ui (black outlines)

Hi! Here’s an article about fixing ui images and those weird black outlines!

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…

Please note, these DO NOT fix the problem on mobile. While UI looks clean and crisp on PC, testing on mobile still shows they black outlines. I believe this is a bug tho, as it did fix on mobile when I used PixelFix, and the UI was looking clean and crisp. But when I play tested the next day, it was back to the old ugly black outlines. Still same images, so I don’t know what’s going on with the rendering or something but ye.

This video was taken when I had fixed the UI with PixelFix. As you can see, the buttons and their icons don’t have the black outlines.

Then the next day I join and I’m greeted with the ugly black outlined UI again

The button images in studio are referencing the PixelFix images, so I don’t know if images get their quality ruined after a few hours after upload or what. But this bug still isn’t fixed making UI for mobile a near impossible feat sorry, I should say GOOD looking UI a near impossible feat

I have some further proof this is still an issue. Image1 shows robux icons taken before the pixelfix (with time stamp)

Image2 shows it after pixelfix (taken 2 minutes after previous image)

Then this last image shows me on a few hours later (3 hours after I did the pixelfix) and the images have reverted to black outlines

Can we please get some word that this issue is being taken seriously? Really hindering my games progress

[Aimarekin]

This annoying thing, it’s making doing some waves on my game impossible. Just look at this.

What’s up with that line on top? It looks super bad.

[ScriptideALT]

When are we getting a fix for this? Im tired of using pixelfix for all my images. I just want to make UI, not do image processing for every icon I upload

[EGOTISICS (EGO)]

Bumping this up again, because with the images uploaded having Bilinear Interpolation, the only alternative is to scale the image down to the exact offset, however, doing so would cut the image’s quality. It has been years since this issue has been brought up and many of us are all looking forward to a fix.

[ImFaire (Envy)]

It’s funny how long this thread has existed and the initial problem STILL hasn’t been fixed. I’ve been dealing with this issue over and over. I use photoshop and the plugins recommended in the tutorial by Quenty are outdated now.

[AELA5266 (Aela)]

Bumping this up ONCE AGAIN. I still have the same issue even when using Pixelfix… this is starting to be a joke, when will this be fixed? Roblox is concentrating on graphics and real looks but wont fix this issue.

[FlankaTank]

Hi everyone,

Apologies for any confusion this may have had in the past, and for the delayed response. We have discussed this internally. We do not support premultiplied alpha, and at this time don’t have any plans to enhance the image processing system to support. Any potential solution is complex and may create multiple other issues as a byproduct.

We recommend using the offline solutions that others have suggested in the post.

[drewbluewasabi (Drew)]

I just want to add that us developers can’t fix this issue in all situations. This is still very much an issue regardless of how easy these fixes are made. This isn’t an issue on other programs and even other engines.
This even affects images rendered by the engine (ViewportFrames)! In the case of ViewportFrames developers have little to no control of the resulting image, so we can’t avoid or fix this issue at all, we rely on a fix to the engine to make it display the image “properly”.

[loleris]

10 year anniversary for this problem

The situation with this problem today for me as a developer:

It doesn’t affect all people wanting to upload images to Roblox, because some image editors properly set the color of nearby fully transparent pixels.

However I personally still use an image editor that, for some reason, sets all the 100% transparent pixels to black and if I upload them to Roblox I get that black outline we all know for a long time now. Of course I’ve solved this problem by using a program to additionally process my images before I upload them to Roblox - this program sets the invisible pixels to the color of their nearest visible pixels and it solves the black outline problem to a very respectable degree.

Sometimes I forget to additionally process my images after I’ve exported them from my image editing software and I end up seeing the black outline time to time.

By now there are several programs like that, I’m posting one of them here.

GitHub - Corecii/Transparent-Pixel-Fix: Changes black transparent pixels to...

Why wouldn’t Roblox just do this image processing in-studio (on my machine) before uploading images as an asset?

I’m not sure how prevalent are image editors that still set invisible pixels to a single color today, but if they are then it’s likely that a lot of developers could be running into this problem to this day. I’m really curious whether this sort of image preprocessing before uploading would impact image quality or mess with support for certain special images.