[solved] 16 x 16 icon - poor quality - why?

[Nicole]

I have a TImageList of Icons 16 x 16
Works quite fine, but not for all.

Attaches I made a sceenshot of
1) the icon how I drew it (png-Format)
2) how I see it as my PageControl-icon. The quality is drastically reduced.

What can I do, that I see the icon "as is"?



Thank you for all answers.
The solution in my case was a combination from "alpha"-channel and unlucky settings for the 2 colors. The setting both to clNone did best for me.

[Ally]

Hello Nicole,

Your icon has a black background. A transparent background is better.
In the attachment you will find an icon set for the screen resolutions 100%, 150% and 200%.
You can edit the icons with Inkscape (.svg) and export them as PNG.

Greetings
Roland

[wp]

The quality is drastically reduced.

The image looks as if the icon used as a pagcontrol tab icon is scaled by 150%, probably because you work with a screen resolution of 144 ppi (150% relative to the standard resolution of 96 ppi). When LCL scaling is active (i.e. you checked the corresponding box in the project options) and when the ImageList property"Scaled" is true then the image list scales its images to 24 x 24 px (= 150% of the size given as ImageList.Width/Height, 16x16 by default). But because upscaling requires to "invent" new pixels there is generally a large quality loss.

The correct way is to store images at several sizes in the imagelist, usually 16x16, 24x24 and 32x32. How this is done is described in https://wiki.lazarus.freepascal.org/TImageList#How_to_create_a_multi-resolution_ImageList_in_the_application (if you use Laz 4.0 or Laz/main you will note that the GUI has changed - find the differences in the same article).

An alternative option would be to use SVG images stored in the SVGImagelist of the BGRAComponents. It would handle all resolutions perfectly, but would require you to add third-party components to your application (https://wiki.freepascal.org/SVG_Image_List).

[VisualLab]

An alternative option would be to use SVG images stored in the SVGImagelist of the BGRAComponents. It would handle all resolutions perfectly, but would require you to add third-party components to your application (https://wiki.freepascal.org/SVG_Image_List).

This would be a good solution, because it allows to bypass the problem of unsightly bitmap scaling. But nothing comes for free. SVG is vector graphics, "parsed" because it is an implementation of XML (text). With a large number of icons used in the program (e.g. 200), won't this significantly reduce the smoothness of the program after compilation?

I suspect that on a computer using a CPU no older than 5 years ago and with at least 16 GB of RAM, such a program will run smoothly. But what about a GUI program running on an RPi 3? In this case, you should probably forget about icon lists using SVG.

In any case, in about 10 years at the latest, we will probably have to switch completely to scalable icon lists (glyphs), probably SVG.

[Nicole]

Thank you for all replies.
I tried all, but nothing changed anything.

To me the image looks alike the situation something is "flat" or not. It feels, if I could set the icon to flat display it would be fixed. The problem: Nowhere is such a setting.

I know these "flat" of some buttons. Sometimes they look nicer and clearer or colore at all, if they are displayed NOT in "3D", but - flat. Unfortunately I cannot even remember which kind of buttons that was. Or was this a kind of old-fashioned menu? Is there such a setting anywhere in PageControls / Tabsheets / ImageList of whatever?

Scaling to 24x24 would not be the problem. PageControl would even display this larger as far as I remember. However larger images look strange to me in a Tabsheet.caption. I had this for some time, but reduced their size for looking better.

[Khrys]

You need to make sure the alpha channel of your icon is preserved (see the attachment). The effect in your screenshot is a telltale sign of a discarded alpha channel, without which any transitions between icon and background become abrupt.

Achieving proper transparency in LCL controls can be a real headache... but I've found that loading .png images via  TPicture.LoadFromStream()  and using the  TPicture.Bitmap  property (while avoiding  TPicture.Canvas) can be used to load 32-bit images into  TImageList  at runtime.

[Nicole]

This sounds very interesting, but I only understood half of it. Not even half.

I know, what an alpha chancel is, but am not too sure, how to work with it. In my paint.net, there is an option to make colors transparent. But how to use?

One other icon I made with an image editor, it has no alpha-channel at all. It was bmp before I loaded it into the TimageList. Same problem. Looks strange.

Thank you for the examples. Unfortunately they are 24 x 24. If I resizes them and shrink them to 16 x 16 my paint.net will save it the same as my own and bring back my troubles.

To bring it to the point:
If I have a map 16 x 16 of black pixels on white ground.
What to do, that the "alpha-chanel-thing" works fine?

Or: Is there a way to put the icon at the form just "as is"?

And one more question:
After trying a lot of things, I seem to have used a wrong one. My existing icons look pale and "washed" since today. Which property can this have been? I cared to put back everything I tried. But evidently this did not work.

[Ally]

Hi Nicole,

maybe I'm misunderstanding something, but it's actually quite simple.
As wp already wrote, you can use an ImageList with the required icon sizes and then assign them to the tabs.
And all this without writing a single line of code.
Here is an example.

Greetings
Roland

[Khrys]

Thank you for the examples. Unfortunately they are 24 x 24. If I resizes them and shrink them to 16 x 16 my paint.net will save it the same as my own and bring back my troubles.

paint.net is perfectly adequate for creating icons, here's how I usually do it:

• Ctrl+N  to create a new image, set size to e.g. 16 x 16
• Ctrl+A  to select everything, then delete it, leaving a completely transparent background
• Draw icon
• Ctrl+Shift+S  to save the file as a bitmap (*.bmp), making sure that the bit depth is set to 32

[wp]

BTW, is it really necessary to draw icons by yourself? Are you aware that the Lazarus installation comes with a collection of about 650 motifs in 6 sizes, in folder "images/general-purpose" (plus some more in the other "images" folders, but they are more or less related to Lazarus subjects). And the upcoming Laz 4.0 will contain an IDE extension to search for icons by keywords.

[Nicole]

Thank you for the project.
I am quite sure, that the problem is one of my settings in TImageList. I am not sure, which one. As I tried to change them, they are messed in the meanwhile.
I will solve it by the help of this demo.

This library of icons is great and I use it since years. What I love is, that they look great even with very small resolution. This is a great art.
However I wanted three icons, with certain topics. These I drew by my own and added them. Seems, that the author of the library knows the art of drawing small images better than me.