nextcloud
Small favicons are blurry
Steps to reproduce
I'm a bit afraid of changing things in nextcloud-vue (so I only open this issue for the moment) but if you check my test bellow, the CSS changes can fix avatar when they are too small (avoids blurry effect) :
CSS changes
Before
After
Expected behavior
Read above
Actual behavior
Read above
Mail app version
3.7.7
Mailserver or service
No response
Operating system
CentOS
PHP engine version
PHP 8.2
Web server
Nginx
Database
MariaDB
Additional info
No response
Those are favicons. The favicon probably only has a low res icon.
@ChristophWurst you're right, we're talking about favicons, and it's not always available at all resolutions, including the highest ones. Do you confirm that my suggestion is relevant ?
I can confirm that low res favicons do not look great but I'll leave the decision on a workaround to designers
@Jerome-Herbinet could you try with a few other favicons, including those which have higher resolution? A thing I would be worried about is that it will result in small squares inside the circle, which looks off.
In your example it looks good cause it’s a favicon with white background in light mode, but this would look differently otherwise. So I am inclined to reject this and suggest to improve the favicon instead?
Otherwise, if we know that a favicon is low-res, we could have special handling for it. But only for the low-res ones, cause high-res ones pose no issue.
@Jerome-Herbinet could you try with a few other favicons, including those which have higher resolution? A thing I would be worried about is that it will result in small squares inside the circle, which looks off.
In your example it looks good cause it’s a favicon with white background in light mode, but this would look differently otherwise. So I am inclined to reject this and suggest to improve the favicon instead?
@jancborchardt : test with a bigger square one
Right, so your solution would basically ensure that lower-res images don’t get upscaled – that is good.
As said one thing I am worried about is it looking weird with low-res favicons of different colors, as it would result in small squares among the proper circles (or rounded squares, depending on how the favicon looks). So it would be good to see some examples with that as well. Also for example in your screenshot, the Nextcloud logo in the circle is smaller than the personal picture?
Right, so your solution would basically ensure that lower-res images don’t get upscaled – that is good.
As said one thing I am worried about is it looking weird with low-res favicons of different colors, as it would result in small squares among the proper circles (or rounded squares, depending on how the favicon looks). So it would be good to see some examples with that as well. Also for example in your screenshot, the Nextcloud logo in the circle is smaller than the personal picture?
@jancborchardt : test with a smaller square one
@Jerome-Herbinet the examples are always very isolated. :) It’s best to show a whole list of mails with various avatars and favicons, so it can be judged whether it works fine in practice.
I do like that regardless of size they get rounded, I’m just not sure it will look nice with various circle sizes in the list. But yeah, the question is if the varying circle sizes are nicer than the pixelation.
@Jerome-Herbinet the examples are always very isolated. :) It’s best to show a whole list of mails with various avatars and favicons, so it can be judged whether it works fine in practice.
I do like that regardless of size they get rounded, I’m just not sure it will look nice with various circle sizes in the list. But yeah, the question is if the varying circle sizes are nicer than the pixelation.
@jancborchardt this is just my personal preference, but I prefer a smaller, sharper avatar to a larger, blurred one. This is just my personal preference, but I prefer a smaller, sharper avatar to a larger, blurred one (which looks more like a bug, IMO). Maybe you should launch a poll during an upcoming Talk meeting with your Nextcloud colleagues 🙂
@Jerome-Herbinet I'll likely be fine with your solution, and I prefer if design is not decided by polls (especially small things like this). I'm just asking for the screenshot to show further different examples in context, so we can see how it looks in practice. :)
Dear @Jerome-Herbinet @jancborchardt, how can we proceed with this? Could one of you create example screenshots to find consent? Thank you
To not hold it up further, I'd also be happy to +1 a pull request that implements @Jerome-Herbinet's changes as he wrote. :) as said it should be fine.