Image Transformations

Reimage allows you to transform images on-the-fly using URL-based parameters. No need to pre-generate multiple sizes - just change the URL!

How It Works

After uploading an image, you receive a base URL:

https://files.reimage.dev/abc123/xyz789/

Append transformation parameters to access different versions:

https://files.reimage.dev/abc123/xyz789/w-800.webp
https://files.reimage.dev/abc123/xyz789/h-400_w-600.png

Width-Based Resizing

Resize by width while maintaining aspect ratio:

w-{width}

Examples:

https://files.reimage.dev/abc123/xyz789/w-400.webp  # 400px wide
https://files.reimage.dev/abc123/xyz789/w-800.webp  # 800px wide
https://files.reimage.dev/abc123/xyz789/w-1920.webp # 1920px wide

Height-Based Resizing

Resize by height while maintaining aspect ratio:

h-{height}

Examples:

https://files.reimage.dev/abc123/xyz789/h-300.webp # 300px tall
https://files.reimage.dev/abc123/xyz789/h-600.webp # 600px tall

Exact Dimensions

Resize to exact width and height:

h-{height}_w-{width}

Examples:

https://files.reimage.dev/abc123/xyz789/h-400_w-400.webp  # Square 400x400
https://files.reimage.dev/abc123/xyz789/h-600_w-800.webp  # 800x600

WARNING

When using exact dimensions, the image may be cropped to fit the aspect ratio.

Responsive Images in HTML

Generate multiple sizes for responsive images:

<img
  src="https://files.reimage.dev/abc123/xyz789/w-800.webp"
  srcset="
    https://files.reimage.dev/abc123/xyz789/w-400.webp 400w,
    https://files.reimage.dev/abc123/xyz789/w-800.webp 800w,
    https://files.reimage.dev/abc123/xyz789/w-1200.webp 1200w,
    https://files.reimage.dev/abc123/xyz789/w-1920.webp 1920w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Product image"
  loading="lazy"
/>

Common Use Cases

Product Thumbnails

// Grid of product thumbnails (200x200)
const thumbnail = `${objectUrl}h-200_w-200.webp`;

Hero Images

// Large hero image
const hero = `${objectUrl}w-1920.webp`;

Avatar Images

// Small circular avatar (100x100)
const avatar = `${objectUrl}h-100_w-100.webp`;

Blog Post Images

// Responsive blog images
const blogImage = {
  mobile: `${objectUrl}w-768.webp`,
  tablet: `${objectUrl}w-1024.webp`,
  desktop: `${objectUrl}w-1440.webp`
};

Format Conversion

Change the file extension to convert formats:

const webp = `${objectUrl}original.webp`;  // WebP (recommended)
const avif = `${objectUrl}original.avif`;  // AVIF (smaller, modern)
const png = `${objectUrl}original.png`;    // PNG (lossless)
const jpg = `${objectUrl}original.jpg`;    // JPEG

Combining Transformations

Combine resizing with format conversion:

https://files.reimage.dev/abc123/xyz789/w-800.webp
https://files.reimage.dev/abc123/xyz789/h-400_w-600.png
https://files.reimage.dev/abc123/xyz789/w-1200.avif

React Component Example

function ProductImage({ objectUrl, alt }) {
  const [size, setSize] = useState('medium');

  const sizes = {
    small: `${objectUrl}w-400.webp`,
    medium: `${objectUrl}w-800.webp`,
    large: `${objectUrl}w-1200.webp`
  };

  return (
    <div>
      <img src={sizes[size]} alt={alt} />
      <div>
        <button onClick={() => setSize('small')}>Small</button>
        <button onClick={() => setSize('medium')}>Medium</button>
        <button onClick={() => setSize('large')}>Large</button>
      </div>
    </div>
  );
}

Performance Tips

1. Use WebP format - Best compression and quality balance
2. Lazy load images - Add loading="lazy" attribute
3. Use appropriate sizes - Don't load 4K images for thumbnails
4. Leverage srcset - Let browser choose the best size
5. CDN caching - Transformed images are cached globally

Advanced: Picture Element

Use the <picture> element for art direction and format fallbacks:

<picture>
  <!-- AVIF for modern browsers -->
  <source
    srcset="https://files.reimage.dev/abc123/xyz789/w-800.avif"
    type="image/avif"
  />

  <!-- WebP for most browsers -->
  <source
    srcset="https://files.reimage.dev/abc123/xyz789/w-800.webp"
    type="image/webp"
  />

  <!-- JPEG fallback -->
  <img
    src="https://files.reimage.dev/abc123/xyz789/w-800.jpg"
    alt="Product image"
  />
</picture>

Image Gallery Example

function ImageGallery({ images }) {
  return (
    <div className="gallery-grid">
      {images.map((img) => (
        <a key={img.object_id} href={`${img.object_url}original`}>
          <img
            src={`${img.object_url}h-300_w-300.webp`}
            alt={img.tags.join(', ')}
            loading="lazy"
          />
        </a>
      ))}
    </div>
  );
}

Next Steps

• Format Conversion - Detailed format guide
• Background Removal - Remove backgrounds
• Create API - API reference