Integrate Cloudfront with dynamic image resize and S3 storage

Question

I've been reading a lot about dynamic image manipulation, storage and content delivery, the company I'm working for already uses AWS for some of their services.

The application I'm working on, store document images to a S3 bucket (not limited to), and i need to display them on demand.

The first version of this application, stored the images locally and performs the image manipulation on-demand on the same server.

Now, the documents storage has increased and a lot of images are being stored, all this via web application, this means that one user may upload say 100+ images and the server needs to process them as fast as it can.

That's why the images are uploaded to an EC2 instance and they are streamed to a S3 bucket internally, that's how we save the original image in the first place, no thumbnails here to speed up the uploading process.

Then a different user may want to preview this images or see them in original size, this is why i need to dynamically re-size them, i will implement Cloudfront for the image caching after they are re-sized, and here comes the issue.

The workflow is like this:

1. User Request CDN image
 2.a Cloudfront Serves the cached image
 2.b Cloudfront request the image to a custom origin if its not cached
  3. The origin server query S3 for the image
    4.a If the image size exists on S3
     5. Return the image to Cloudfront, Cache and return to user
    4.b If the image size does not exists on S3
     5. Generate a image size from the original S3 image
     6. Save the new size to S3
     7. Return the new size to Cloudfront, Cache and return to user

The custom origin is responsible of creating the missing image size and save it to S3, the Cloudfront can use the cached image or request this new image size to S3 as it now exists.

I think this is possible, as i already read a lot of documentation about it, but i still haven't found documentation of someone who has made this before.

Does this looks like a good way of handle the image manipulation, has anyone saw any documentation about how to do this.

I'm a PHP developer but i might be able to implement a non-PHP solution in favor of performance on the image server.

Answer 1

If you are open to non-PHP based solutions https://github.com/bcoe/thumbd is a good option since it already integrates S3, etc. However you will need to know the sizes you need ahead of time. I would recommend such an approach rather than generating sizes on the fly since it means faster response times for your user. Your user will not have to wait while the new size is being generated. Storage on S3 is incredibly cheap and so you will not be wasting any $$ by creating multiple sizes either.