User image is blurry on high dpi device #1479

New Issue

dpschen · 2023-04-06T10:48:02Z

dpschen commented

2023-04-06 10:48:02 +00:00

Reason

So that it isn't blurry on high dpi devices, like mobile.

Related: Where do we know where to pick those two letters we use from the name?

### Reason So that it isn't blurry on high dpi devices, like mobile. Related: Where do we know where to pick those two letters we use from the name?

👍 1

konrad added the

kind/feature

label 2023-04-06 11:43:51 +00:00

konrad commented

2023-04-06 11:45:07 +00:00

Related: Where do we know where to pick those two letters we use from the name?

It's only picking the first letter of the username.

The generation happens here: https://kolaente.dev/vikunja/api/src/branch/main/pkg/modules/avatar/initials/initials.go#L138-L141

> Related: Where do we know where to pick those two letters we use from the name? It's only picking the first letter of the username. The generation happens here: https://kolaente.dev/vikunja/api/src/branch/main/pkg/modules/avatar/initials/initials.go#L138-L141

dpschen commented

2023-04-06 12:08:55 +00:00

Ahh that's good!

I think I'll reimplement that with a vue component in the frontend.

Ahh that's good! I think I'll reimplement that with a vue component in the frontend.

dpschen referenced this issue from vikunja/frontend

2023-04-06 12:11:15 +00:00

Replace Avatar with dynamic SVG component. #2043

konrad commented

2023-04-06 12:13:29 +00:00

I think we should keep doing that in the api. Right now all avatar logic is built in the api so that the frontend only needs to show whatever avatar it is given by the api.

(It is completely possible to generate svg avatars in go, we already do that with the marble avatar option)

I think we should keep doing that in the api. Right now all avatar logic is built in the api so that the frontend only needs to show whatever avatar it is given by the api. (It is completely possible to generate svg avatars in go, we already do that with the marble avatar option)

dpschen commented

2023-04-06 12:27:00 +00:00

My idea for the component was to reduce dependency on server (now that I think of it will probably introduce a dependency which is actually worse), reduce download bandwidth (I know also insignificant), but mostly remove blurriness. The latter is really annoying on highdpi. Any way to support highdpi for the avatars?

konrad commented

2023-04-06 12:29:16 +00:00

now that I think of it will probably introduce a dependency which is actually worse

Exactly…

Any way to support highdpi for the avatars?

There's a size parameter which lets the frontend request avatars in different sizes. We could let the frontend load avatars in a higher resolution, then only need a way to detect a hdpi monitor to avoid the higher bandwidth on non-hdpi monitors.

> now that I think of it will probably introduce a dependency which is actually worse Exactly… > Any way to support highdpi for the avatars? There's a `size` parameter which lets the frontend request avatars in different sizes. We could let the frontend load avatars in a higher resolution, then only need a way to detect a hdpi monitor to avoid the higher bandwidth on non-hdpi monitors.

dpschen commented

2023-04-06 12:37:07 +00:00

Using srcset that's not even necessary, because the browser would do this on its own.

Using `srcset` that's [not even necessary](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset), because the browser would do this on its own.

konrad commented

2023-04-06 12:42:50 +00:00

Even better 👍

dpschen changed title from ~~Create user image as SVG instead~~ to User image is blurry on high dpi device

2023-04-06 13:40:38 +00:00

konrad referenced this issue from a commit

2024-02-07 14:00:31 +00:00

fix(deps): update sentry-javascript monorepo to v6.17.4 (#1479)

Sign in to join this conversation.