Format Conversion

Convert images between different formats on-the-fly by changing the file extension in the URL.

Supported Formats

• WebP (.webp) - Recommended for web use
• AVIF (.avif) - Modern format with better compression
• PNG (.png) - Lossless, supports transparency
• JPEG (.jpg, .jpeg) - Widely compatible
• GIF (.gif) - Supports animation

How to Convert

Simply change the file extension:

# Original (as uploaded)
https://files.reimage.dev/abc123/xyz789/original

# Convert to WebP
https://files.reimage.dev/abc123/xyz789/original.webp

# Convert to AVIF
https://files.reimage.dev/abc123/xyz789/original.avif

# Convert to PNG
https://files.reimage.dev/abc123/xyz789/original.png

# Convert to JPEG
https://files.reimage.dev/abc123/xyz789/original.jpg

Combining with Resizing

Convert format while resizing:

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

Format Comparison

WebP (Recommended)

Best for: Most web applications

• Excellent compression
• Supports transparency
• Widely supported in modern browsers
• Smaller file sizes than JPEG/PNG

const webp = `${objectUrl}original.webp`;

AVIF (Modern)

Best for: Cutting-edge applications with modern browser requirements

• Best compression (smaller than WebP)
• Excellent quality
• Limited browser support (getting better)
• Slower encoding/decoding

const avif = `${objectUrl}original.avif`;

PNG (Lossless)

Best for: Images requiring transparency, logos, graphics

• Lossless compression
• Supports transparency
• Larger file sizes
• Universally supported

const png = `${objectUrl}original.png`;

JPEG (Universal)

Best for: Maximum compatibility, photos

• Universal browser support
• Good compression for photos
• No transparency support
• Lossy compression

const jpg = `${objectUrl}original.jpg`;

Progressive Enhancement

Use the <picture> element to provide multiple formats:

<picture>
  <!-- Try AVIF first (best compression) -->
  <source
    srcset="https://files.reimage.dev/abc123/xyz789/w-800.avif"
    type="image/avif"
  />

  <!-- Fallback to WebP (good compression) -->
  <source
    srcset="https://files.reimage.dev/abc123/xyz789/w-800.webp"
    type="image/webp"
  />

  <!-- Final fallback to JPEG (universal support) -->
  <img
    src="https://files.reimage.dev/abc123/xyz789/w-800.jpg"
    alt="Product"
    loading="lazy"
  />
</picture>

React Component

function OptimizedImage({ objectUrl, alt, width }) {
  const baseUrl = `${objectUrl}w-${width}`;

  return (
    <picture>
      <source srcSet={`${baseUrl}.avif`} type="image/avif" />
      <source srcSet={`${baseUrl}.webp`} type="image/webp" />
      <img src={`${baseUrl}.jpg`} alt={alt} loading="lazy" />
    </picture>
  );
}

// Usage
<OptimizedImage
  objectUrl="https://files.reimage.dev/abc123/xyz789/"
  alt="Product photo"
  width={800}
/>

JavaScript Helper

function getOptimizedUrl(objectUrl, width, preferredFormat = 'webp') {
  // Detect browser support
  const supportsAVIF = document.createElement('canvas')
    .toDataURL('image/avif')
    .indexOf('data:image/avif') === 0;

  const supportsWebP = document.createElement('canvas')
    .toDataURL('image/webp')
    .indexOf('data:image/webp') === 0;

  let format = 'jpg'; // fallback

  if (preferredFormat === 'avif' && supportsAVIF) {
    format = 'avif';
  } else if (supportsWebP) {
    format = 'webp';
  }

  return `${objectUrl}w-${width}.${format}`;
}

// Usage
const url = getOptimizedUrl(objectUrl, 800, 'avif');

File Size Comparison

Example 1920x1080 photo:

Format	File Size	Quality	Notes
Original JPEG	450 KB	High	As uploaded
AVIF	85 KB	High	Best compression
WebP	120 KB	High	Great compression
PNG	1.2 MB	Lossless	No compression artifacts
JPEG	200 KB	High	Good compression

Animated GIFs

Animated GIFs are preserved when converting:

# Keep animation
https://files.reimage.dev/abc123/xyz789/original.gif

# Convert to sprite sheet (for manual control)
https://files.reimage.dev/abc123/xyz789/sprite-sheet.png

Background Removal with Format

When removing backgrounds, use PNG or WebP to preserve transparency:

// PNG with transparent background
const noBgPng = `${objectUrl}bg-remove.png`;

// WebP with transparent background (smaller file size)
const noBgWebp = `${objectUrl}bg-remove.webp`;

Best Practices

1. Default to WebP - Best balance of size and compatibility
2. Provide fallbacks - Use <picture> for progressive enhancement
3. Use AVIF for savings - When targeting modern browsers
4. PNG for transparency - When you need alpha channel
5. JPEG for compatibility - When maximum compatibility is required

Format Selection Guide

function selectFormat(useCase) {
  const formats = {
    'product-photo': 'webp',
    'logo': 'png',
    'avatar': 'webp',
    'thumbnail': 'webp',
    'transparent-product': 'png',
    'hero-image': 'avif', // with webp fallback
    'email-compatible': 'jpg'
  };

  return formats[useCase] || 'webp';
}

Server-Side Format Detection

// Express.js example
app.get('/image/:id', (req, res) => {
  const accepts = req.headers.accept || '';
  const objectUrl = getObjectUrl(req.params.id);

  let format = 'jpg';

  if (accepts.includes('image/avif')) {
    format = 'avif';
  } else if (accepts.includes('image/webp')) {
    format = 'webp';
  }

  const imageUrl = `${objectUrl}w-800.${format}`;
  res.redirect(imageUrl);
});

Next Steps

• Image Transformations - Resize images
• Background Removal - Remove backgrounds
• Create API - API reference