CODEWITHSUNDEEP
imageimage-processingamazon-s3amazon-cloudfront
Nikolay Traykov
Nikolay Traykov

Reputation: 1695

How to manage different image sizes on a website

I have a website that is going to host thousands of images. Not only that, but each image has different size depending on where you are in the webpage - on the list page, the image is shown as 350x200 rectangle, on the sidebar pictures are 100x100 etc.

So when a user uploads an image to the website, I keep the original and make 4 resized copies for each size. So if 100 users upload an image, the result will be 500 images. I can't event think of what will happen with the different sizes of the different mobile devices...

I started using CloudFront to optimize speed. And when a user uploads an image I upload the original and the resized copies to Amazon S3 bucket. But if tomorrow I decide to add another size, or change an existing size I have to run a script that deletes the old sized images and to uplaod the newly sized images, which means "get the original from S3, resize it, upload the new size". That is not practical at all. Imagine when I do a complete redesign of the website and the image sizes change completely, I would have to run a script that resizes each image to the new requirements and to delete the old images.

Is there a more practical way to acheive that?

I wanted to acheive the following scenario:

I cannot think of a way to implement this. Any help or sharing best practices will be appretiated.

Upvotes: 3

Views: 1261

Answers (2)

alexmcfarlane
alexmcfarlane

Reputation: 1148

For anyone doing this now. It's not for everyone, but due cost-saving efforts we just switched from Imgix to using AWS's Serverless Image Handler. Works great if your images are on S3 and maybe a good alternative solution if it lacks the features of Imgix.

Upvotes: 0

John Rotenstein
John Rotenstein

Reputation: 269410

Rather than doing all this yourself, you could use an image resizing service such as:

They can resize images on-the-fly so you do not have to create and store them yourself. They can also manipulate them (rotate, watermark, colorize) images on-the-fly. Videos too!

If you choose not to use such a service, you could create your own virtual resizing service. The major choice is whether to:

  • Resize on-the-fly (using CloudFront for caching but not requiring any storage of the resized images), or
  • Resize upon request and store the result for future access (less processing cost, but involves storage cost)

It is not possible to have CloudFront "see that this size is missing on S3 and pull it from an origin from my website". (You might be able to do fancy stuff with 404 pages, but it wouldn't be worth the effort.)

Upvotes: 4

Related Questions