How do I fix this fuzzy image outline?

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
http://js.do/rootmars/alpha_bleed_js
(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.

4 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

(I’m sorry if I shouldn’t necrobump this, but I figured it made more sense to post this semi-tutorial in this thread. Please let me know if this should be a separate post instead.)

For other people with Paint.NET I’ve figured out how to remove the outlines if your image doesn’t have a white border. Using As8D’s solution will work if the edges of your image are painted white, but if your image has a different outline color, Roblox will just produce white outlines instead.

  • If your image is painted with white along the edges, use As8D’s solution because there’s less steps and it will give you the same results.
  • This will only work if your image has one color on the outside edges.
  1. Use the color dropper (select with K) to copy the color of the edge of your image. Ex. if your image is purple along the edges, click it to set your current color to purple.
  2. In the color window on the bottom right, drag your alpha transparency level all the way to the left so it says 0.
  3. Select the Fill Tool. (select with F)
  4. Click on the beaker on the top toolbar and select “Overwrite” from the pulldown menu.
  5. Click in the transparent part of your image.
  6. Double check your transparent pixels with the color picker (select with K) to make sure they match the border of your image.

For whatever reason, this took me a couple of tries to get it to work, but I was able to use this to get rid of white outlines on a black image I was trying to upload.

2 Likes

Still getting those dark shades of grey even after clearing the pixels.