[userprofile] blurry user profile pictures

[Wurzelmann]

Although our user profile pictures are being uploaded in a reasonable quality, as soon as we use the userprofile macro on a page, the images get very pixelated and blurry there.

[raphj]

Hi @Wurzelmann!

Thanks for your report. I just tried and the macro uses a version of the avatar resized to the size it uses. I should give the best results on a non hi dpi screen. Arguably this is not great for hidpi screens with a scale hight than 1, or zoomed page.

What hardware, browser and profile picture do you use? If you know how to get this information, please give the scale used by your screen and your zoom level.

[Wurzelmann]

Hi,

thanks for getting back to me on this. Honestly, I tried this on various screens and browsers (mostly Firefox, but also Chromium), tested on 4k screens (150% scaling), 1080p screens (100% scaling), desktops and laptops. It did not really matter which devices we used, they were always blurry.

[raphj]

Hi @Wurzelmann thanks for your quick answer. Would you have a test avatar picture we could try, and maybe a screenshot demonstrating the issue?

[Wurzelmann]

For privacy and this test, I used a random picture from https://thispersondoesnotexist.com/. The pictures have a resolution of 1024x1040 pixels (so picture quality should not be an issue).

When I use the "user profile" macro, it always shows up like this (external link to my personal file share solution, link valid for 31 days)

[raphj]

Thanks @Wurzelmann
Do you happen to have the original image somewhere?

Here's the result:

We might be using a too low quality when resizing, but at this point I would suggest you to open an issue at jira.xwiki.org with all this information. I believe this is an XWiki issue that's not specific to the userProfile macro. I think userProfile works as intended.

@snazare or @mflorea any second opinion on this?

[Wurzelmann]

Do you happen to have the original image somewhere?

Hm, what image do you mean? The one I used in my screenshot? For privacy reasons, I cannot give you the actual picture of a real employee, sorry. If you mean the one in the screenshot: it's this one

[mflorea]

@raphj the user profile macro is calling #mediumUserAvatar() which leads to a server-side resize of the user avatar from 1024px (mentioned by the user) to 50px https://github.com/xwiki/xwiki-platform/blob/b1ea9df25c518887c342fc369527446e56fe61f2/xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/macros.vm#L423 . The resize quality is configurable on the server side, but there will always be some loss when you go from a big image to a small one. The goal of the server-side image resize is to speed up the requests by reducing the amount of data transferred to the client. If you resize too much you win time but you lose quality. So you need to find a balance. In practice what we do in some places of XWiki UI is to:

• resize the image (avatar) to an intermediary size (not too small, but still small enough to win some time)
• resize the image further using CSS to fit the UI element

So what you could do is to:

• call #largeUserAvatar() or, if that doesn't improve the quality then call directly #resizedUserAvatar() with a larger width (e.g. 240)
• use CSS to further limit the avatar width to what you need (e.g. 32px)

[raphj]

Ok, I have replaced #mediumUserAvatar() with #largeUserAvatar()

I get this resized profile picture:

This looks like this:

It is better indeed. I'm committing this and closing the issue, but feel free to re-open if you think it's still not enough @Wurzelmann.

[Wurzelmann]

Thanks, way better indeed!