How do I fix this fuzzy image outline?

A paw clip art is transparent, 2000x2000, I tried to upload it to Roblox,

image
I get something like this, over a white background.

I followed everything @Quenty did in this thread
Fixing images in Roblox ui (black outlines),
using the gimp plugin to bleed into alpha mask, and I reuploaded it but it still doesn’t work.

A black background should not appear. It should appear pink.
image

What do I do?

4 Likes

Your image is probably getting downscaled since it’s so big. Change it to a lower resolution (like 250x250 or something). I doubt you really need a texture that big anyway.

What happens if it needs to cover the whole screen?

1 Like

2,000 pixels is still too big. The maximum size Roblox renders is 1920x1080 which means that anything bigger will look bad.

That being said, try making it 1080x1080 pixels. That should make it look right.

1 Like

I hardly believe that the cause of a black anti-aliased border is due to a large size.

1 Like

Either way, it isn’t worth uploading images at such a large resolution because Roblox downscales them anyway.

1 Like

This is a weird issue… Does this problem happen when the image is displayed at a smaller size? At a bigger size? At its original size?

EDITS: whoops lol

Yes, that’s part of the problem. I’ve had it too. The black lines are artifacts caused by the image being resized from its original resolution.

If you make an image scaled with offset that’s 2000x2000 pixels big, your outlines will be gone, since it doesn’t need to be scaled down (or up). So, if you make an image that’s smaller, then put it on a smaller element, it will also look fine.

In addition to this, your example image also seems to be stretched to the wrong resolution, which is also probably causing the outlines.

If you want your image to look fine, make sure it is at the right resolution.

2 Likes

How would the smaller image dimension fare in larger resolutions like 1440p and 4k?

2 Likes

I tried using a lower resolution and it doesn’t work.

1 Like

This has been an issue on Roblox for a very long time and still hasn’t been solved completely…

It was reported as resolved on this thread a while ago but, annoyingly, it didn’t seem to work :eyes:

As mentioned earlier, scaling down the image might help as image scaling on Roblox is notoriously awful. You could also use the method mentioned here if it’s an issue with the gimp program - I’m not home right now so I can’t check

1 Like

run your image through this to make sure it’s 100% not your fault on the alpha and reupload it

(thank you @XAXA, i have this bookmarked)

3 Likes

Can you put the image up here?

@Quenty’s guide should be exactly what you need to address this issue. I would also follow the advice that others have mentioned in this thread to size your image appropriately. The greater the difference in scale the worse the problem is going to be.

To shed a little light about the exact fix that was applied two years ago and why blurring the edges is effective here’s what was changed. When the images were being scaled to acceptable sizes the entire image was being copied in a way that ignored the color channels on any pixels that were fully transparent. This caused the adjacent pixels to be solid black and when scaled the artifacts that you’re seeing here present. We changed how the images are copied to retain that color information from fully transparent pixels and now you’ll be able to utilize those pixels to ensure you don’t have this issue.

I actually ran @XAXA’s code and used that image to reupload but I still got this.
image

Here’s the image. It shows up blank here due to being all white and transparent.

If anyone could find what’s wrong with this image, please show me the reproduction steps to fix this. Thanks.

2 Likes

Here you go - you can check if your image will have the artifacts by checking the fully transparent pixels in an image editing program.

Although, do you really need 1024x1024 for a simple paw? How many people will actually inspect the paw up this close? :thinking:

Since Discourse compresses these large images to JPEG, I’ve put the image on Imgur:

Link: https://i.imgur.com/3aFS48a.png

:warning: How to properly save this image
Right-click the image, and pick Save as. If you just copy the image to your clipboard, you will get artifacts again.

1 Like

What steps did you use to ensure the removal of the transparent borders?

Also it shouldnt be necessary to have such a large resolution image considering all the pixel color interpolation going on. The difference between having 4k and other resolutions would not really matter because it would be the same image, just represented with more pixels

Using the image editing program Paint.NET, I:

  1. Selected all fully transparent pixels using the Magic Wand Tool.
  2. After that, I could hit the Delete key on my keyboard to clear those pixels.
  3. Paint.NET defaults to having fully transparent pixels use a white RGB code.

To check those pixels, I used the Color Picker Tool, which showed that the fully transparent pixels had a value of 255 for their Red, Blue and Green channels, with a value of 0 for their Alpha channel.

5 Likes

Yes it might be that the pixel interpolation is interpolating the color and the alpha so you see the dark artifacts from the 255,255,255,255 to 0,0,0,0 transition