Specialisation images blurry

ryan-pip commented 2 years ago

The images attached all appear at very low resolutions. While i appreciate this is not the core use of specialisations, i am looking to use small images to visually denote additional information to the viewer such as if this application is deployed in cloud or on premise. These need to be small (roughly the same size as the default icons).

It looks like the only way to get the images to this size are to size them to only be 16 pixels tall and so obviously these are low resolution. The image rendering seems to be at a much lower level of resolution than the rest of the view. I have tried saving the images at a higher resolution but this just increases the size of the rendered image.

Version of Archi

4.9.0

Archi Plug-ins

jArchi1.2

Operating System

MacBook Pro

jbsarrodie commented 2 years ago

While native icons are in fact drawn through (kind of) vectorial code, custom image must be raster image that will be drawn at the same resolution of the canvas they're drawn on, leading to what you've experienced.

Unfortunately, there's nothing we can do and you'll have to (re)discover the art of icon design ;-)

Phillipus commented 2 years ago

As JB says. You'll also see the same thing if you use an image in a Canvas object.

(BTW - there are no attachments.)

ryan-pip commented 2 years ago

Thanks, I thought that might be the case.

I did notice some scaling in the Archi code that I am guessing is used to do the fill? With a bit of trickery I have managed to get the images looking nice by using the fill option. By creating the image at 4x size with whitespace that matches shape of the box and then telling it to fill i can get a relatively crisp image. See the images below:

Can we not surface the scaling factor to the UI to allow us to add a scaling factor to the image. It seems to solve the issue.

jbsarrodie commented 2 years ago

I did notice some scaling in the Archi code that I am guessing is used to do the fill? With a bit of trickery I have managed to get the images looking nice by using the fill option. By creating the image at 4x size with whitespace that matches shape of the box and then telling it to fill i can get a relatively crisp image.

That's strange because it shouldn't really improve the rendering.

Could you please share the model used to generate your image and also the originale images you've used as custom image? I'd like to do some tests on my side.

ryan-pip commented 2 years ago

Here you go. test.zip

jbsarrodie commented 2 years ago

Here you go.

Thank you. I've had a look and the issue mainly lies in the image used being already of bad quality. There's a known fact in icon design: for really small icons you simply can't use a bigger icon and resize it, you'll have to create or adjust them manually for this small size. Your cloud icon exibits this.

BTW, here is a good reading on this topic

So I searched for a similar icon of a better quality (but still not perfect) and found this one at 32px.

While this is maybe not perfect, I do think this looks better when compared to your original test (and similar to your trick):

Of course, this works well at 100% (which is what I always use), but if you zoom in, the image will obviously look blurry (no magic here). Note that using your trick, zooming the image has less impact because it becomes possible to reveal the full size image:

So I would suggest to find icons designed for small size to limit the issue. We might at some point revisit the image-related code in Archi but that's not planned anytime soon.

archimatetool / archi