Only use image thumbnail instead of full sized profile image

[thienlnam]

<If necessary, assign reviewers that know the area or changes well. Feel free to tag any additional reviewers you see fit.>

Details

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/146391

Tests

On web:

• Right click a profile picture on the chats list, hit 'Inspect' make sure the image elements ends with .128.jpg like this one <img alt="" draggable="false" src="https://d2g02b6ed2w9fz.cloudfront.net/0c2101577e36c53d943549c696610aa142668700_**128.jpeg**" class="css-accessibilityImage-9pa8cd">

• Do the same with a profile picture in an actual chat

Other devices: Make sure profile images show up and look as expected in the sidebar and in the chat

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

cc @tgolen @nickmurray47 since you guys are reviewing the Web-E PR for this

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[thienlnam]

I have read the CLA Document and I hereby sign the CLA

[thienlnam]

Holding on PR but can still be reviewed / tested by pulling down the Web-E PR

[shawnborton]

Just curious, but what is the actual size of the icon we're serving up now? For images to appear high quality and retina, we want them to be at least 2x or 3x the size of the area in which they are displayed. So for example, avatars are 40x40 in the LHN, ideally we serve up an image that is 120x120. The only other area to consider is the profile view when you tap on your own icon and the Settings page launches. I believe we show the avatar at 80x80, so we'd want the image in that case to come through as at least 240x240. Let me know if that all makes sense!

[thienlnam]

In the LHN right now, the size of the images we're serving for the icons are actually the full-sized profile images that were uploaded as a profile picture and varies from person to person. For example, it looks like the image served for your profile picture is 1365x1365 in the LHN, and the ones I'm seeing at a glance are between like 334x334 to 3024x3026. This change should make it so that all the images are loaded as 128x128 for the 40x40 icon sizes.

Also I see what you're saying about the 80x80, I'll go ahead and see if we have the option to serve images at that resolution and update that one location

[shawnborton]

Sounds great, thanks!

[Beamanator]

I'm having a hard time seeing the new, smaller images in the LHN - The code lodashGet(details, [dmParticipant, 'avatarThumbnail'], '') is always undefined for me, so the LHN thumbnails are never loading - is there something else I need to do to get that to populate?

[thienlnam]

Do you have master Web-E pulled down? The Web-E changes required for this are currently deployed on staging but it adds the 'avatarThumbnail' parameter that you're currently seeing as undefined

[Beamanator]

Tested once the Web-E changes got to Production - everything looks great! :D

LGTM - I assume this isn't on Hold anymore since the Web-E PR is merged & in production, right?

[thienlnam]

@shawnborton It doesn't look like we can just grab a 240x240 version of an image like we can with the 128 versions, since the source image is still larger than 80x80, can this be put into another issue so we can just push this out? The alternative is just loading the full resolution image for all 80x80 locations right now which wouldn't be the most performant

[thienlnam]

@Beamanator Yup! Looks like the PR is now in production so this should be safe to go out pending Shawns review. I did add back the personalDetails check in the if statement in my latest push

[thienlnam]

Looks like Shawn is OOO for the rest of the week, since this is attached to a daily could you give it another look and merge if it looks good? @Beamanator

[Beamanator]

Looks great! I tested on Desktop and looks good too :D