DEV Community: MakeMyVisuals

How We Reduced AI Background Removal Time from 18 Seconds to Nearly Instant: Lessons from Building MakeMyVisuals

MakeMyVisuals — Mon, 29 Jun 2026 16:06:56 +0000

When we started building MakeMyVisuals, our goal wasn't just to remove image backgrounds—it was to create a tool that felt fast enough for everyday users.

No one enjoys waiting 15–20 seconds just to edit a single image.

Whether you're an e-commerce seller removing backgrounds from product photos or a designer creating transparent PNGs, speed matters just as much as accuracy.

Here's what we learned while optimizing our AI image processing pipeline.

The Initial Problem

Our first implementation worked well.

The AI accurately segmented subjects, handled complex edges like hair, and produced clean transparent backgrounds.

The downside?

Large upload times
Heavy image preprocessing
Slow AI inference
Unoptimized output generation

For high-resolution images, the complete workflow could take far longer than users expected.

That wasn't acceptable for a modern web application.

Bottleneck #1 — Uploading Massive Images

Most smartphone photos today are between 5 MB and 20 MB.

Many users uploaded images directly from modern phones with resolutions exceeding 4000×3000 pixels.

The AI didn't actually need every single pixel.

Solution

Instead of processing the original file immediately, we:

Read image dimensions first
Generated an optimized working copy
Preserved the original for export
Sent only the required resolution to the AI model

This significantly reduced unnecessary computation.

Bottleneck #2 — Blocking the User Interface

Initially, preprocessing happened synchronously.

That meant users watched a loading spinner while the browser resized large images.

Not a great experience.

Solution

We moved expensive operations off the main thread.

This kept the UI responsive while background processing continued.

The result felt dramatically faster—even before total processing time changed.

Sometimes perceived performance matters as much as raw performance.

Bottleneck #3 — Processing Images Larger Than Necessary

Many uploaded photos contained far more detail than required for segmentation.

Running the AI against extremely large images wasted GPU resources.

Solution

We introduced adaptive resizing.

Instead of using a fixed resolution, we calculated an optimal size based on:

Original dimensions
Subject size
Required output quality

The AI processed fewer pixels without noticeably affecting quality.

Bottleneck #4 — Repeated Processing

Users often downloaded multiple versions of the same image.

Originally, every export triggered another processing cycle.

Solution

We cached intermediate AI results.

Only the final rendering changed.

That eliminated redundant work and reduced repeat processing times.

Bottleneck #5 — Sending Too Much Data

Large PNG files are expensive to generate and transfer.

Instead of producing oversized outputs every time, we optimized export generation by:

Compressing transparent PNGs
Optimizing metadata
Generating only required image sizes

Smaller outputs meant faster downloads.

Performance Isn't Just About AI

Most optimization came outside the AI model.

We found improvements in:

Image preprocessing
Browser rendering
Memory management
Network transfer
Export generation
Caching

The AI itself was only one piece of the puzzle.

Real User Experience Matters

When people upload an image, they don't care which neural network you're using.

They care about three things:

Does it work?
Does it look good?
Does it finish quickly?

Optimizing those small steps made the biggest difference.

Building MakeMyVisuals

These optimizations are part of what powers MakeMyVisuals, an AI-powered platform for image editing, optimization, and document processing.

Besides background removal, the platform includes tools for:

AI Product Photo Enhancement
Image Compression
Image Resizing
Format Conversion
AI Portrait Editing
Document & PDF Processing

Explore the platform here:

👉 https://makemyvisuals.com/

Background Removal Tool:

👉 https://makemyvisuals.com/background-tools

Image Optimization Tools:

👉 https://makemyvisuals.com/optimization-tools

Format Converter:

👉 https://makemyvisuals.com/format-converter

Document Tools:

👉 https://makemyvisuals.com/document-tools

Product Photo Studio:

👉 https://makemyvisuals.com/ecommerce-tools

Final Thoughts

Building AI products isn't only about choosing the best model.

It's about removing every unnecessary millisecond from the user journey.

Sometimes the biggest performance gains come from optimizing everything around the AI—not the AI itself.

What performance optimization had the biggest impact on your projects?

I'd love to hear your experience in the comments.

Optimizing Image Upload Performance for Large Files: Lessons From Building an AI Image Platform

MakeMyVisuals — Tue, 23 Jun 2026 16:09:53 +0000

When users upload images to a web application, they expect the process to be fast, seamless, and reliable. Unfortunately, large image files can quickly become a bottleneck, leading to slow uploads, increased bandwidth costs, and poor user experience.

While building MakeMyVisuals, an AI-powered image and document processing platform, I faced these challenges firsthand. In this article, I'll share the techniques we implemented to significantly improve image upload performance and create a smoother experience for users.

The Problem With Large Image Uploads

Modern smartphones can easily produce images ranging from 5 MB to 20 MB, while professional cameras generate files that are much larger.

Without optimization, this creates several issues:

Slow upload times
High server bandwidth usage
Increased processing delays
Poor mobile experience
Higher infrastructure costs

For image editing platforms, upload performance directly affects user retention.

Validate Files Before Uploading

The first optimization happens before the upload even starts.

Instead of accepting every file immediately, validate:

File size
File type
Image dimensions
Corrupted files

Example:

const MAX_SIZE = 50 * 1024 * 1024;

if (file.size > MAX_SIZE) {
alert("File too large");
return;
}

This prevents unnecessary network requests and improves reliability.

Generate Local Previews Instead of Uploading First

Many applications upload images immediately just to generate previews.

A better approach is using:

URL.createObjectURL(file)

This allows instant previews directly in the browser.

Benefits:

Faster user feedback
Reduced server requests
Better perceived performance

Users feel the application is responsive even before processing begins.

Compress Images Before Upload

For many use cases, uploading the original image is unnecessary.

Client-side compression can reduce file sizes by 60–90%.

Typical workflow:

User selects image
Browser compresses image
Optimized version uploads
Original remains available if needed

This dramatically reduces bandwidth usage and speeds up uploads.

Resize Oversized Images

A common mistake is uploading a 6000×4000 image when only a 1200×800 version is needed.

Before upload:

canvas.width = 1200;
canvas.height = 800;

Resizing large images can reduce file size by several megabytes while preserving visual quality.

Use Modern Image Formats

Traditional formats like PNG and JPEG are not always the most efficient.

Modern alternatives:

WebP
AVIF

Advantages:

Smaller file sizes
Better compression ratios
Faster uploads

In many cases, WebP reduces file sizes by 30–50% compared to JPEG.

Upload Directly to Storage

Sending files through the application server creates unnecessary load.

A more scalable architecture:

User → Cloud Storage → Processing Service

Benefits:

Lower server load
Faster uploads
Improved scalability

This approach is commonly used by modern SaaS platforms.

Show Real Upload Progress

Nothing feels slower than a blank loading screen.

Always provide:

Progress bars
Percentage indicators
Upload status messages

Example:

xhr.upload.onprogress = (event) => {
const percent = (event.loaded / event.total) * 100;
};

Users are more patient when they can see progress.

Process Images Asynchronously

Large image processing tasks should not block uploads.

Instead:

Upload file
Return success response
Process image in background
Notify user when complete

This keeps the application responsive.

Lazy Load Heavy AI Models

AI-powered image tools often require large machine learning models.

Loading them only when needed can dramatically improve performance.

Benefits:

Faster initial page load
Lower memory usage
Better mobile experience

Users should download only the resources required for the selected tool.

Cache Everything Possible

Browser caching can eliminate repeated downloads.

Useful assets to cache:

AI models
Static resources
Configuration files
Processing libraries

A returning user should experience significantly faster performance than a first-time visitor.

Performance Results

After implementing these optimizations, we observed:

Faster upload speeds
Reduced bandwidth consumption
Lower server workload
Improved mobile usability
Better overall user satisfaction

The biggest wins came from client-side resizing, image compression, caching, and optimized AI model loading.

Final Thoughts

Image upload performance is often overlooked until users start complaining about slow experiences.

The reality is that upload optimization is not a single technique—it is a combination of smart validation, compression, resizing, caching, and efficient architecture.

Even small improvements can have a significant impact on user experience, especially for applications that process images at scale.

If you're building an image-heavy application, investing time in upload optimization is one of the highest-impact performance improvements you can make.

If you're working with image-heavy applications, you can try these techniques yourself using our free tools for image optimization, format conversion, document scanning, and AI background removal.

https://makemyvisuals.com/background-tools
https://makemyvisuals.com/optimization-tools
https://makemyvisuals.com/format-converter
https://makemyvisuals.com/document-tools

Building MakeMyVisuals: AI Tools for Faster Image Workflows

MakeMyVisuals — Sat, 09 May 2026 15:57:48 +0000

Hello Dev Community,

I recently launched MakeMyVisuals, a browser-based platform focused on simplifying image and document editing using AI.

The platform currently includes tools for:

background removal
image compression
passport photo generation
document optimization
watermark tools
product image enhancement

I’m currently working on improving performance, SEO, and overall user experience while growing the project from scratch.

Looking forward to learning from the community and sharing the journey.

https://makemyvisuals.com/