Coder Legion - Recent posts tagged imageprocessing

I Built a Browser-Based GIF Compressor That Keeps Your Files on Your Device

Fri, 30 Oct 2026 09:51:36 +0000

Animated GIFs are easy to share, but their file sizes can get out of hand quickly. A few seconds of animation may be too large for a chat message, a community post, or a website. The usual fix is to upload the file to an online converter, wait for a server to process it, and download the result. I wanted a simpler workflow that does not require sending the original GIF to a server.

That is why I built GIF Compressor (https://gifcompressor.cc/), a free tool that processes animated GIFs locally in the browser.

What it does

You can drag in a GIF, choose a compression preset, and compare the original and compressed file sizes before downloading. The presets favor image quality, a balance between quality and size, or the smallest file. If you need more control, you can adjust compression strength, image dimensions, palette colors, and optimization level.

The tool also supports batches of up to 20 GIFs, with a 100 MB limit per file. The same settings can be applied across a batch, which is useful when preparing reaction GIFs, documentation assets, or animations for a website.

For specific upload limits, I added pages that attempt to reduce a GIF toward 10 MB or 1 MB. These use progressively stronger settings and show whether the target was actually reached; no compression tool can guarantee a particular size for every source GIF without potentially unacceptable quality loss.

Why browser-side processing?

The compression engine runs through WebAssembly in your browser. The GIF stays on your device while it is processed. Besides the privacy benefit, this removes the upload-and-wait step, especially noticeable for larger files or slower connections.

There is still a trade-off: GIF compression is not magic. Reducing colors or dimensions can make a file much smaller, but it can also change how the animation looks. I recommend starting with the quality-focused preset, previewing the result, and only increasing compression when the file is still too large.

Try it

GIF Compressor is available at https://gifcompressor.cc/. It is free to use, and there is no account needed for the compression workflow. I would appreciate feedback from other developers and creators: which GIF-size limits or batch workflows are most frustrating for you today?

HDR Ghosting in Real Estate Photos: 7 Checks Before You Reshoot

Thu, 10 Sep 2026 16:14:31 +0000

A practical workflow for diagnosing double edges, checking bracket alignment, and deciding when to re-merge, request manual editing, or capture the room again.

The living room looks bright. The window view is visible. The shadows are balanced.

Then you zoom in.

The window frame has a second edge. A curtain looks transparent. The leaves outside appear in two positions at once.

The immediate reaction might be to sharpen the image, run another enhancement tool, or ask AI to “make it clean.”

Before doing that, return to the source photographs.

HDR ghosting in real estate photos is a merging problem that needs diagnosis—not simply a more attractive final render. The right next step might be better alignment, a different deghosting setting, a source-based manual repair, or a reshoot.

This guide explains how to make that decision in seven checks.

Editorial disclosure: This article was prepared for Pixel Perfects Solutions and includes relevant first-party references to EstateAI and Dotera. The examples are hypothetical. The workflow is an editorial recommendation, not a report of hands-on software testing.

Quick answer

To troubleshoot HDR ghosting, first verify that the correct exposures belong to the same bracket set. Inspect the individual photographs, distinguish camera movement from moving subjects, and then test the merge software’s alignment and deghosting controls.

If a usable source exposure contains the affected detail, consider a targeted, source-based repair. If the necessary detail was never captured clearly, consider reshooting rather than generating an unverified replacement.

Fix the photographic foundation before adding another transformation.

In this article, HDR means combining exposure-bracketed photographs. It does not refer to an HDR monitor or an HDR export setting.

First, make sure the problem is actually ghosting

Ghosting is not a catch-all name for every unnatural-looking HDR result.

Research on ghost-free HDR imaging identifies object movement and image misalignment as important sources of merging artifacts.

Use the following table as a starting point—not a diagnosis from appearance alone.

What you notice	First possibility to investigate	Where to look
Repeated edges across fixed features	Bracket mismatch or alignment problems	Source grouping and stationary architectural details
A curtain or tree appears in multiple positions	Movement between exposures	The affected subject in each source frame
Detail is soft in the original photographs too	A capture or focus problem	Individual files before merging
A broad bright or dark fringe surrounds an edge	Tone-mapping or sharpening artifacts	Processing settings rather than only deghosting
A window disappears after a later AI edit	A separate generative alteration	The approved merge compared with the AI output

The distinction between halos and ghosting matters. HDRsoft’s Photomatix FAQ discusses halos as a tone-mapping issue with different corrective settings.

Do not keep increasing deghosting simply because every unwanted edge has been labeled a “ghost.”

1. Confirm that the bracket set contains the right photographs

Start here before changing processing settings.

Check that every source image represents the same composition and belongs to the intended exposure sequence.

Review the thumbnails, capture times, exposure information, and visible framing together. Treat metadata as supporting evidence, not a substitute for looking at the photographs.

Why a complete folder is not enough

Imagine a hypothetical batch processor that groups every three consecutive files.

One exposure is missing from the first sequence.

The next group can now include photographs from two different compositions. The processor may still receive three valid image files, but they are not a valid bracket set.

This is a grouping error, not a problem that should be solved by stronger deghosting.

What to verify

Confirm the intended number of exposures, whether any source file is missing or duplicated, and whether the camera moved to a different viewpoint between groups.

Do not apply one assumed bracket count to an entire shoot without checking that the capture pattern stayed consistent.

Review action: Open the exact input set used for the failed merge. Confirm that it contains one composition and the intended exposure sequence before retrying.

2. Inspect the source photographs before blaming the merge

A finished HDR image can make a capture problem more noticeable, but that does not mean the merger caused it.

Inspect each original at full size, especially around window frames, cabinet edges, curtain patterns, and other fine details.

Ask:

Does at least one source photograph contain a sharp, usable version of the affected area?

That answer helps determine whether the next step should be reprocessing, manual repair, or a new capture.

Check consistency across exposures

Look for changes in focus, framing, and aperture.

HDRsoft notes that aperture changes can alter sharpness and depth of field between exposures, and recommends maintaining aperture when bracketing.

A repair plan should distinguish between a detail that is sharp in one source and a detail that is unclear in every source.

Do not treat a generated, sharper-looking replacement as evidence that the original detail has been recovered.

Improve the next capture

HDRsoft’s interior-photography guidance recommends stabilizing the camera, checking focus, and capturing the bracket sequence consistently.

Use those as capture checks rather than assuming that more post-processing will compensate for every source problem.

Review action: Identify the best available source for the problem area. Record when no source contains enough reliable detail to support the proposed repair.

3. Separate camera movement from subject movement

These problems can produce similar-looking artifacts, but they are not the same.

Camera movement changes the relationship between the frames.

Subject movement changes part of the scene between exposures.

For example, a camera may remain stable while a curtain moves in the airflow or leaves move outside the window.

A tripod does not make those subjects stationary.

Compare fixed details first

Choose several reference points across the image: a fireplace corner, a window-frame intersection, a cabinet edge, and a ceiling junction.

Compare their positions between source photographs.

Then inspect the moving subject separately.

If fixed features shift too, investigate alignment. If fixed features remain consistent but the curtain changes position, investigate local movement.

Both problems can occur in the same bracket set.

Avoid a one-label diagnosis

“Everything looks doubled” is not an actionable editing brief.

“Fixed window edges are offset across the bracket, while the curtain also moves independently” gives the editor two specific issues to address.

Review action: Mark whether the problem affects fixed geometry, moving subjects, or both. Use that distinction to choose the next test.

4. Re-merge with the appropriate alignment and deghosting controls

For a documented example, Adobe’s Lightroom Classic HDR guide provides separate controls for alignment and deghosting.

Select the bracketed photographs and open Photo → Photo Merge → HDR.

Auto Align is intended to help with small movements between source frames. It does not replace checking that the photographs belong together.

For ghosting, Lightroom Classic provides None, Low, Medium, and High settings. Adobe recommends trying Low first, increasing only when necessary, and avoiding deghosting when the preview does not contain ghosting.

Use the available deghost overlay to inspect the affected regions.

Do not make High the default for every property image.

Compare candidates instead of guessing

For your own workflow, keep the original failed merge and the revised candidate visible together.

Record which setting changed and whether it corrected the identified problem without introducing another visible issue.

These controls are specific to Lightroom Classic. Do not assume that every HDR application exposes equivalent settings or uses the same labels.

Review action: Approve the revised image based on the visible result—not the strength of the setting selected.

5. Consider a source-based repair when one area still fails

Sometimes the room merges acceptably while a small moving region remains problematic.

If a source exposure contains a usable version of that area, a targeted repair may be worth evaluating before reshooting the entire composition.

One proposed approach is to align that source with the merged image and reveal only the required region through a layer mask.

Adobe’s layer-mask documentation explains how masks hide or reveal selected parts of a layer.

Keep the repair tied to the actual photograph

For a hypothetical moving curtain, the goal would be to use a coherent curtain position from the source material—not to generate a new window and hope it resembles the property.

Check the repaired boundary, exposure, color, and any overlapping objects.

A sharp source region that does not blend correctly can create a different problem.

Do not replace the photographed exterior with a different view simply because it is easier to composite.

Know when this approach is unsuitable

A source-based repair requires suitable source material and sufficient alignment.

When those conditions are missing, forcing a composite may be less defensible than returning to the property.

Review action: Keep the source file and mask editable. Confirm that the repaired detail comes from the same photographed scene and that the join is visually consistent.

6. Approve the HDR merge before starting generative editing

Treat the merged photograph as a separate approval stage.

A later virtual-staging or redesign request should not be responsible for deciding what a damaged window edge was supposed to look like.

The proposed sequence is:

Source brackets → Photographic merge → Quality review → Approved base image → Optional AI treatment → Final review

This separation is relevant to EstateAI by Pixel Perfects Solutions and its HDR Merge workflow.

Its published product description separates photographic HDR processing from generative AI services. It describes bracket preparation, alignment, exposure fusion, and subsequent property-media workflows, including support for common three-, five-, and seven-exposure sets.

Those are first-party product descriptions—not proof that every difficult bracket will merge successfully.

Do not assume a control exists

The troubleshooting controls described earlier belong to Lightroom Classic.

This article does not claim that EstateAI exposes the same deghosting settings or that its HDR process guarantees artifact-free output.

For a broader explanation of capture and merge preparation, see the EstateAI HDR real estate photography guide.

Review action: Compare the approved base photograph with every subsequent transformation. A later attractive result must not hide an unresolved photographic error.

7. Decide between another merge, professional editing, and a reshoot

Not every failed result needs another generation attempt.

Use the evidence already collected to choose the next action.

What the review establishes	Suggested next step
The wrong photographs were grouped	Correct the input set, then merge again
The sources are usable but fixed edges do not align	Test the available alignment controls
Local motion causes the remaining artifact	Evaluate deghosting or a source-based local repair
A suitable source exists, but the repair needs careful blending	Request manual editing with the complete bracket set
No source reliably captures the necessary detail	Consider a reshoot
An AI edit changed geometry after the merge was approved	Return to the approved base and revise or reject that separate edit

These are proposed decision rules, not guarantees that a particular file is recoverable.

Send a useful professional-editing brief

Pixel Perfects Solutions provides professional property-visual services, including real estate image enhancement.

When asking an editor to assess a difficult merge, provide the complete bracket set rather than only the damaged export.

A practical brief could read:

Issue: Double edges around the right-hand window and a repeated curtain outline.

Source material: Complete original bracket set and the current merged output.

Required result: A natural photographic correction based on the supplied source images.

Preserve: Window geometry, exterior view, fixed fixtures, room proportions, and visible property condition.

Stop condition: Flag any area that cannot be verified or repaired from the available source material.

Professional editing can improve execution. It cannot establish a property detail that was never captured clearly.

Review action: Ask for an assessment of the source files before assuming the image can be repaired without another visit.

For PropTech teams: a completed merge is not an approved image

A merge job can finish successfully while its output still needs review.

For a property-media application, treat processing completion and editorial approval as different states.

A proposed workflow would distinguish:

Processing → Ready for review → Approved, revision requested, or new source required

“New source required” deserves its own outcome. It is not the same as a server error.

Keep the input set attached to the output

For each merged image, retain the source-file list, bracket grouping, processing version, and review decision.

If a source file or merge setting changes, require review of the new output rather than inheriting approval from an older version.

Also flag uncertain grouping instead of silently forcing every upload into a fixed number of images.

These are proposed software controls, not claims that every platform implements them.

Connect the repair to the delivery workflow

Dotera describes order management, communication, file delivery, and revision workflows in its Pixel Perfects portal case study.

That first-party case study illustrates the surrounding production software. It does not establish that the specific HDR checks proposed here are already implemented.

The design lesson is to keep the brief, source files, candidate outputs, and approved delivery connected.

For the separate review of generated listing images, read 15 AI Real Estate Photo Errors Humans Must Catch Before Publishing.

Final takeaway

HDR ghosting is a reason to investigate the source and merge—not immediately redraw the room.

Start with the bracket set. Inspect the originals. Separate camera movement from subject movement. Test the relevant controls. Use source-based repair where the evidence supports it.

When the necessary detail is missing, a reshoot may be the more reliable decision.

A clean merge should reveal the photographed property—not replace uncertain details with a convincing guess.

Which issue takes longer in your workflow: correcting bracket grouping, removing motion artifacts, or obtaining better source photographs?

Sources and further reading

Adobe: HDR photo merge in Lightroom Classic — alignment, deghosting settings, and preview controls.
HDRsoft: Photomatix FAQ — halos, sharpness differences, and capture consistency.
HDRsoft: Photographing interiors with HDR — camera stabilization, focus checks, and bracket capture.
Adobe: Add and edit layer masks — selectively revealing or hiding image-layer regions.
Yan, Gong, and Zhang: Attention-guided Network for Ghost-free High Dynamic Range Imaging — research context for movement and alignment artifacts in HDR merging.

Company-specific descriptions are linked to their first-party sources in the relevant sections.

Sources reviewed on September 10, 2026. Software interfaces and capabilities can change; check the documentation for the version you use.

About the Author

Waqas Ahmad — Content Creator & Software Engineer

Waqas Ahmad creates research-driven content covering real estate photography, property marketing, AI, PropTech, software, and digital visibility. Through his work with Pixel Perfects Solutions and its related products, he explores how technology and creative content can help businesses improve their digital presence and build stronger brands.

His writing combines technology, creativity, and practical industry insights to make complex ideas easier to understand and apply.

Building Brands Through Content & Technology

How I Built a Free Image Tools Website Using React and TypeScript

Wed, 17 Jun 2026 18:51:42 +0000

As developers, we often come across simple tasks that should take a few seconds but somehow end up taking much longer.

A common example is working with images.

Whether it's resizing a screenshot, compressing a large image before uploading it somewhere, converting formats, or adding a watermark, most of us have searched for a quick online tool at some point.

After repeatedly facing these small but frequent problems, I decided to build my own solution: Free Image Tools.

In this article, I'll share the motivation, tech stack, architecture decisions, and lessons I learned while building the project.

The Problem

Most image utility websites offer similar features:

Crop images
Resize images
Compress images
Convert image formats

While many of them work well, I noticed a few recurring issues:

Too many ads and popups
Cluttered user interfaces
Multiple steps for simple operations
Features hidden behind subscriptions
Slow user experience

I wanted to create something simpler and focused on the essentials.

The Goal

The goal was straightforward:

Create a collection of image utilities that are:

Fast
Easy to use
Mobile friendly
Free
Focused on common image editing tasks

The first version includes:

Crop Image
Resize Image
Compress Image
JPG to PNG
PNG to JPG
JPG to WebP
WebP to PNG
Rotate Image
Flip Image
Add Watermark

You can try it here:

https://www.freeimagetools.click

Choosing the Tech Stack

Since I'm primarily a React developer, React was the obvious choice.

The final stack includes:

Frontend

React
TypeScript
Vite
Tailwind CSS
React Router
Zustand

Deployment

GitHub
Vercel

Why Vite?

Vite offers:

Fast development startup
Excellent TypeScript support
Simple deployment process
Small configuration overhead

For utility-focused projects, development speed matters a lot, and Vite helps achieve that.

Project Structure

One of my goals was to make the project scalable.

Instead of putting everything into a few folders, I followed a feature-based architecture.

Example:

src/
├── features/
│   ├── crop/
│   ├── resize/
│   ├── compress/
│   ├── convert/
│   └── watermark/
│
├── components/
├── hooks/
├── services/
└── utils/

This makes it easier to add new tools later without creating a large, difficult-to-maintain codebase.

Challenges During Development

1. Reusability

Many tools perform different operations but follow the same workflow:

Upload image
Preview image
Apply transformation
Download result

Instead of building separate implementations for every tool, I created reusable components for:

File upload
Image preview
Download actions
Tool layouts

This significantly reduced duplication.

2. SEO Considerations

A utility website depends heavily on organic search traffic.

I designed the routing structure around searchable keywords.

Examples:

/crop-image
/resize-image
/compress-image
/jpg-to-png
/png-to-jpg

These URLs are easier for users to understand and align well with common search queries.

3. Mobile Experience

A large percentage of users access utility websites from mobile devices.

This meant:

Large touch targets
Responsive layouts
Minimal distractions
Fast loading pages

Every tool page was tested with mobile users in mind.

What I Learned

Building this project reminded me that not every product needs to be complex.

Sometimes solving a simple problem well creates more value than building something packed with features.

A few lessons stood out:

Start Small

It's tempting to add dozens of features immediately.

Instead, I focused on the most commonly used image operations first.

Consistency Matters

A consistent design system makes the application easier to use and maintain.

SEO Is a Product Feature

For utility websites, discoverability is just as important as functionality.

A great tool that nobody finds is still invisible.

What's Next?

I'm planning to expand the platform with additional tools such as:

Batch Resize
Batch Compression
Instagram Post Resizer
YouTube Thumbnail Resizer
LinkedIn Banner Resizer
Passport Photo Resizer

The goal is to gradually build a complete collection of image utilities while keeping the experience simple and accessible.

Final Thoughts

Building Free Image Tools was a great opportunity to combine frontend development, user experience design, and SEO strategy into a single project.

If you're working on a side project, my biggest recommendation is simple:

Start with a real problem, keep the scope manageable, and focus on delivering value consistently.

You can check out the project here:

https://www.freeimagetools.click

I'd love to hear your feedback, suggestions, or ideas for future tools.

Thanks for reading!

BulkPicTools

Wed, 29 Apr 2026 10:10:35 +0000

Stop uploading your private photos to random servers.
BulkPicTools is a privacy-first image workspace built for online sellers, creators, and developers. It runs entirely in your browser using client-side technology (WebAssembly), so your files never leave your device.
Key Features:

Bulk Processing: Handle hundreds of images at once.
Much More Tools: Bulk Resizer, Compressor, Cropper, HEIC Converter, and more.
Privacy: No server uploads. 100% local processing.
Free: No sign-up, no watermarks, no limits.
It's the speed of a desktop app with the convenience of a website.

How to Build a Browser-Based Image Converter Using the Canvas API (No Server, No Uploads)

Thu, 23 Apr 2026 05:55:48 +0000

How to Build a Browser-Based Image Converter Using the Canvas API (No Server, No Uploads)

Most image conversion tools work the same way. You pick a file, it travels to a server, the server processes it, and then you download the result. That workflow has one problem: your file left your device. You have no idea where it went, how long it stays on that server, or who else has access to it.

There is a better approach. The browser already has everything it needs to convert images, right on the device, without touching a server at all. The Canvas API makes this possible, and the implementation is simpler than most developers expect.

This guide walks you through building a working browser-based image converter from scratch. By the end, you will have code that converts AVIF, WebP, JFIF, and PNG files to JPG (or any other format) entirely in the user's browser.

Why the Canvas API Works for This

The HTML5 Canvas API was designed for drawing and manipulating graphics in the browser. What most developers do not immediately realize is that it also serves as a powerful image processing pipeline.

Here is the core mechanism:

The user selects a file.
The FileReader API reads that file into memory as a data URL.
You load that data URL into an Image element.
You draw that image onto a <canvas> element.
You call canvas.toDataURL() or canvas.toBlob() to export the result in any format you want.

The entire process happens inside the browser tab. Nothing is sent anywhere. The user's file never leaves their device.

This approach works with every modern format the browser understands: JPG, PNG, WebP, AVIF, JFIF, GIF, and BMP. Output formats are limited to what toDataURL() supports, which includes JPG, PNG, and WebP on all modern browsers.

The Basic Conversion Flow

Start with a file input and a canvas element.

<input type="file" id="fileInput" accept="image/*" multiple />
<canvas id="canvas" style="display:none;"></canvas>
<a id="downloadLink">Download Converted Image</a>

Now write the JavaScript that handles conversion.

const fileInput = document.getElementById('fileInput');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const downloadLink = document.getElementById('downloadLink');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.onload = function(event) {
    const img = new Image();

    img.onload = function() {
      // Set canvas dimensions to match the image
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      // Draw the image onto the canvas
      ctx.drawImage(img, 0, 0);

      // Export as JPG at 92% quality
      const outputDataURL = canvas.toDataURL('image/jpeg', 0.92);

      // Set up the download link
      downloadLink.href = outputDataURL;
      downloadLink.download = file.name.replace(/\.[^/.]+$/, '') + '.jpg';
      downloadLink.textContent = 'Download ' + downloadLink.download;
    };

    img.src = event.target.result;
  };

  reader.readAsDataURL(file);
});

That is the complete core logic. Drop in a file, get a converted JPG. No libraries, no dependencies, no server.

Handling Transparent Images Correctly

JPG does not support transparency. If a user converts a PNG or AVIF file with a transparent background, the Canvas API fills those transparent pixels with black by default. That is almost never what the user wants.

Fix it by filling the canvas with white before drawing the image.

img.onload = function() {
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;

  // Fill background white before drawing (fixes transparency for JPG output)
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Now draw the image on top
  ctx.drawImage(img, 0, 0);

  const outputDataURL = canvas.toDataURL('image/jpeg', 0.92);
  // ... rest of the download logic
};

If you are outputting PNG instead of JPG, you do not need the fill. PNG preserves transparency natively. Give the user a choice: let them pick the background fill color when they choose JPG, and skip the fill entirely when they choose PNG.

Supporting Multiple Output Formats

Making the converter flexible is straightforward. Map output format names to their MIME types and file extensions.

const FORMAT_MAP = {
  jpg:  { mime: 'image/jpeg', ext: 'jpg' },
  png:  { mime: 'image/png',  ext: 'png' },
  webp: { mime: 'image/webp', ext: 'webp' }
};

function convertImage(file, outputFormat, quality) {
  return new Promise((resolve, reject) => {
    const format = FORMAT_MAP[outputFormat];
    if (!format) {
      reject(new Error('Unsupported output format: ' + outputFormat));
      return;
    }

    const reader = new FileReader();

    reader.onload = function(event) {
      const img = new Image();

      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;

        if (outputFormat === 'jpg') {
          ctx.fillStyle = '#ffffff';
          ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        ctx.drawImage(img, 0, 0);

        canvas.toBlob(function(blob) {
          if (!blob) {
            reject(new Error('Conversion failed'));
            return;
          }
          resolve({
            blob: blob,
            filename: file.name.replace(/\.[^/.]+$/, '') + '.' + format.ext,
            originalSize: file.size,
            convertedSize: blob.size
          });
        }, format.mime, quality);
      };

      img.onerror = () => reject(new Error('Failed to load image'));
      img.src = event.target.result;
    };

    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

Notice the use of canvas.toBlob() instead of canvas.toDataURL(). For large images, toBlob() is more memory-efficient because it does not encode the entire file as a base64 string. Use toBlob() when you are writing production code.

Adding Resize on Convert

Resizing during conversion costs you almost nothing extra. You already control the canvas dimensions. Instead of setting them to the original image size, set them to your target size.

function getResizeDimensions(originalWidth, originalHeight, maxWidth, maxHeight) {
  if (!maxWidth && !maxHeight) {
    return { width: originalWidth, height: originalHeight };
  }

  let width = originalWidth;
  let height = originalHeight;

  if (maxWidth && width > maxWidth) {
    height = Math.round(height * (maxWidth / width));
    width = maxWidth;
  }

  if (maxHeight && height > maxHeight) {
    width = Math.round(width * (maxHeight / height));
    height = maxHeight;
  }

  return { width, height };
}

// Inside img.onload:
const { width, height } = getResizeDimensions(
  img.naturalWidth,
  img.naturalHeight,
  maxWidthInput,   // from user input, or null
  maxHeightInput   // from user input, or null
);

canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);

This scales the image proportionally. It does not stretch or crop. The output dimensions always maintain the original aspect ratio.

Batch Conversion with Progress Feedback

Converting one file at a time works for simple use cases. For a production tool, you want to handle multiple files and show the user what is happening.

async function convertBatch(files, outputFormat, quality, maxWidth, maxHeight) {
  const results = [];

  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    // Update progress UI here
    updateProgress(i + 1, files.length, file.name);

    try {
      const result = await convertImage(file, outputFormat, quality, maxWidth, maxHeight);
      results.push({ success: true, ...result });
    } catch (err) {
      results.push({ success: false, filename: file.name, error: err.message });
    }
  }

  return results;
}

Processing files sequentially (one at a time with await) is more stable than parallel processing. It prevents memory spikes when users upload many large files at once. For most use cases, the difference in speed is not noticeable.

Triggering the Download

Once you have the converted blob, you need to trigger a download in the browser. The standard approach works across all browsers.

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

  // Release the object URL to free memory
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

Always call URL.revokeObjectURL() after the download triggers. Without it, the browser holds the blob in memory for the entire session. For batch conversions with large files, that adds up fast.

A Note on AVIF Browser Support

AVIF is the newest major image format and browser support for reading it varies. As of 2026, Chrome 85+, Firefox 93+, and Safari 16+ all support AVIF decoding. Older browsers do not.

Your converter does not need to special-case this. The img.onerror handler already catches format failures. When AVIF is not supported, the image fails to load and your error handler fires. Show the user a clear message: "Your browser does not support this file format. Try Chrome or Firefox."

You do not need a polyfill for most production use cases. Just communicate the browser requirement clearly in your UI.

What This Approach Cannot Do

The Canvas API is powerful, but it has limits you should know.

CDR and EPS files: These are vector formats. The browser has no native way to decode them. Converting CDR or EPS files requires a server-side library like ImageMagick or Ghostscript. There is no browser-only workaround.

SVG to raster: SVG files load fine in an Image element, but the output quality depends on the SVG's viewBox dimensions, not its display size. You may need to set img.width and img.height explicitly before drawing.

Lossless WebP: canvas.toDataURL('image/webp') does not guarantee lossless compression. The quality parameter controls lossy compression. For guaranteed lossless WebP, you need a library like libvips compiled to WebAssembly.

Large files: Canvas has memory limits. Files above 20 MB on mobile devices, or above 50 MB on desktop, may cause crashes in some browsers. Add a file size check upfront and warn users before they try to process something too large.

Putting It Together

Here is a minimal but complete implementation combining everything above.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Browser Image Converter</title>
</head>
<body>
  <h1>Convert Images in Your Browser</h1>

  <input type="file" id="fileInput" accept="image/*" multiple>

  <select id="formatSelect">
    <option value="jpg">JPG</option>
    <option value="png">PNG</option>
    <option value="webp">WebP</option>
  </select>

  <input type="range" id="qualitySlider" min="10" max="100" value="92">
  <label>Quality: <span id="qualityLabel">92%</span></label>

  <input type="number" id="maxWidth" placeholder="Max width (px)">
  <input type="number" id="maxHeight" placeholder="Max height (px)">

  <button id="convertBtn">Convert All</button>

  <div id="results"></div>

  <script>
    const FORMAT_MAP = {
      jpg:  { mime: 'image/jpeg', ext: 'jpg' },
      png:  { mime: 'image/png',  ext: 'png' },
      webp: { mime: 'image/webp', ext: 'webp' }
    };

    document.getElementById('qualitySlider').addEventListener('input', function() {
      document.getElementById('qualityLabel').textContent = this.value + '%';
    });

    document.getElementById('convertBtn').addEventListener('click', async function() {
      const files = document.getElementById('fileInput').files;
      const format = document.getElementById('formatSelect').value;
      const quality = parseInt(document.getElementById('qualitySlider').value) / 100;
      const maxWidth = parseInt(document.getElementById('maxWidth').value) || null;
      const maxHeight = parseInt(document.getElementById('maxHeight').value) || null;

      if (!files.length) {
        alert('Please select at least one image file.');
        return;
      }

      const resultsDiv = document.getElementById('results');
      resultsDiv.innerHTML = '';

      for (const file of files) {
        try {
          const result = await convertImage(file, format, quality, maxWidth, maxHeight);
          downloadBlob(result.blob, result.filename);

          const info = document.createElement('p');
          const saved = Math.round((1 - result.convertedSize / result.originalSize) * 100);
          info.textContent = result.filename + ' — saved ' + saved + '%';
          resultsDiv.appendChild(info);
        } catch (err) {
          const errorEl = document.createElement('p');
          errorEl.style.color = 'red';
          errorEl.textContent = file.name + ' failed: ' + err.message;
          resultsDiv.appendChild(errorEl);
        }
      }
    });

    function convertImage(file, outputFormat, quality, maxWidth, maxHeight) {
      return new Promise((resolve, reject) => {
        const format = FORMAT_MAP[outputFormat];
        const reader = new FileReader();

        reader.onload = function(event) {
          const img = new Image();

          img.onload = function() {
            const dims = getResizeDimensions(img.naturalWidth, img.naturalHeight, maxWidth, maxHeight);
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            canvas.width = dims.width;
            canvas.height = dims.height;

            if (outputFormat === 'jpg') {
              ctx.fillStyle = '#ffffff';
              ctx.fillRect(0, 0, canvas.width, canvas.height);
            }

            ctx.drawImage(img, 0, 0, dims.width, dims.height);

            canvas.toBlob(function(blob) {
              if (!blob) { reject(new Error('Conversion failed')); return; }
              resolve({
                blob,
                filename: file.name.replace(/\.[^/.]+$/, '') + '.' + format.ext,
                originalSize: file.size,
                convertedSize: blob.size
              });
            }, format.mime, quality);
          };

          img.onerror = () => reject(new Error('Cannot read this file format in your browser.'));
          img.src = event.target.result;
        };

        reader.onerror = () => reject(new Error('Failed to read file.'));
        reader.readAsDataURL(file);
      });
    }

    function getResizeDimensions(w, h, maxW, maxH) {
      if (!maxW && !maxH) return { width: w, height: h };
      if (maxW && w > maxW) { h = Math.round(h * (maxW / w)); w = maxW; }
      if (maxH && h > maxH) { w = Math.round(w * (maxH / h)); h = maxH; }
      return { width: w, height: h };
    }

    function downloadBlob(blob, filename) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      setTimeout(() => URL.revokeObjectURL(url), 1000);
    }
  </script>
</body>
</html>

This is production-ready for most use cases. Fewer than 100 lines of JavaScript, no external dependencies, works on every modern browser including mobile.

Why This Architecture Matters Beyond the Code

Building image conversion in the browser is not just a technical curiosity. It changes the privacy story of your tool entirely.

When your server never receives user files, you do not have to store them, secure them, rotate them, or worry about data breach liability. You do not need to write a data retention policy for them. You do not need to scale storage as your traffic grows. The user's file stays on their device from start to finish.

That is a meaningful promise to make to users, and the Canvas API makes it simple to keep.

If you want to see a live implementation of everything covered here, stackflowtools.com runs a free browser-based image converter suite built on exactly this approach. The AVIF to JPG converter, WebP to JPG tool, JFIF converter, and image compressor all process files entirely on-device with no uploads.

Sohaib Khan builds free browser-based tools at stackflowtools.com.

Bulk Background Remover

Tue, 21 Oct 2025 03:15:41 +0000

Introduction

I built Bulk Background Remover to solve a workflow problem that costs businesses hours every week: processing product photos, event images, or marketing assets one image at a time. Whether you're an e-commerce seller preparing 50 product listings or a photographer editing a portrait session, single-image tools force you into a repetitive, time-consuming loop.

Bulk Background Remover changes that. Upload up to 20 images at once, process them in parallel with AI, and download clean transparent backgrounds in under a minute. No signup required for the free tier. No watermarks. No friction.

The Problem

Background removal is essential for professional visuals. E-commerce platforms like Amazon and Shopify require clean white backgrounds for product listings. Photographers need transparent backgrounds for portfolio work. Marketing teams create consistent campaign assets across dozens of images.

Existing solutions create bottlenecks. Manual editing in Photoshop takes 10-20 minutes per image. Single-image online tools require you to upload, process, and download each photo individually. Premium bulk tools charge subscription fees or lock features behind expensive plans. Free options add watermarks or restrict usage.

For someone processing 50 product photos for an online store, the math is brutal. At 15 minutes per photo with manual tools, that's 12.5 hours of work. Even with fast single-image AI tools at 1 minute each, you're still looking at nearly an hour of repetitive uploading and downloading.

The Solution

Bulk Background Remover processes up to 20 images simultaneously with the same AI precision as premium single-image tools. Upload a batch, let the AI work in parallel, and download all results at once.

The free tier allows 12 images per batch with no account required. Create a free account and the limit increases to 20 images per batch. There are currently no daily or monthly restrictions, so you can process as many batches as needed.

The tool handles everything from simple product shots to complex portraits with hair details. The AI detects edges precisely and separates subjects cleanly across the entire batch.

Key Features

Batch Processing
Upload 12 images without an account, or 20 images with a free login. Process entire product lines or photo shoots in one operation.

Lightning Fast Processing
Each image processes in 3-5 seconds. The entire batch runs in parallel, so 12 images complete in under a minute instead of 12 separate minutes.

No Registration Required
Start processing immediately. No account creation, no email verification, no barriers. The 12-image free tier works instantly.

Bulk Download Options
Download processed images individually or grab everything as a single ZIP file. Automatic timestamp naming keeps files organized.

Professional Quality Output
Transparent PNG files with no watermarks or branding. High-resolution results suitable for print and digital use.

Universal Format Support
Accepts JPG, PNG, WebP, HEIC, and other common formats. Whatever format you work with, it's supported.

How It Works

The workflow is designed for speed:

Upload Multiple Images – Drag and drop up to 12 images (20 with login) into the upload zone, or click to browse and select files from your device.
Automatic AI Processing – The AI detects subjects in each image and removes backgrounds with precision edge detection. Processing happens in parallel across all images.
Preview Results – Review all processed images in a grid view. Check quality before downloading.
Download Your Images – Click individual images to download them separately, or use the "Download All as ZIP" button to get everything in one file.

Total processing time for 12 product photos: approximately 30-60 seconds. Compare that to 2-4 hours with manual editing or 12+ minutes processing images one by one.

Who It's For

E-commerce Sellers
Small and medium online retailers processing product photos for Amazon, Shopify, eBay, or Etsy. Clean backgrounds improve conversion rates and meet marketplace standards. Process entire product catalogs quickly without hiring designers.

Professional Photographers
Portrait photographers, event photographers, and product photography specialists who need fast post-production workflows. Edit complete sessions in minutes instead of hours. Deliver client work faster.

Marketing Agencies
Teams creating campaign assets for multiple clients. Remove backgrounds from dozens of images for social media, ads, and promotional materials. Maintain consistent visual quality across projects without expensive software licenses for every team member.

Content Creators
Bloggers, YouTubers, and social media creators preparing visual content. Create eye-catching thumbnails and posts quickly. No budget required for professional editing tools.

Why Choose This Over Competitors

Most bulk background removal tools fall into two extremes. Free tools limit you to 1-5 images and add watermarks. Premium tools like Remove.bg charge monthly subscriptions starting at $9-89 per month, and Photoroom focuses on API access with complex pricing.

Bulk Background Remover offers a middle path. The free tier is genuinely useful at 12 images per batch with no watermarks. A free account extends that to 20 images per batch. No confusing credit systems. No hidden fees. No daily limits that force you into paid plans.

Feature	Bulk Background Remover	Remove.bg	Photoroom	Fotor
Free Batch Size	12 (no login), 20 (with login)	1 free, 50+ requires paid plan	API-focused	50 images/batch
Signup Required	No (12 images), Optional (20 images)	Yes	Yes	Yes
Processing Speed	3-5 seconds/image	3-5 seconds/image	Fast	Standard
Watermarks	None	None (paid), Yes (free)	Varies	Varies
Monthly Limits	None (currently)	Credit-based	Yes	Yes

The tool matches premium competitors on speed and quality while maintaining transparency and accessibility.

Real World Impact

Time savings translate directly to cost savings and faster business operations.

An e-commerce seller photographing 50 new products can process all backgrounds in approximately 3-4 batches (about 4 minutes total). Manual editing would take over 12 hours. Even using fast single-image tools one by one would consume nearly an hour.

A portrait photographer editing a 100-photo event session can remove backgrounds across 5 batches in under 10 minutes. Outsourcing that work to freelancers might cost $50-200 and take days for turnaround.

Marketing agencies juggling multiple client campaigns can prepare hundreds of social media assets weekly without dedicated design staff or expensive software licenses for the entire team.

Tech Stack

The application runs on Next.js 15 deployed via Cloudflare Pages for global performance and reliability. Background removal uses advanced AI models optimized for accuracy and speed.

The parallel processing architecture handles multiple images simultaneously. Images process at the same time instead of waiting in a queue. This infrastructure choice enables the 30-60 second batch processing time.

Images are processed server-side with automatic cleanup. Uploaded files are not stored permanently, addressing privacy concerns for commercial photography and proprietary product images.

Try It Out

Bulk Background Remover is live at freebackgroundremover.net/bulk.

No signup required to start. Upload 12 images and see the results immediately. If you need the 20-image limit, creating a free account takes seconds.

Grab a dozen product photos or portfolio images and test it right now. Watch what used to take hours complete in under a minute.

Free Background Remover

Sun, 12 Oct 2025 02:45:59 +0000

Introduction

I built Free Background Remover to solve a problem I kept running into: existing background removal tools either charge subscription fees, add watermarks, require accounts, or take forever to process images. I wanted something that just works, instantly, for everyone.

The result is a web-based tool that removes backgrounds from any image in under 10 seconds. No signup. No credit card. No watermarks. Just upload, process, and download.

The Problem

Background removal is essential for e-commerce product photos, social media content, graphic design projects, and personal creative work. Professional tools like Photoshop require expertise and expensive subscriptions. Online alternatives often limit free usage, add watermarks, or require account registration.

For someone who needs to quickly remove a background from a product photo or portrait, the friction is real. Wait for software to load, create an account, deal with paywalls, or accept watermarked results.

The Solution

Free Background Remover strips away all that friction. Built with advanced AI segmentation algorithms, it delivers professional results without the professional price tag or complexity.

The tool handles everything from simple solid backgrounds to complex natural environments. Portrait selfies, product shots, architectural photos, and even camouflaged objects in varied environments. The AI detects edges precisely and separates subjects cleanly.

Key Features

Instant Processing
Average processing time is under 10 seconds per image. Upload, wait a moment, download your transparent background image.

No Registration Required
No account creation, no login, no email verification. Open the site and start removing backgrounds immediately.

Universal Format Support
Supports jpg, jpeg, png, webp, gif, and avif formats. Whatever image format you work with, it's covered.

Zero Watermarks
Download your processed images without any watermarks or branding. The results are entirely yours.

Mobile Optimized
Built with mobile users in mind. The interface is responsive and optimized for touch interactions on phones and tablets.

High Precision AI
The underlying AI model handles complex scenarios including intricate edges, fine details like hair, and subjects that blend into their backgrounds.

How It Works

The workflow is straightforward:

Upload an image by clicking the upload button or dragging and dropping a file
Wait while the AI automatically processes and removes the background
Review the result and download your transparent background image

The entire process takes seconds. There's no manual editing, no complicated tools to learn, and no technical knowledge required.

Who It's For

E-commerce Sellers
Small and medium business owners who need clean product images for online stores. Fast turnaround for multiple products without hiring a designer.

Social Media Managers
Marketing professionals creating visual content for Instagram, TikTok, Facebook, and other platforms. Quick edits for engaging posts.

Graphic Designers
Professional designers who need fast cutout tools for client projects. High-resolution output suitable for print and digital work.

Individual Users
Anyone working on personal projects, social media profiles, or creative experiments. Free tools that deliver professional results.

Tech Stack

The application is built with Next.js 15 and deployed on Cloudflare Pages for global performance. The AI background removal uses advanced machine learning models optimized for speed and accuracy. Image processing happens server-side with automatic cleanup, so uploaded images aren't stored permanently.

The UI is internationalized with support for multiple languages, and the entire experience is optimized for both desktop and mobile devices.

Try It Out

Free Background Remover is live, try it

No sign-up required. Just visit, upload an image, and see the results for yourself.