Under the Hood: Optimising Memory for Large-Scale Image Uploads

While developing the CARE web platform—a specialised AI-driven platform tailored for wildlife conservation researchers—I ran headfirst into a gnarly technical challenge: excessive client-side memory consumption when researchers submitted massive bursts of images.

The initial implementation looked solid on paper, but user reports told a different story. If a researcher uploaded a batch of 50+ high-resolution wildlife photos simultaneously, their browser struggled, sometimes even crashing due to uncontrolled RAM usage.

The Constraint

Every problem needs profiling. Using built-in browser tools, I confirmed that attempting to read and display a preview for dozens of massive image files at the exact same moment was immediately choking the available memory.

At a glance, the most straightforward solution was compression. However, the AI models responsible for detecting species naturally relied on intact, high-fidelity source images. Applying compression client-side before processing risked degrading the AI model’s accuracy. I needed an architectural solution that left the images perfect, but prevented the system from bogging down.

Synthesizing a Systematic Approach

To explore scalable options, I structured my problem-solving method. I tapped into LLM tooling (specifically ChatGPT) as an aid, employing highly targeted prompts like: “How to optimise large-scale image uploads without overloading client memory, when image compression cannot be used?”

After analysing alternatives—ranging from chunked transferring to lazy-loading techniques—I prioritised batch processing. It aligned perfectly with academic frameworks and emphasised decomposing the problem into strictly managed sets.

The Implementation

I re-engineered the front-end logic by designing a recursive JavaScript function. This effectively throttled the UI, uploading images in strictly controlled streams of 10. By utilising Javascript Promise and structured async/await syntax, the function prevented the main browser UI thread from freezing. This recursive step-by-step processing completely eliminated the resource flood.

Additionally, I rolled out real-time progress tracking to significantly boost the user-facing UX, assuring researchers the process hadn’t stalled, and constructed robust error-handling hooks for any individual payload that failed.

The Final Result

The outcome was a massive technical win for our frontend performance. Overall client memory usage plummeted by approximately 70% during peak upload times. This logic effectively enabled seamless and stable handling of hundreds of individual image files, tightly restricting peak consumption strictly under 200MB.

Breaking complex constraints into smaller, manageable technical logic is a universal strategy. The process reinforced how systematically decomposing abstract requirements leads directly to efficient, reliable code.