CODEWITHSUNDEEP
javascriptangularjsnode.jsimageamazon-s3
dnul
dnul

Reputation: 717

compress & resize user uploaded images

I'm building a site with lots of user uploaded images ( like an airbnb suppose)

Until now , the site would upload whatever image you submit to amazon s3 and then display accordingly. Sometimes these images are too heavy and increase page load time.

I want to resize this image to the resolution needed and compress when possible ( transform to jpeg) to enhance load time and reduce traffic.

I've found this can be done either by:

What are the benefits of each approach? which is the most common? what considerations should I have in each case?

My stack is currently node.js / angular. I don't intend to use a CDN for now as the project is in a dev phase

thanks in advance!

Upvotes: 1

Views: 1334

Answers (2)

dnul
dnul

Reputation: 717

for the record, the solution I've found the easiest was to load whatever image the user selected in a html5 canvas and convert it to jpeg, then upload the jpeg and in the backend I would resize it using a node imagemagick package.

By converting to jpeg in the frontend you minimize upload time while not losing performance and also normalize input format to the backend service.

Upvotes: 1

Olatunde Garuba
Olatunde Garuba

Reputation: 1069

you need to install and add imagemin to your grunt task here is a link for you to get it going https://github.com/gruntjs/grunt-contrib-imagemin Good luck.

Upvotes: 1

Related Questions