Resizing images for speed?

JavaScript
1

I am creating a website and have images stored on AWS s3, however the images are far too large and want to be able to minimize the size of the images so that the website loads faster, but still keep the original quality image stored through s3. What are my options?

2

You got a few options:

  • Resize the images manually and upload them at the same time.
  • Resize all the images at once via a script (generally using imagemagick) - ie take your folder of images, run imagemagick so that it also creates optimised/resized versions of all of them, upload.
  • Do the above as part of the build process for your site, so use webpack or whatever to package up all assets, and the resize step would be one of the things you’d set it up to do automatically.
  • You’re on Amazon, so you can use a Lambda function to resize them on-the-fly (so when you upload an image, the lambda is triggered and resizes the image and saves it in the bucket) - first example script I found on Google: https://github.com/sagidM/s3-resizer
  • Use something designed specifically for media (like Cloudinary) instead of S3, which will automatically do it for you.

There are a lot of other ways you can do this, but they all boil down to either creating smaller versions on your side and uploading at the same time, or running some process that converts them when they’re in cloud storage. Lambda is possibly the best bet because, although it will be a pain to set up, once it’s done you can forget about it (it will just run automatically - as soon as you put an image in the bucket, it will generate a resized version as well). Also you learn to use one of the core planks of serverless, which is a v useful thing to know.

3

Definitely agreeing on Dan with this. The Lambda function trick is quite great as it saves you a lot of time where initially, you need to manually resize and upload the files on the server again.

4

I have never used it but the Lambda function seems like a great scalable option and I would try that.

However, another possible option is Lazy Loading which will allow your page to load quick so the user can interact with the page and then the deferred images will load in full quality. You can also use a very small version of the image as a placeholder but rendered at full size like Medium articles do.

It worked wonders for me when I had some pretty large images and also worked very well with deferring the load of some google maps I had on the page.

5

Thanks for the reply, the problem is that it’s for an art site. So I need the full quality still stored somewhere else for when the person buys the piece. It currently is stored on Printful in full size (the way the art will be sold), and stored on AWS. Perhaps I can just use Cloudinary instead?

6

Cloudinary is definitely the easiest option — it’s designed for this kind of thing. I don’t know about pricing: I think it’s free for small amounts of stuff, but don’t quote me on that. Just to clarify though, with any of the other options, I didn’t mean replace the original images, you’d always be creating a modified copy in a smaller size (or multiple modified copies in different sizes if that was needed).

7

So, I uploaded my images onto Cloudinary and set the width parameter to the link. However, the website in the network tab still has not sped up. Any ideas? Is it loading the full image, then resizing?