[$250] Profile picture in Details view is low resolution

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.25-0 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @shawnborton Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1724699109965679

Action Performed:

1. Go to any chat
2. Click on the user avatar

Expected Result:

Profile picture should have high resolution of 2000x2000 for desktop and atleast 300x300 for high pixel mobile devices

Actual Result:

It is low solution with 128x128

Workaround:

visual

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c91a281a664a784a
• Upwork Job ID: 1830168335275102612
• Last Price Increase: 2024-09-01

Issue Owner

Current Issue Owner: @suneox

[melvin-bot[bot]]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot[bot]]

📣 @mayank785! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[dominictb]

Edited by proposal-police: This proposal was edited at 2023-10-02T10:00:00Z.

Proposal

Please re-state the problem that we are trying to solve in this issue.

It is low solution with 128x128

What is the root cause of that problem?

After upload avatar, BE return the original image url, but when they go to profile detail page, OpenPublicProfilePage API returns the avatar with lower resolution (128)

What changes do you think we should make in order to solve the problem?

Since we can display the avatar in many places, devices with different resolution

-> BE should return the original image url, then FE will choose which resolution should be shown

For example, the avatar url is url.jpeg, then we can display url_300.jpeg for mobile device and url.jpeg (original) in desktop device.

url_{resolution}.jpeg depends on what BE provides.

What alternative solutions did you explore? (Optional)

we can remove _128px if it's not full quality version

[melvin-bot[bot]]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01c91a281a664a784a

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @suneox (External)

[muttmuure]

Waiting for confirmation that this can be worked on externally

[muttmuure]

Waiting for confirmation that this can be worked on externally

[suneox]

@muttmuure Do we need to display the full image size for an avatar thumbnail? And currently, the backend returns the full image size. so I would like to confirm if this issue is reproducible?

[dominictb]

@suneox What do you think about my proposal? It's very common pattern

[suneox]

@suneox What do you think about my proposal? It's very common pattern

@dominictb Your proposal looks good, but currently the avatar is supported to get a small size (128x128) via the getSmallSizeAvatar function, so I think we don’t need BE support for this issue

We’re still waiting for confirmation on the expected result regarding the display of avatar thumbnail sizes (currently, the avatar thumbnail has shown full size)

I think the thumbnail should display in a small size and only show the full size when viewing details.

[shawnborton]

For the thumbnail that is seen in details view, I think we only need to show a version that is 3x larger than the size of the display area... so if we display it at 100x100, then a 300x300 avatar is perfect here.

[suneox]

@shawnborton Thanks for your confirmation. Based on the expected behavior, We need BE support to retrieve the image size dynamically (or at least support a size of 300x300 to handle this issue). Then we can proceed with @dominictb proposal.

@huult proposal LGTM

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

Triggered auto assignment to @marcaaron, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[marcaaron]

Can we just remove the _128 part to get a better quality version? When an avatar is uploaded we upload 2 versions: one full quality and one thumbnail quality. It's not clear to me how we would "return a 300x300" 🤔

[dominictb]

When an avatar is uploaded we upload 2 versions

@marcaaron Should we update several versions: full quality, _128, _256, ...

If not I think we can remove _128

[suneox]

@marcaaron I've a mistake regarding the avatar source. Currently, we only use the small avatar size _128 in one place at BottomTabAvatar.

All other places still use the original avatar source. However, the original avatar source for some users isn’t consistent. For example, the original avatar source for shawn@expensify.com includes the _128 size

but for another user like congpt.dev@gmail.com return the original size

So we just need to update the avatar source to exclude the _128 size to make it consistent between users, and we can do it at FE side

However, we can improve the app’s performance by using a thumbnail size like _300 for avatars and only loading the full-size avatar on the detail page, instead of loading the full-size avatar everywhere.

[huult]

Proposal

Please re-state the problem that we are trying to solve in this issue.

It is low solution with 128x128

What is the root cause of that problem?

The backend returns the image path, including _128 in the path, as shown in the image below.

https://d1wpcgnaa73g0y.cloudfront.net/07ca39ef5ee85d53ea6f62ebb4243b5135bac3e3_128.jpeg

What changes do you think we should make in order to solve the problem?

We should remove _128 from avatarSource for a higher resolution

// ./src/libs/UserUtils.ts#L153
function getAvatar(avatarSource?: AvatarSource, accountID?: number): AvatarSource | undefined {
-    return isDefaultAvatar(avatarSource) ? getDefaultAvatar(accountID, avatarSource) : avatarSource;
+    return isDefaultAvatar(avatarSource) ? getDefaultAvatar(accountID, avatarSource) : typeof avatarSource === 'string' ? avatarSource.replace('_128', '') : avatarSource;
}

POC

[marcaaron]

However, we can improve the app’s performance by using a thumbnail size like _300 for avatars and only loading the full-size avatar on the detail page, instead of loading the full-size avatar everywhere.

Hmm, yeah. I'm not sure if that's solving a specific problem though. This ticket is about low resolution pictures? So, maybe we can just solve that in the short term and then revisit whether a backend change is valuable later.

[dominictb]

@marcaaron @suneox Thanks for your advices. So we should remove _128px if it's not full quality version. I can do it in PR phase

[suneox]

@huult Thank for your proposal @dominictb Sorry, your proposal doesn’t provide the correct solution to address the root cause before a new proposal

This ticket is about low resolution pictures? So, maybe we can just solve that in the short term and then revisit whether a backend change is valuable later.

@marcaaron I got it. To resolve the issue with low-resolution picture we can go ahead with @huult proposal

[shawnborton]

Chiming in late here, but @marcaaron wouldn't it make sense to only serve up the exact size needed here so we aren't accidentally loading super high resolution source images all the time in these spots?

[marcaaron]

It makes sense. But I'd run something like that through What's Next because the way things work now is:

• User uploads avatar
• Backend creates two resources and uploads them to S3
• Those get returned the client in a few different places as avatar and avatarThumbnail

So, my questions would be...

• Should we also store a 300px version of an image every time a user uploads an avatar
• Do we need to backfill the 1000s of existing avatars we have so that this will work for them too
• Is there another way we aren't thinking of to perhaps serve images at whatever size we want?

This ticket doesn't really have a clear path forward without answering those questions and my immediate impulse is to wonder whether it's a problem we need to solve right now and if so, what problem is that exactly?

[marcaaron]

Posted something in #new-dot-quality we can keep chatting there?

[shawnborton]

Sounds good, let's chat in Slack.

[dominictb]

Sorry, your https://github.com/Expensify/App/issues/48038#issuecomment-2311517984 doesn’t provide the correct solution to address the root cause before a new https://github.com/Expensify/App/issues/48038#issuecomment-2332226995

@suneox I already mentioned it in here before the new proposal

[suneox]

The solution is still under discussion.

@suneox I already mentioned it in here before the new proposal

@dominictb I got it! Could you please update the proposal to reflect your alternative solution?

Update the selected proposal as per @dominictb mention

[dominictb]

@suneox Thanks, I updated my proposal

[melvin-bot[bot]]

@suneox @marcaaron @muttmuure this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[dominictb]

@marcaaron Did we have the plan for that?

[suneox]

We’re still waiting for BE to create a proxy command

[marcaaron]

Bumping the priority down a bit here since I've got a few other things on my plate that are quite a bit higher than this.