Images losing quality in studio

I am trying to obtain sharper, less blurry images in Roblox Studio that match the quality in Photoshop (the software I am using to make my images).

Here is what the image looks like exported at 2000 x 2000 pixels:

And here is what it looks like in studio (edges appear softer):
image

I have tried using a smaller canvas size like 512 x 512 pixels, but it looked the same as the image from studio above.

I know Roblox has a compression system, but I am just trying to figure out how I can make my images less compressed and more crisp. Thanks!

3 Likes

Roblox compresses the image to 1024x1024 if that helps.

It looks fine to me in a 512x512 ImageLabel and doesn’t look as bad as the one in your pic.

image

Does your frame have an aspect ratio of 1:1?
᲼᲼᲼᲼

You could also make the edges harder by changing the ResampleMode from ‘Default’ to ‘Pixelated’:

image

image

5 Likes

It seemed to get real bad after scaling the frame down. It looks better after your changes, but I am still curious if there is a way to keep the image looking that good when smaller for smaller buttons in game.

I believe you could change the ScaleType to Fit.

It changes how the image is put on the frame, making it so the image fits in the frame with its intended proportions, without allowing stretching, therefore in its best quality.

image

᲼᲼᲼

This is with the default Stretch, which makes the quality worse.

I don’t know any methods to keep the high resolution with stretching, sorry.

3 Likes

I found that all images are just going to be somewhat off due to down scalling; the images would not be much better had I used a smaller canvas size though because I then have less pixels. These changes helps decrease a bit of the blurry edges, thanks!

1 Like