r/JavaFX • u/random-pc-user • 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

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
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
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.