We are on a project with node js and flutter. We use an S3 bucket for storing images. We need to optimize images to a minimum, for easy loading. We use compression from the backend which results in random image sizes for different images. When those images are resized on photoshop with a preferred size of 500 * 500 px,(also used 200 * 200px, 300 * 300px) it results in the same multiple-sized images. What can we do to minimize image size and optimize the image loading performance?
1 Answers
There are many ways to approach this problem.
Try this way.
- Create two folders in your S3 bucket: original & resized.
- Create a lambda function and add this lambda function to the S3 trigger, so that whenever any image will be uploaded to S3, this trigger will be executed and the lambda function will run.
- Upload images from your client-side to an original folder of S3 Bucket.
- Once the image is uploaded lambda will run to do the processing on the image (Re-size/optimize ) and will save this processed(re-sized) image to the re-sized folder of the bucket.
- Keep polling the resized folder from the client-side to get resized image. (Remember we upload the original image to the “original” folder & get the resized image from the “resized” folder)
Related