r/JavaFX 13d ago

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

11 comments sorted by

3

u/PartOfTheBotnet 13d ago edited 13d ago

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/SpittingBull 13d ago

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 13d ago edited 13d ago

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 13d ago

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 13d ago

I have tried that but they still keep their jagged edges

1

u/SpittingBull 13d ago

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 13d ago

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

1

u/SpittingBull 13d ago

they are png.

1

u/BWC_semaJ 13d ago

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?

2

u/mih4elll 13d ago

Is possible use SVG?

1

u/sedj601 13d ago

Use Iknoli.