I want to know how you manage the upload of a big image with AWS S3.
The code to upload is not the problem and it’s not the topic of this post.
I have a profile image upload on my website. For now, I upload the original image from the client to S3.
But when I show this image, it can be very large. (So the browser takes time to load it)
So how to manage this process ?
What is the best solutions :
Resize the image on the client and send to S3 (What format and what size ?)
Resize on the server and upload to S3
Don’t resize before send to S3, but resize on the fly.
I would go with #1, if there is an appropriate (not heavy) resizing module and would limit the size of userpics to up to 1000px (need to check specific dimensions and reasons behind that, for example Facebook recommends to have 720px, 960px or 2048px size images, but I don’t see a logical reason behind that).
In #2 imagine what happens when 1000 users start to resize their photos altogether?
Thanks for your reply.
For the #3, I want to talk about a proxy between S3 and my website. This proxy handle image request, but resize on demand the image.
Ex : https://proxy.com/img/100x100/foo.png/
Ah, right… Well, if there is a decent client-side solution I would go with it, but if for some reason it is not available, then with #3 and only then would think about loading the server…
Regarding the image size. For example on this forum a basic userpic is 45x45px but then if you click on a username you see a 120x120px image. But there is no other bigger userpic stored anywhere (like in Facebook or LinkedIn). If this is enough from design stand point, I would just limit to 120px then.
one more thing… I don’t have a retina screen, so don’t know if standard res userpics look that awful with retina… otherwise you would better have 2 of them for different types of screens.
It’s definitely tough when you’re on a budget. For us, the flexibility of passing params in the url to get the image you need is worth the cost. If you find yourself exploring things like imagemagick, I’d definitely weigh the cost/benefits of a service like imgix. Also, you don’t have to worry about things like image size, as a user could upload a “profile” image that was 2000x2000 and you can have 50 different versions of it displayed all for the price of the master image.
You could use Slingshot to send the image up to S3 and then use a Lambda function to resize it before re-uploading it up to another bucket. Check this tutorial out, I’m using this and it works great.
I don’t have a retina screen, so don’t know if standard res userpics look that awful with retina… otherwise you would better have 2 of them for different types of screens.