Background Removal

Automatically remove backgrounds from images using AI-powered processing.

How It Works

Add bg-remove to the transformation parameters:

https://files.reimage.dev/{dirname}/{object_id}/bg-remove.png

The background is automatically removed, leaving a transparent background.

Basic Usage

const { object_url } = await uploadImage(file);

// Original image with background
const original = `${object_url}original.jpg`;

// Background removed
const noBg = `${object_url}bg-remove.png`;

Important: Use PNG or WebP

To preserve transparency, use PNG or WebP format:

✅ https://files.reimage.dev/abc123/xyz789/bg-remove.png
✅ https://files.reimage.dev/abc123/xyz789/bg-remove.webp
❌ https://files.reimage.dev/abc123/xyz789/bg-remove.jpg (no transparency)

Combining with Resizing

Remove background and resize in one transformation:

# Remove bg and resize to 800px width
https://files.reimage.dev/abc123/xyz789/w-800_bg-remove.png

# Remove bg and resize to exact dimensions
https://files.reimage.dev/abc123/xyz789/h-600_w-800_bg-remove.png

Code Examples

JavaScript

function getBackgroundRemovedUrls(objectUrl) {
  return {
    original: `${objectUrl}bg-remove.png`,
    thumbnail: `${objectUrl}h-200_w-200_bg-remove.png`,
    medium: `${objectUrl}w-800_bg-remove.png`,
    large: `${objectUrl}w-1200_bg-remove.png`
  };
}

// Usage
const urls = getBackgroundRemovedUrls(objectUrl);

Python

def get_background_removed_urls(object_url):
    """Generate URLs with background removed"""
    return {
        'original': f'{object_url}bg-remove.png',
        'thumbnail': f'{object_url}h-200_w-200_bg-remove.png',
        'medium': f'{object_url}w-800_bg-remove.png',
        'large': f'{object_url}w-1200_bg-remove.png'
    }

PHP

<?php
function getBackgroundRemovedUrls($objectUrl) {
    return [
        'original' => $objectUrl . 'bg-remove.png',
        'thumbnail' => $objectUrl . 'h-200_w-200_bg-remove.png',
        'medium' => $objectUrl . 'w-800_bg-remove.png',
        'large' => $objectUrl . 'w-1200_bg-remove.png'
    ];
}
?>

Animated GIF Support

Background removal works with animated GIFs:

# Remove background from all frames
https://files.reimage.dev/abc123/xyz789/bg-remove.gif

Each frame has its background removed while preserving the animation.

React Component

function ProductImage({ objectUrl, alt }) {
  const [showBackground, setShowBackground] = useState(true);

  const imageUrl = showBackground
    ? `${objectUrl}w-800.jpg`
    : `${objectUrl}w-800_bg-remove.png`;

  return (
    <div>
      <img src={imageUrl} alt={alt} />
      <button onClick={() => setShowBackground(!showBackground)}>
        {showBackground ? 'Remove Background' : 'Show Background'}
      </button>
    </div>
  );
}

Use Cases

Product Photos

Display products without distracting backgrounds:

// Product on white background
const productImage = `${objectUrl}w-600_bg-remove.png`;

<div style="background-color: white;">
  <img src="..." alt="Product" />
</div>

Profile Pictures

Create clean profile images:

const avatar = `${objectUrl}h-200_w-200_bg-remove.png`;

Design Assets

Generate transparent assets for graphic design:

const asset = `${objectUrl}w-1000_bg-remove.png`;

Before/After Comparison

function BeforeAfter({ objectUrl }) {
  const [removed, setRemoved] = useState(false);

  return (
    <div className="comparison">
      <img
        src={removed
          ? `${objectUrl}w-800_bg-remove.png`
          : `${objectUrl}w-800.jpg`
        }
        alt="Product"
      />
      <label>
        <input
          type="checkbox"
          checked={removed}
          onChange={(e) => setRemoved(e.target.checked)}
        />
        Remove Background
      </label>
    </div>
  );
}

Composite Images

Layer background-removed images over custom backgrounds:

<div style="background: linear-gradient(to bottom, #667eea, #764ba2);">
  <img
    src="https://files.reimage.dev/abc123/xyz789/w-800_bg-remove.png"
    alt="Product"
    style="display: block; margin: 0 auto;"
  />
</div>

CSS Techniques

Drop Shadow on Transparent Background

.product-image {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

<img
  src={`${objectUrl}w-600_bg-remove.png`}
  className="product-image"
  alt="Product"
/>

Custom Background Colors

<div style="background-color: #f0f0f0; padding: 40px;">
  <img src="...bg-remove.png" alt="Product" />
</div>

Performance Considerations

• Background removal is computationally intensive
• First request may take a few seconds
• Subsequent requests are cached and instant
• Consider pre-generating for frequently accessed images

Pre-generating Backgrounds Removed

async function preGenerateBackgroundRemoved(objectUrl) {
  const sizes = [200, 400, 800, 1200];

  // Trigger generation of all sizes
  const requests = sizes.map(size =>
    fetch(`${objectUrl}w-${size}_bg-remove.png`, { method: 'HEAD' })
  );

  await Promise.all(requests);
  console.log('Background-removed versions generated');
}

Quality Tips

1. Use high-quality originals - Better results with clear subjects
2. Good lighting - Well-lit images work best
3. Clear subject - Distinct subject from background
4. Avoid complex backgrounds - Simpler backgrounds = better results

Troubleshooting

Background Not Fully Removed

Some complex backgrounds may not be fully removed. The AI does its best but isn't perfect.

Edges Look Rough

Try using a higher resolution original image:

// Upload higher resolution
// Then generate smaller sizes with bg removed
const clean = `${objectUrl}w-800_bg-remove.png`;

File Size Too Large

Use WebP instead of PNG for smaller files:

// WebP with transparency (smaller than PNG)
const webp = `${objectUrl}w-800_bg-remove.webp`;

Next Steps

• Image Transformations - Resize images
• Format Conversion - Convert formats
• Create API - API reference