[$150] Reduce the avatar file size

[vic-georgiev]

Our avatars are not optimized on the back-end. For the use of the front-end, we need to maintain the smallest files for avatars, and to support retina devices (@2x). Right now we have huge avatars that get downloaded on the user's machine, which can be a lot of bandwidth overload. Further the giant images are scaled down to tiny sizes, and this doesn't help.

The task is to optimize the avatar images that get delivered to the front end. We want to deliver only the correct size image (if the avatar is 40x40px, deliver the matching size (@2x on retina)).

Example: Chekspir's avatar: https://topcoder-prod-media.s3.amazonaws.com/member/profile/chekspir-1475952659825.jpeg
another avatar https://topcoder-prod-media.s3.amazonaws.com/member/profile/jpoarch-1479686090432.jpeg
Yet another
https://topcoder-prod-media.s3.amazonaws.com/member/profile/rsial2-1479360370167.jpeg

We can also look into https://www.liquidweb.com/blog/optimizing-images-for-responsive-design/, but the issue is we don't have a set of sizes ready to be pulled from the server. This task might be broken into 2 - back-end solution that must process the avatar images and produce a set of images for our use cases (avatars), and a front-end solution that would switch size when needed.

Please explore for further solution and let's implement this.

[birdofpreyru]

This is a good one, I also noted it a while ago, but no progress so far: topcoder-platform/community-app#432

[gondzo]

there is also a frontend only solution, using a 3rd party CDN (for example http://www.cloudimage.io )
The image is still stored on AWS and we use the same url we get from the backend, but the final image url is like cdnhost.com/size/original_image_url .
@vic-topcoder @birdofpreyru

[birdofpreyru]

I guess, https://aws.amazon.com/cloudfront/ can be a better choice, as we already use AWS; I guess, it should provide the same functionality to resize the images.

[gondzo]

not out of the box with cloudfront as far as I know, we would need to build some service that actually does resize the image and uploads it back to s3?

[vic-georgiev]

@mtwomey @cwdcwd you guys want to keep an eye on this?

[cwdcwd]

What we should do is put an event on the S3 bucket that fires on changes when we put member profile pics in.
That event should be picked up by a lambda func that then does the appropriate resizing and puts the resized pictures into the S3 bucket in common sizes.
File names should be prefix+memberid.format. These sized images should be prefixed like other services with o_ for original, m_ for medium, t_ for thumbnail, etc.
We should then just be able to bulk migrate photos off other sources and put them in the folder and the lambda will process them accordingly and we can deprecate the other sources.
Downstream, references in code to member profile images then should then just be by prefix+memberid; ie: m_1234568.jpg and we can get rid of a field on the member profile.

[cwdcwd]

in addition we can then cloudfront CDN the S3 bucket for speedier delivery of resources, if it's not already

[vic-georgiev]

I've designed most of our avatars to be 30 or 40px, so for small size and accounting for retina, that'll be 60 or 80px. I'm not sure what is the matrix of avatars we have elsewhere, but we have a profile page where the avatar is probably the bigger - 140px (280px for retina).

Also an interesting read: https://www.smashingmagazine.com/2018/02/progressive-image-loading-user-perceived-performance/

[birdofpreyru]

FYI: I took care of it in topcoder-platform/community-app@21e7d81
It lacks some more testing and deployment to prod, but otherwise we can consider the issue resolved.

In few words:

• Community App now has an endpoint that pulls user avatars from the backend, and scales them to fit the size specified by the request;
• This endpoint can be accessed via CDN set-up for Community App.

I'll write instructions on how to use it, once it is deployed.

[birdofpreyru]

@vic-topcoder @gondzo ready, here is the brief note on how to use it:
https://github.com/topcoder-platform/community-app/blob/develop/docs/cdn-user-avatars.md

[vic-georgiev]

Thanks @birdofpreyru ! @gondzo - can we make sure we are implementing it in Connect?