BE images optimization

[elatif2020]

A script to reduce the size for existing avatar images
@andreymikhadyuk add the details

[andreymikhadyuk]

FE:

• react-image-file-resizer
• compressorjs
• browser-image-compression

BE:

• sharp is pretty popular and not so heavy, and seems to have good performance as per description. They use Apache-2.0 license and I am not sure whether it is ok for us to use this lib
• I used Jimp for some purposes in the past, it is good, but pretty heavy

[elatif2020]

FE:

* [react-image-file-resizer](https://www.npmjs.com/package/react-image-file-resizer)

* [compressorjs](https://www.npmjs.com/package/compressorjs)

* [browser-image-compression](https://www.npmjs.com/package/browser-image-compression)

BE:

* [sharp](https://www.npmjs.com/package/sharp) is pretty popular and not so heavy, and seems to have good performance as per description. They use `Apache-2.0` license and I am not sure whether it is ok for us to use this lib

* I used [Jimp](https://www.npmjs.com/package/jimp) for some purposes in the past, it is good, but pretty heavy

As I understand in order for us to use this sharp library we should somehow include the Apache license in our project (in a publicly available location). Are you aware of ways to do so for a closed source project?

[andreymikhadyuk]

FE:

* [react-image-file-resizer](https://www.npmjs.com/package/react-image-file-resizer)

* [compressorjs](https://www.npmjs.com/package/compressorjs)

* [browser-image-compression](https://www.npmjs.com/package/browser-image-compression)

BE:

* [sharp](https://www.npmjs.com/package/sharp) is pretty popular and not so heavy, and seems to have good performance as per description. They use `Apache-2.0` license and I am not sure whether it is ok for us to use this lib

* I used [Jimp](https://www.npmjs.com/package/jimp) for some purposes in the past, it is good, but pretty heavy

As I understand in order for us to use this sharp library we should somehow include the Apache license in our project (in a publicly available location). Are you aware of ways to do so for a closed source project?

No, I usually tried to avoid such libraries.

[ariel-dao]

@andreymikhadyuk I can add a function that'll compress avatar images when they are uploaded and also set up a migration to do it for existing, but I'll need to know how to identify those images. Do you have a specific path/naming convention for avatar images that I can use?

Also, what size should I set it to? I was thinking max 200px height

[andreymikhadyuk]

@ariel-dao As I see if image has been uploaded to the firebase storage (https://firebasestorage.googleapis.com), then this is the image which we should compress.

@elatif2020 What size you would want to have for images?

[elatif2020]

@ariel-dao As I see if image has been uploaded to the firebase storage (https://firebasestorage.googleapis.com), then this is the image which we should compress.

@elatif2020 What size you would want to have for images?

for users' avatars we need 128*128 (for the profile page) and 40 * 40 in the new dm list and 32 * 32 in the feed
for commons' avatars we need the sizes: 72 * 72, 34 * 34, 24 * 24
For images in gallery of posts\commons we need larger sizes, maybe maximum 1200 * 1200

[elatif2020]

@andreymikhadyuk I can add a function that'll compress avatar images when they are uploaded and also set up a migration to do it for existing, but I'll need to know how to identify those images. Do you have a specific path/naming convention for avatar images that I can use?

Also, what size should I set it to? I was thinking max 200px height

@ariel-dao
Regarding how to identify the avatar images - as I guess from what I see this information does not appear in the filename. For example, this is a user avatar image: https://firebasestorage.googleapis.com/v0/b/common-production-67641.appspot.com/o/public_img%2Fimg_1686485569092.jpeg?alt=media&token=7df2cd4e-28c5-486d-b952-2d096a0538ea

So I guess we should use the relevant links in db to identify it. (I mean there is an 'image' field for daos, and 'photoURL' for users)

[ariel-dao]

Can we set up a defined path for types of images? for the initial migration ill pull from those, but bank account/invoice/image cover/profile avatar we should have a relative path in storage, I'll move existing and delete all that are unused @andreymikhadyuk

[ariel-dao]

@andreymikhadyuk Let me know which paths are defined for which types of images, I need it to implement the resize on upload because it's based on the path

[andreymikhadyuk]

@ariel-dao As I see we do not have defined paths for the files. We use 2 file directories: public_img and private.

[andreymikhadyuk]

@ariel-dao You can define the paths on your own and let us know. Then we will create a ticket for FE to update the way we upload images and files.

[elatif2020]

@arieller can you please update what have you implemented, and what should be now implemented in the FE in this regard?