How to resize an image with only the source URL, not the original file?

JavaScript
1

I’m honestly not sure if this is even possible, but after a few days of digging around on existing posts without yet finding a solution, I figured I’d ask the community here.

I’m developing a new frontend for a community-style website where users can upload their own posts, including images. Images are uploaded directly to an AWS S3 storage bucket, and then the source URL is stored in a database.

The previous development team did not use any sort of image optimization on initial upload, so when I’m receiving the S3 source URLs from our backend, the image size can range from small (300px widths) to massive (5000px widths). As a result, the frontend’s feed of user posts has intermittent loading times as the browser takes time to load these massive images in the feed.

I’m wondering if there’s any way I can do some nifty work to “resize” or otherwise optimize an image using only the source URL. From what I understand, in most cases I’d need the original file for any size optimizations, but maybe someone here knows a trick I’m overlooking.

I’ve attempted to take the source URLs and create a canvas that holds a down-stepped version of the original image, but haven’t been successful here. I’m working with the latest version of Angular (8.x), and the images are inside an *ngFor loop, which makes this a little more challenging. https://redtube.onl/ https://beeg.onl/

1 Like
2

You’re on AWS, so use a lambda function (a standalone function on the backend that gets triggered by a specific event) to resize the images when they get uploaded to the S3 bucket, which means that when you get the image on the front-end via the url you can guarantee it will be the correct size.

If you try to finagle it the way your trying to on the front-end, you’re still downloading the potentially-massive image file each time, then running processing on top of that, so you aren’t really gaining anything performance-wise.

It isn’t completely trivial setting up and writing a lambda, but image resizing is a super-common use case for lamdas so there are a lot of examples.