Image Labels Distorted & Blurry

I am making a health bar UI. I have triangles on the ends, but they are very distorted when on the UI.
image

I am using a UIListLayout to space everything. The triangles are two separate roblox decals with the following images
Triangle 2 Triangle 1

I have the squares as frames and the triangles are ImageLabels. The properties of the imagelabels:

I want to know why it is being distorted when the ResampleMode is set to pixelated. I also want to know why it’s not scaled correctly.

The reason there are two images is because rotating one messed things up. I have changed ScaleType to different things and it is the same result. I have also reuploaded the images to be higher quality. \

This has to do with how roblox would randomly turn it into Mobile graphics resolution, it’s normal. Try running it in live game and see the difference.

Also if it’s blurry, you should check your monitor resolution.

I checked it in game on both PC and mobile and it looks the same.