Uploading Images

Upload Methods

OPTIMAGE offers two ways to upload images:

Supported Formats

OPTIMAGE accepts the following image formats:

• ✓JPEG (.jpg, .jpeg) - Most common format for photographs
• ✓PNG (.png) - Best for graphics with transparency
• ✓WebP (.webp) - Modern format, will be converted to optimal settings
• ✓GIF (.gif) - Animated GIFs are converted to static WebP

All uploaded images are automatically converted to WebP format with optimized quality settings (80%) for the best balance between file size and visual quality.

File Size Limits

While OPTIMAGE can handle various file sizes, we recommend the following guidelines:

• •Recommended maximum: 10MB per image
• •Technical limit: 50MB per image

Slug Generation

Each uploaded image is assigned a unique slug that becomes part of its URL. Here's how it works:

• •Auto-generated: By default, the slug is created from your filename (e.g., "my-photo.jpg" becomes "my-photo")
• •Custom slugs: You can specify a custom slug when uploading via the API
• •Conflict resolution: If a slug already exists in your collection, a numeric suffix is automatically added (e.g., "my-photo-2")
• •URL-safe: Slugs are automatically sanitized to be URL-friendly (lowercase, hyphens, no special characters)

Checksum Validation

For API uploads, OPTIMAGE uses SHA-256 checksums to ensure file integrity during transfer:

1. Calculate the SHA-256 hash of your image file before uploading
2. Include the checksum in your upload request
3. OPTIMAGE verifies the checksum matches the received file
4. If checksums don't match, the upload is rejected to prevent corrupted images

Here's how to calculate a checksum in JavaScript:

async function calculateChecksum(file) {
  const arrayBuffer = await file.arrayBuffer();
  const hashBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
  return hashHex;
}

// Usage
const file = document.querySelector('input[type="file"]').files[0];
const checksum = await calculateChecksum(file);
console.log('SHA-256:', checksum);

Processing Time

After uploading, your images go through an automated optimization pipeline:

1. Upload: File is securely transferred (usually 1-3 seconds)
2. Validation: Format and checksum verification (instant)
3. WebP Conversion: Original image converted to WebP (1-2 seconds)
4. Size Generation: 11 responsive sizes created (2-5 seconds)
5. CDN Distribution: Images distributed to CDN (5-10 seconds)

Total processing time: Typically 5-15 seconds for most images. You'll see a progress indicator in the interface, and images become available as soon as processing completes.

Troubleshooting

Common upload issues and solutions: