Recommended allocated resources for openimg/sharp on-the-fly optimization

[jenseo]

Hey,
yesterday I did the first deploy of my app to the staging environment at fly.io.

I have built a project from scratch and then picked the parts I have been interested in from the epic stack (which in the end was quite a lot, but with the benefit that I have gained a lot of insights about how everything is put together).

Anyways, I think the image optimization with openimg/sharp was a real nice addition to the stack and I have implemented it with the help of an image optimization endpoint, so not a dedicated server for it. These are cached to disk like in the epic stack and I also cache generated base64 placeholders to my cache database.

So far so good, but when I deployed the app to the fly staging environment, I noticed that the site becoming quite sluggish when the initial image optimization occurred, and they took up to 30 seconds to actually load. This might of course be quite expected given that the default resource setup seems to be quite small.

But, and this is the actual problem I have, I think it's hard to decide/know what would be a good upscale in terms of resources allocation, balancing performance with still having money left to buy some food at the end of the month 😄

I've always been quite uninterested in hardware and have been lucky enough to have people at work to ask or dedicated teams that has set things up and scaled things appropriately.

As for the site when deployed to production, I don't expect it to have that much traffic, but of course I want it to be performant for the sad souls that find their way there.

Here's some graphs with the spikes and throttling after the first deploy when visiting the site and waiting for openimg to do it's job.

[jenseo]

I realized maybe I should mention @andrelandgraf here that has done such a great job building and integrating the openimg package!

[jenseo]

I just realized that it would probably be most cost effective to handle the image processing in a separate server/worker and allocate more resources there, while letting it autostop when not in use. Will investigate this more

[andrelandgraf]

Good discussion! Some possible next-best steps if you outgrow the optimization endpoint:

• Use an image optimization service like Cloudinary
• Deploy a standalone image optimization server

Depending on your use case, if you know the required sizes up front, you could also populate the cache on image upload instead of on demand/request.

Deploy a standalone image optimization server

Some starting points:

• Deploy a standalone server using openimg/bun or openimg/node: openimg docs
• Deploy a standalone server using openimg-go.

Note that openimg-go is brand new. I'm sure @deyshin would be happy to have you try it out!

Lmk if you run into any issues 🙏🏻

[jenseo]

Thanks @andrelandgraf , currently working on a worker (pun intended) to live in a separate process! This will act as the image optimization server but I want it to run through the image optimization endpoint and instead of having a cache in the file system, I will try to upload optimized images to tigris (so no_cache in prod, file system locally). This way, the worker can scale up when needed and once optimizations are done it can go to sleep.

Will try this first, will let you know my findings!