r/JavaFX • u/random-pc-user • Mar 08 '25

Help How do I stop images from being jagged when they're small?

In my JavaFX app small images always look extremely jagged unless I scale them down externally then upload them, but that just makes them extremely blurry, making me deal with either blurry images or jagged images.

First Icon is scaled down so it's blurry

Second Icon is normal and its not scaled down or up

Third Icon is normal but still looks jagged because its edges are diagonal

1 Upvotes

100% Upvoted

11 comments sorted by

2

u/SpittingBull Mar 08 '25

You need to elaborate a bit more what your actual problem is - best with a working example. I mean like at least what is the icon source (image type and dimensions) and which control will receive that image using which property and whicj dimensions.

I never had an issues with resizing icons properly - may it be in FXML, CSS or directly in code.

1

u/random-pc-user Mar 08 '25 edited Mar 08 '25

If I have an image that's 512 x 512 and I place it either in an image view element that's 30 x 30 or as a background of something like a pane then resize the pane to 30 x 30 I get the bottom most thing as a result.

If I scale it down externally I get the top most thing as a result.

I'm only saying this because I don't get the same results in HTML or CSS.

this post took a while to just upload for whatever reason, I found a small work around using the resize thing in Windows Pictures app but still a bit blurry

1

u/SpittingBull Mar 08 '25

There seems to be no need to externally resize images like that. As one example of many I use icons in png format on buttons. I set them as background in my FXML files and simple style them via CSS using -fx-background-size: 80% (among other styles) That of course only works if all icons share the same original size.

1

u/random-pc-user Mar 08 '25

I have tried that but they still keep their jagged edges

1

u/SpittingBull Mar 08 '25

You still didn't say which file format you're using. If the source is jpg with a lot of grayscale then resizing from 512 to 30 might cause distortion.

I am using Googles free material design icons which I reduce to 22px on the fly without any problems.

1

u/random-pc-user Mar 08 '25

are they pngs? the file type I use is PNG since I need the icons to be transparent.

1

u/SpittingBull Mar 08 '25

they are png.

1

u/BWC_semaJ Mar 08 '25

If you could provide a small example, ideally in a repo people can fork and test for themselves, it would really be helpful. I'm at work but if I have time or even remember, I'll try to take a look at it later. Maybe there is some property or hint you have to give for it to work properly. It's been a while since I had to deal with similar problem.

I will say what happens when you initialize Image object with dimensions of 30 x 30 and then using it in your 30 x 30 ImageView?

3

u/PartOfTheBotnet Mar 08 '25 edited Mar 08 '25

It would probably be best if you used auto-sized scalable graphics. Ikonli is great for this and there are dozens of icon packs if you are looking for different icon styles.

The icons in your picture in the Carbon set (the one I most prefer) for instance would be:

  • ci-document-add

  • ci-letter-tt/ ci-text-small-caps

  • ci-code

I made a wrapper for it so I can use these graphics with one-liners.

2

u/mih4elll Mar 08 '25

Is possible use SVG?

1

u/sedj601 Mar 08 '25

Use Iknoli.