Create/Transform API

Generate transformed versions of images on-the-fly using URL-based transformations.

Endpoint

http

GET /create/<dirname>/<object_id>/<transformations>.<format>

How It Works

Access an image with transformation parameters in the URL
If the transformed version exists, it's served from cache
If not, it's generated on-the-fly, cached, and returned
Subsequent requests serve the cached version instantly

URL Structure

https://api.reimage.dev/create/{dirname}/{object_id}/{transformations}.{format}

Examples

/create/abc123/xyz789/w-800.webp
/create/abc123/xyz789/h-400_w-600.png
/create/abc123/xyz789/h-200_w-200_bg-remove.webp

Authentication

Not required for image retrieval - images are publicly accessible via their URLs.

Best Practice

For production use, access transformed images through the CDN URLs instead:

https://files.reimage.dev/{dirname}/{object_id}/{transformations}.{format}

Transformation Parameters

Resize Transformations

Parameter	Description	Example
`w-{width}`	Resize to specific width (maintains aspect ratio)	`w-800`
`h-{height}`	Resize to specific height (maintains aspect ratio)	`h-600`
`h-{height}_w-{width}`	Resize to exact dimensions (may crop)	`h-400_w-600`

Format Conversion

Specify the format as the file extension:

.webp - WebP (recommended for web)
.avif - AVIF (modern, smaller file size)
.png - PNG (lossless)
.jpg or .jpeg - JPEG

Background Removal

Parameter	Description
`bg-remove`	Remove background from image

Sprite Sheets

Parameter	Description
`sprite-sheet`	Convert animated GIF to sprite sheet

Code Examples

Generate Responsive Images

javascript

function getResponsiveUrls(objectUrl) {
  return {
    thumbnail: `${objectUrl}w-200.webp`,
    small: `${objectUrl}w-400.webp`,
    medium: `${objectUrl}w-800.webp`,
    large: `${objectUrl}w-1200.webp`,
    xlarge: `${objectUrl}w-1920.webp`
  };
}

// Usage after upload
const { object_url } = await uploadImage(file);
const urls = getResponsiveUrls(object_url);

console.log(urls.thumbnail); // ...w-200.webp
console.log(urls.large); // ...w-1200.webp

python

def get_responsive_urls(object_url):
    """Generate responsive image URLs"""
    return {
        'thumbnail': f'{object_url}w-200.webp',
        'small': f'{object_url}w-400.webp',
        'medium': f'{object_url}w-800.webp',
        'large': f'{object_url}w-1200.webp',
        'xlarge': f'{object_url}w-1920.webp'
    }

# Usage
urls = get_responsive_urls(object_url)
print(urls['thumbnail'])

php

<?php
function getResponsiveUrls($objectUrl) {
    return [
        'thumbnail' => $objectUrl . 'w-200.webp',
        'small' => $objectUrl . 'w-400.webp',
        'medium' => $objectUrl . 'w-800.webp',
        'large' => $objectUrl . 'w-1200.webp',
        'xlarge' => $objectUrl . 'w-1920.webp'
    ];
}

$urls = getResponsiveUrls($objectUrl);
echo $urls['thumbnail'];
?>

func getResponsiveURLs(objectURL string) map[string]string {
    return map[string]string{
        "thumbnail": objectURL + "w-200.webp",
        "small":     objectURL + "w-400.webp",
        "medium":    objectURL + "w-800.webp",
        "large":     objectURL + "w-1200.webp",
        "xlarge":    objectURL + "w-1920.webp",
    }
}

rust

use std::collections::HashMap;

fn get_responsive_urls(object_url: &str) -> HashMap<&'static str, String> {
    let mut urls = HashMap::new();
    urls.insert("thumbnail", format!("{}w-200.webp", object_url));
    urls.insert("small", format!("{}w-400.webp", object_url));
    urls.insert("medium", format!("{}w-800.webp", object_url));
    urls.insert("large", format!("{}w-1200.webp", object_url));
    urls.insert("xlarge", format!("{}w-1920.webp", object_url));
    urls
}

React Responsive Image Component

jsx

function ResponsiveImage({ objectUrl, alt }) {
  const srcSet = `
    ${objectUrl}w-400.webp 400w,
    ${objectUrl}w-800.webp 800w,
    ${objectUrl}w-1200.webp 1200w,
    ${objectUrl}w-1920.webp 1920w
  `;

  return (
    <img
      src={`${objectUrl}w-800.webp`}
      srcSet={srcSet}
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      alt={alt}
      loading="lazy"
    />
  );
}

Background Removal

javascript

// Original image
const original = `${objectUrl}original.jpg`;

// With background removed
const noBg = `${objectUrl}bg-remove.png`;

// Resized with background removed
const noBgResized = `${objectUrl}w-800_bg-remove.png`;

Format Conversion

javascript

// Convert to different formats
const webp = `${objectUrl}original.webp`;  // WebP
const avif = `${objectUrl}original.avif`;  // AVIF
const png = `${objectUrl}original.png`;    // PNG
const jpg = `${objectUrl}original.jpg`;    // JPEG

Transformation Examples

Product Thumbnails

# Square thumbnails
https://files.reimage.dev/abc123/xyz789/h-200_w-200.webp

Hero Images

# Large, optimized for web
https://files.reimage.dev/abc123/xyz789/w-1920.webp

Profile Pictures

# Small, circular crop
https://files.reimage.dev/abc123/xyz789/h-150_w-150.webp

Transparent Product Images

# Background removed, resized
https://files.reimage.dev/abc123/xyz789/w-800_bg-remove.png

Storage Backends

Images can be served from different backends:

Google Cloud Storage (Default)

https://files.reimage.dev/{dirname}/{object_id}/{transformations}.{format}

Cloudflare R2

Add ?backend=r2 query parameter when uploading to use R2 storage:

https://storage.reimage.dev/{dirname}/{object_id}/{transformations}.{format}

Video Handling

Videos (object IDs starting with vid-) are redirected to HLS streaming:

/create/{dirname}/vid-xyz789/anything
→ Redirects to: https://stream.mux.com/{playback_id}.m3u8

Cloudinary Migration

If migrating from Cloudinary, use the fromCloudinary parameter:

/create/{dirname}/{object_id}/original?fromCloudinary=https://cloudinary.com/...

This will fetch from Cloudinary and cache in Reimage storage.

Caching

Transformed images are cached indefinitely
First request generates the transformation
Subsequent requests serve from cache instantly
CDN caching for even faster delivery

Best Practices

Use WebP format for best compression and quality
Generate multiple sizes for responsive images
Use CDN URLs in production (files.reimage.dev)
Lazy load images to improve page performance
Use appropriate sizes - don't request larger than needed

Next Steps

Image Transformations Guide - Detailed transformation examples
Background Removal Guide - Remove backgrounds
Format Conversion Guide - Convert between formats

Create/Transform API ​

Endpoint ​

How It Works ​

URL Structure ​

Examples ​

Authentication ​

Transformation Parameters ​

Resize Transformations ​

Format Conversion ​

Background Removal ​

Sprite Sheets ​

Code Examples ​

Generate Responsive Images ​

React Responsive Image Component ​

Background Removal ​

Format Conversion ​

Transformation Examples ​

Product Thumbnails ​

Hero Images ​

Profile Pictures ​

Transparent Product Images ​

Storage Backends ​

Google Cloud Storage (Default) ​

Cloudflare R2 ​

Video Handling ​

Cloudinary Migration ​

Caching ​

Best Practices ​

Next Steps ​

Create/Transform API

Endpoint

How It Works

URL Structure

Examples

Authentication

Transformation Parameters

Resize Transformations

Format Conversion

Background Removal

Sprite Sheets

Code Examples

Generate Responsive Images

React Responsive Image Component

Background Removal

Format Conversion

Transformation Examples

Product Thumbnails

Hero Images

Profile Pictures

Transparent Product Images

Storage Backends

Google Cloud Storage (Default)

Cloudflare R2

Video Handling

Cloudinary Migration

Caching

Best Practices

Next Steps