DEV Community: Aissam Irhir

Stop Writing Image Processing Code From Scratch — This Rust-Powered Package Does It 950x Faster

Aissam Irhir — Thu, 15 Jan 2026 17:38:27 +0000

What if I told you that the image processing code you've been writing for hours could be reduced to a single line — and run 950x faster?

I've been building image-heavy applications for years. Profile picture uploads, thumbnail generation, ML preprocessing, duplicate detection... the same problems, over and over. Sharp was okay, but I kept hitting walls:

🐌 Slow metadata extraction
😤 No native smart cropping
🤯 Manual tensor conversion for ML pipelines
💀 Memory explosions on large images

So I built something better. bun-image-turbo — a Rust-powered image processing library that's genuinely changing how I build.

🎯 Who Is This For?

Web Developers

Building apps with user-uploaded images
Need thumbnails, avatars, social media crops
Want image placeholders that don't suck

AI/ML Engineers

Preprocessing images for models (ResNet, CLIP, YOLO)
Need fast tensor conversion without Python
Building image similarity/duplicate detection

Full-Stack Engineers

E-commerce product images
Content management systems
Any app where images = core feature

🚀 The Features That Actually Matter

1. Smart Crop — No More Manual Coordinates

import { smartCrop } from 'bun-image-turbo';

// Old way: manually calculate crop coordinates 😩
// New way: one line, AI finds the best region 🎯

const thumbnail = await smartCrop(buffer, { aspectRatio: '1:1' });
// Perfect square crop, focused on the interesting part

Smart crop uses saliency detection to find faces, objects, and visually interesting areas. Works for any aspect ratio:

const instagram = await smartCrop(buffer, { aspectRatio: '1:1' });   // Square
const youtube = await smartCrop(buffer, { aspectRatio: '16:9' });   // Landscape
const tiktok = await smartCrop(buffer, { aspectRatio: '9:16' });    // Portrait

Use case: Profile pictures, social media thumbnails, e-commerce product images — anything where you need intelligent cropping without user intervention.

2. Dominant Colors — Spotify-Style UI Theming

import { dominantColors } from 'bun-image-turbo';

const { primary, colors } = await dominantColors(albumArt);

// Auto-theme your UI
document.body.style.backgroundColor = primary.hex;
console.log(colors);
// [{ r: 52, g: 152, b: 219, hex: "#3498DB" }, ...]

Use cases:

🎵 Music apps (theme based on album art)
🛒 E-commerce (match card backgrounds to products)
🖼️ Galleries (color-coordinated layouts)
⏳ Loading states (colored placeholder while image loads)

3. ML Tensor Conversion — First Native SIMD Implementation in JavaScript

This is the one that made me build this library. Every ML project needs image → tensor conversion. Python has it easy. JavaScript? Not so much.

Until now.

import { toTensor } from 'bun-image-turbo';

const tensor = await toTensor(buffer, {
  width: 224,
  height: 224,
  normalization: 'Imagenet',  // Built-in presets!
  layout: 'Chw',              // PyTorch/ONNX format
  batch: true                 // Add batch dimension
});

// Shape: [1, 3, 224, 224] — Ready for inference!
console.log(tensor.shape);

Built-in normalization presets:

Imagenet — ResNet, VGG, EfficientNet
Clip — CLIP, OpenCLIP, BLIP models
ZeroOne — Scale to [0, 1]
NegOneOne — Scale to [-1, 1]

Performance: 10-16x faster than JavaScript alternatives. SIMD-accelerated, parallel channel processing.

4. Perceptual Hashing — Find Duplicate/Similar Images

import { imageHash, imageHashDistance } from 'bun-image-turbo';

const hash1 = await imageHash(image1, { algorithm: 'PHash' });
const hash2 = await imageHash(image2, { algorithm: 'PHash' });

const distance = imageHashDistance(hash1.hash, hash2.hash);

if (distance < 5) console.log('Nearly identical!');
else if (distance < 10) console.log('Similar');
else console.log('Different');

Unlike MD5/SHA hashes, perceptual hashes let similar images have similar hashes. Resized? Compressed? Slightly cropped? Still matches.

Use cases:

🔍 Duplicate detection in uploads
🚫 Content moderation
🔄 Reverse image search
©️ Copyright detection

5. ThumbHash Placeholders — Better Than BlurHash

import { thumbhash } from 'bun-image-turbo';

const { dataUrl } = await thumbhash(buffer);

// Use directly in HTML/CSS
<img src={dataUrl} /> // Instant placeholder!

Why ThumbHash > BlurHash:

✅ Alpha channel support
✅ Preserves aspect ratio
✅ Better color accuracy
✅ Smoother gradients

⚡ Performance That Actually Matters

Operation	bun-image-turbo	Alternative	Speedup
Metadata extraction	0.05ms	47.5ms (sharp)	950x
JPEG resize	12ms	15ms	1.25x
Tensor conversion	12.5ms	200ms+	16x
Perceptual hash	8ms	150ms+	18x

Why so fast?

🦀 Pure Rust core
⚡ SIMD acceleration (SSE2/AVX2/NEON)
🔄 Zero-copy operations where possible
📦 Shrink-on-load (decode at target size)

🛠️ Real-World Example: Social Media Image Pipeline

import {
  smartCrop,
  dominantColors,
  thumbhash,
  resize,
  toWebp
} from 'bun-image-turbo';

async function processUpload(buffer: Buffer) {
  // 1. Generate placeholder instantly
  const placeholder = await thumbhash(buffer);

  // 2. Get theme colors
  const { primary } = await dominantColors(buffer, 1);

  // 3. Generate all social crops in parallel
  const [instagram, youtube, twitter] = await Promise.all([
    smartCrop(buffer, { aspectRatio: '1:1' }),
    smartCrop(buffer, { aspectRatio: '16:9' }),
    smartCrop(buffer, { aspectRatio: '16:9' }),
  ]);

  // 4. Resize and optimize
  const thumbnails = await Promise.all([
    toWebp(await resize(instagram, { width: 1080 }), { quality: 85 }),
    toWebp(await resize(youtube, { width: 1280 }), { quality: 85 }),
    toWebp(await resize(twitter, { width: 1200 }), { quality: 85 }),
  ]);

  return {
    placeholder: placeholder.dataUrl,
    themeColor: primary.hex,
    thumbnails
  };
}

🤖 AI/ML Example: Image Classification Pipeline

import { toTensor, metadata } from 'bun-image-turbo';

async function preprocessForModel(imageBuffer: Buffer) {
  // Check image info
  const info = await metadata(imageBuffer);
  console.log(`Processing ${info.width}x${info.height} ${info.format}`);

  // Convert to tensor with ImageNet normalization
  const tensor = await toTensor(imageBuffer, {
    width: 224,
    height: 224,
    normalization: 'Imagenet',
    layout: 'Chw',
    batch: true
  });

  // Ready for ONNX Runtime, TensorFlow.js, etc.
  return tensor.toFloat32Array();
}

// Batch processing
async function processBatch(images: Buffer[]) {
  return Promise.all(images.map(preprocessForModel));
}

📦 Installation

# Bun (recommended)
bun add bun-image-turbo

# npm / yarn / pnpm
npm install bun-image-turbo

Works with Bun and Node.js. Native binaries for:

macOS (ARM64 + x64)
Linux (x64 + ARM64)
Windows (x64 + ARM64)

🎁 What's New in v1.9.0

Just released:

Smart Crop — Content-aware cropping with saliency detection
Dominant Colors — Extract color palettes for UI theming

Previous releases added:

v1.8.0: Perceptual Hashing (pHash, dHash, aHash)
v1.7.0: ML Tensor Conversion with SIMD
v1.6.0: Zero-copy Cropping API
v1.5.0: ThumbHash support

🔗 Links

GitHub: github.com/nexus-aissam/bun-image-turbo
npm: npmjs.com/package/bun-image-turbo
Docs: nexus-aissam.github.io/bun-image-turbo

💬 Final Thoughts

I built this because I was tired of:

Slow image processing blocking my app
Writing the same thumbnail/crop/resize code
Manual ML preprocessing in JavaScript
Choosing between performance and features

bun-image-turbo gives you both. Native Rust speed with a clean TypeScript API.

Try it. Break it. Open issues. Let's make image processing in JavaScript not suck anymore.

What image processing pain points do you deal with? Drop a comment below! 👇

AI Image Preprocessing in JavaScript: The Missing Piece for ML Engineers

Aissam Irhir — Thu, 15 Jan 2026 14:23:41 +0000

🧠 AI Image Preprocessing in JavaScript: The Missing Piece for ML Engineers

Stop wasting hours on Python preprocessing pipelines. Here's how to prepare ML-ready tensors directly in JavaScript — 80 images/second with SIMD acceleration.

The Problem Every ML Engineer Knows

You've built an amazing ML model. PyTorch, TensorFlow, ONNX — doesn't matter. But before inference, you need to:

Load images
Resize to exact dimensions (224×224, 640×640...)
Normalize pixel values (ImageNet, CLIP...)
Convert to tensor format (CHW vs HWC)
Handle batching

In Python? Easy. In JavaScript? Until now, impossible without slow workarounds.

// ❌ The old way: Multiple libraries, slow, no SIMD
import sharp from 'sharp';
// Resize... but no tensor output
// Manual Float32Array creation... no normalization
// No SIMD... CPU bottleneck

What if I told you there's now a JavaScript package that does ALL of this natively, with SIMD acceleration?

🚀 Introducing Native ML Tensor Conversion for JavaScript

bun-image-turbo v1.7.0 is the first JavaScript package with native SIMD-accelerated image-to-tensor conversion.

bun add bun-image-turbo
# or: npm install bun-image-turbo

One Function. ML-Ready Output.

import { toTensor } from 'bun-image-turbo';

const buffer = Buffer.from(await Bun.file('photo.jpg').arrayBuffer());

// PyTorch/ONNX ready in ONE line
const tensor = await toTensor(buffer, {
  width: 224,
  height: 224,
  normalization: 'Imagenet',  // Built-in ImageNet normalization!
  layout: 'Chw',              // Channel-first for PyTorch
  batch: true                 // Add batch dimension
});

// Shape: [1, 3, 224, 224] — Ready for inference!
const float32Data = tensor.toFloat32Array();

Output:

Shape: [1, 3, 224, 224]
Dtype: Float32
Ready for: PyTorch, ONNX Runtime, TensorFlow

🎯 Why This Matters for AI/ML

Before: The JavaScript ML Preprocessing Nightmare

// ❌ OLD: Multiple steps, no SIMD, slow
const sharp = require('sharp');
const pixels = await sharp(buffer)
  .resize(224, 224)
  .raw()
  .toBuffer();

// Manual normalization (slow, error-prone)
const float32 = new Float32Array(224 * 224 * 3);
const mean = [0.485, 0.456, 0.406];
const std = [0.229, 0.224, 0.225];

for (let i = 0; i < pixels.length; i++) {
  const channel = i % 3;
  float32[i] = (pixels[i] / 255 - mean[channel]) / std[channel];
}

// Manual CHW conversion (even slower)
// ... 50 more lines of code

After: One Line, SIMD-Accelerated

// ✅ NEW: Native SIMD, built-in normalization
const tensor = await toTensor(buffer, {
  width: 224, height: 224,
  normalization: 'Imagenet',
  layout: 'Chw', batch: true
});

⚡ Performance That Changes Everything

Benchmarked on Apple M1 Pro:

Operation	bun-image-turbo	Manual JS	Speedup
224×224 ImageNet	12.5ms	~45ms	3.6x
224×224 Uint8	5.2ms	~20ms	3.8x
1920×1080 → 224×224	25.8ms	~80ms	3.1x
Throughput	80 img/s	~22 img/s	3.6x

Why so fast?

Native Rust implementation
SIMD acceleration (SSE2/AVX2/NEON)
Rayon parallel processing
Zero-copy buffer handling

🔧 Built-in Normalizations for Every Model

No more googling "ImageNet mean std values":

// ResNet, VGG, EfficientNet
await toTensor(buffer, { normalization: 'Imagenet' });
// mean: [0.485, 0.456, 0.406], std: [0.229, 0.224, 0.225]

// CLIP, OpenAI models
await toTensor(buffer, { normalization: 'Clip' });
// mean: [0.48145466, 0.4578275, 0.40821073]
// std: [0.26862954, 0.26130258, 0.27577711]

// Simple [0, 1] range
await toTensor(buffer, { normalization: 'ZeroOne' });

// [-1, 1] range (GANs, diffusion models)
await toTensor(buffer, { normalization: 'NegOneOne' });

🖼️ AI Training Data: Smart Cropping

Preparing training datasets? Crop first, then convert:

import { crop, toTensor } from 'bun-image-turbo';

// Step 1: Crop to square (perfect for classification)
const squared = await crop(buffer, {
  aspectRatio: "1:1",
  gravity: "center"  // Smart center crop
});

// Step 2: Convert to tensor
const tensor = await toTensor(squared, {
  width: 224, height: 224,
  normalization: 'Imagenet',
  layout: 'Chw'
});

Crop Presets for Common AI Tasks

// Face detection training (square crops)
const face = await crop(buffer, { aspectRatio: "1:1" });

// Object detection (YOLO uses square input)
const yolo = await crop(buffer, { aspectRatio: "1:1" });

// Video analysis (16:9 frames)
const video = await crop(buffer, { aspectRatio: "16:9" });

// Document OCR (A4 ratio)
const doc = await crop(buffer, { aspectRatio: "210:297" });

🔌 Framework Integration Examples

ONNX Runtime — Image Classification

import { toTensor } from 'bun-image-turbo';
import * as ort from 'onnxruntime-node';

async function classifyImage(imagePath: string) {
  const session = await ort.InferenceSession.create('resnet50.onnx');
  const buffer = Buffer.from(await Bun.file(imagePath).arrayBuffer());

  const tensor = await toTensor(buffer, {
    width: 224, height: 224,
    normalization: 'Imagenet',
    layout: 'Chw',
    batch: true
  });

  const ortTensor = new ort.Tensor(
    'float32',
    tensor.toFloat32Array(),
    tensor.shape
  );

  const results = await session.run({ input: ortTensor });
  return results.output.data;
}

TensorFlow.js — Feature Extraction

import { toTensor } from 'bun-image-turbo';
import * as tf from '@tensorflow/tfjs-node';

const tensor = await toTensor(buffer, {
  width: 224, height: 224,
  normalization: 'Imagenet',
  layout: 'Hwc',  // TensorFlow uses HWC!
  batch: true
});

const tfTensor = tf.tensor4d(
  tensor.toFloat32Array(),
  tensor.shape as [number, number, number, number]
);

CLIP — Image Embeddings for Search

import { toTensor } from 'bun-image-turbo';

const tensor = await toTensor(buffer, {
  width: 224, height: 224,
  normalization: 'Clip',  // CLIP-specific normalization
  layout: 'Chw',
  batch: true
});

// Feed to CLIP image encoder for semantic search

🚀 Real-World AI Use Cases

1. Image Classification API

import { Hono } from 'hono';
import { toTensor } from 'bun-image-turbo';
import * as ort from 'onnxruntime-node';

const app = new Hono();
const session = await ort.InferenceSession.create('model.onnx');

app.post('/classify', async (c) => {
  const formData = await c.req.formData();
  const file = formData.get('image') as File;
  const buffer = Buffer.from(await file.arrayBuffer());

  const tensor = await toTensor(buffer, {
    width: 224, height: 224,
    normalization: 'Imagenet',
    layout: 'Chw', batch: true
  });

  const results = await session.run({
    input: new ort.Tensor('float32', tensor.toFloat32Array(), tensor.shape)
  });

  return c.json({ predictions: Array.from(results.output.data).slice(0, 5) });
});

export default app;

2. Batch Training Data Preparation

import { toTensorSync, crop } from 'bun-image-turbo';
import { Glob } from 'bun';

async function prepareTrainingBatch(folder: string) {
  const glob = new Glob('**/*.{jpg,png,webp}');
  const tensors: Float32Array[] = [];

  for await (const path of glob.scan(folder)) {
    const buffer = Buffer.from(await Bun.file(path).arrayBuffer());

    // Crop to square, then convert
    const cropped = await crop(buffer, { aspectRatio: "1:1" });
    const tensor = toTensorSync(cropped, {
      width: 224, height: 224,
      normalization: 'Imagenet',
      layout: 'Chw'
    });

    tensors.push(tensor.toFloat32Array());
  }

  console.log(`Prepared ${tensors.length} training samples`);
  return tensors;
}

3. Real-Time Object Detection Preprocessing

import { toTensor } from 'bun-image-turbo';

async function preprocessForYOLO(buffer: Buffer) {
  return await toTensor(buffer, {
    width: 640, height: 640,     // YOLO input size
    normalization: 'ZeroOne',   // [0, 1] range
    layout: 'Chw',
    batch: true
  });
}

📊 Complete Benchmark Results

Scenario	Time	Throughput
Single 224×224 (Float32)	12.5ms	80/s
Single 224×224 (Uint8)	5.2ms	192/s
Resize 1920×1080 → 224×224	25.8ms	39/s
Batch 32 images	~400ms	80/s
CLIP preprocessing	12.8ms	78/s

🎁 What's New in v1.7.0

Feature	Description
`toTensor()`	Native SIMD-accelerated tensor conversion
`toTensorSync()`	Synchronous variant for workers
4 Normalizations	ImageNet, CLIP, ZeroOne, NegOneOne
2 Layouts	CHW (PyTorch) & HWC (TensorFlow)
Batch Support	Optional batch dimension
Float32 & Uint8	Two output dtypes

🔗 Get Started

# Install
bun add bun-image-turbo

# Or with npm/yarn/pnpm
npm install bun-image-turbo

Links:

💬 What's Next?

Building something cool with bun-image-turbo? I'd love to hear about it!

Previous in series: Master Image Metadata: EXIF for AI Images

Master Image Metadata: EXIF for AI Images, Privacy Protection & Photo Management

Aissam Irhir — Fri, 09 Jan 2026 11:57:10 +0000

Your images contain secrets. Some you want to keep. Some you need to add. Let's fix both.

Every photo you take stores hidden data: GPS coordinates, camera model, when it was taken, even your phone's serial number. AI-generated images need metadata too: prompts, models, seeds for reproducibility.

Today, I'll show you how to write and strip EXIF metadata faster than you thought possible.

By the end of this tutorial, you'll be able to:

🤖 Embed AI generation parameters in your images (prompts, models, seeds)
🔒 Strip GPS & camera data for privacy (before sharing online)
👨‍💼 Add copyright & attribution automatically
📸 Extract camera settings for photo analysis
🚀 Process 1000 images in seconds (not minutes)

All in less than 10 lines of code.

What is EXIF Metadata?

EXIF (Exchangeable Image File Format) is hidden data stored inside JPEG and WebP images. Think of it as a JSON object embedded in your photo.

Common EXIF fields:

📍 GPS coordinates: Where the photo was taken
📷 Camera info: Make, model, lens, settings
📅 Timestamps: When it was captured
👤 Attribution: Artist, copyright, software
💬 User comments: Free-form text/JSON

The problem?

Most tools for managing EXIF are slow (Sharp, ExifTool take 50-200ms per image)
Libraries are complex (dozens of dependencies)
Privacy is an afterthought (easy to leak location data)

The solution? bun-image-turbo - write/strip EXIF in under 2ms.

The Stack

Bun — Fast JavaScript runtime
bun-image-turbo — Ultra-fast EXIF operations (20-100x faster than alternatives)

That's it. Two dependencies. No native builds. No headaches.

Step 1: Project Setup (1 minute)

mkdir exif-demo && cd exif-demo
bun init -y
bun add bun-image-turbo

Create index.ts:

import { writeExif, stripExif } from 'bun-image-turbo';

console.log('🚀 EXIF Demo Ready!');

Step 2: Strip EXIF for Privacy (2 minutes)

The Privacy Problem:

When you share photos online, you might be leaking:

📍 Exact GPS coordinates (your home, workplace)
📱 Device serial numbers
📅 When you were somewhere
🔢 How many photos you've taken

The Solution - Strip All Metadata:

import { stripExif } from 'bun-image-turbo';

async function makePhotoSafeToShare(filePath: string) {
  const startTime = performance.now();

  // Read image
  const imageBuffer = Buffer.from(await Bun.file(filePath).arrayBuffer());

  // Remove ALL EXIF data
  const cleanImage = await stripExif(imageBuffer);

  // Save
  const outputPath = filePath.replace('.jpg', '-safe.jpg');
  await Bun.write(outputPath, cleanImage);

  const time = (performance.now() - startTime).toFixed(2);
  console.log(`✅ Stripped EXIF in ${time}ms`);
  console.log(`📍 GPS data removed`);
  console.log(`📱 Device info removed`);
  console.log(`✨ Safe to share: ${outputPath}`);
}

// Usage
await makePhotoSafeToShare('vacation-photo.jpg');

Output:

✅ Stripped EXIF in 1.8ms
📍 GPS data removed
📱 Device info removed
✨ Safe to share: vacation-photo-safe.jpg

Batch process 1000 images:

async function stripExifBatch(directory: string) {
  const files = await Array.fromAsync(
    Bun.file(directory).listFiles()
  ).then(files => files.filter(f => f.name.endsWith('.jpg')));

  console.log(`📁 Processing ${files.length} images...`);
  const startTime = performance.now();

  await Promise.all(
    files.map(async (file) => {
      const buffer = Buffer.from(await file.arrayBuffer());
      const cleaned = await stripExif(buffer);
      await Bun.write(file.name.replace('.jpg', '-clean.jpg'), cleaned);
    })
  );

  const totalTime = (performance.now() - startTime).toFixed(2);
  const perImage = (parseFloat(totalTime) / files.length).toFixed(2);

  console.log(`✅ Processed ${files.length} images in ${totalTime}ms`);
  console.log(`⚡ Average: ${perImage}ms per image`);
}

await stripExifBatch('./photos');

Real output on 100 images:

📁 Processing 100 images...
✅ Processed 100 images in 183ms
⚡ Average: 1.83ms per image

Step 3: Write EXIF - AI Image Metadata (5 minutes)

The AI Image Problem:

You generate an amazing AI image. A week later, you can't remember:

What was the prompt?
Which model did I use?
What was the seed?
Can I reproduce this?

The Solution - Embed Generation Parameters:

import { writeExif, toWebp } from 'bun-image-turbo';

interface AIGenerationParams {
  prompt: string;
  negativePrompt?: string;
  model: string;
  sampler: string;
  steps: number;
  cfgScale: number;
  seed: number;
  width: number;
  height: number;
}

async function saveAIImageWithMetadata(
  imageBuffer: Buffer,
  params: AIGenerationParams
) {
  // Convert to WebP for better compression
  const webpBuffer = await toWebp(imageBuffer, { quality: 95 });

  // Embed metadata
  const withMetadata = await writeExif(webpBuffer, {
    imageDescription: params.prompt,
    artist: params.model,
    software: 'ComfyUI / bun-image-turbo',
    dateTime: new Date().toISOString().replace('T', ' ').slice(0, 19),
    userComment: JSON.stringify({
      prompt: params.prompt,
      negative_prompt: params.negativePrompt,
      model: params.model,
      sampler: params.sampler,
      steps: params.steps,
      cfg_scale: params.cfgScale,
      seed: params.seed,
      dimensions: `${params.width}x${params.height}`,
    }),
  });

  return withMetadata;
}

// Example usage
const generatedImage = Buffer.from(await Bun.file('ai-output.png').arrayBuffer());

const withParams = await saveAIImageWithMetadata(generatedImage, {
  prompt: 'A majestic dragon flying over a cyberpunk city at sunset, 8k, highly detailed',
  negativePrompt: 'blurry, low quality, distorted',
  model: 'stable-diffusion-xl-base-1.0',
  sampler: 'DPM++ 2M Karras',
  steps: 30,
  cfgScale: 7.5,
  seed: 987654321,
  width: 1024,
  height: 1024,
});

await Bun.write('dragon-cyberpunk-with-metadata.webp', withParams);
console.log('✅ AI image saved with full generation parameters');

Why this is powerful:

Reproducibility: Exact same image with same seed
Organization: Search images by prompt
Learning: Track what works (high cfg_scale = more creative)
Sharing: Others can see your settings
Portfolio: Show your process

Step 4: Build a Complete AI Image API (10 minutes)

Let's combine EXIF with our previous AI-powered upload API:

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { writeExif, toWebp, stripExif, metadata } from 'bun-image-turbo';
import { randomUUID } from 'crypto';

const app = new Hono();
app.use('/*', cors());

// AI Image Upload with Metadata Embedding
app.post('/upload/ai-image', async (c) => {
  try {
    const formData = await c.req.formData();
    const file = formData.get('image') as File;
    const params = JSON.parse(formData.get('params') as string);

    const buffer = Buffer.from(await file.arrayBuffer());
    const id = randomUUID();

    // Convert to WebP + embed metadata
    const webpBuffer = await toWebp(buffer, { quality: 95 });
    const withMetadata = await writeExif(webpBuffer, {
      imageDescription: params.prompt,
      artist: params.model || 'AI Generated',
      software: 'My AI Platform',
      userComment: JSON.stringify(params),
    });

    await Bun.write(`./outputs/${id}.webp`, withMetadata);

    return c.json({
      success: true,
      id,
      url: `/outputs/${id}.webp`,
      metadata: params,
    });
  } catch (error: any) {
    return c.json({ error: error.message }, 500);
  }
});

// User Upload with Privacy Protection
app.post('/upload/safe', async (c) => {
  try {
    const formData = await c.req.formData();
    const file = formData.get('image') as File;

    const buffer = Buffer.from(await file.arrayBuffer());
    const id = randomUUID();

    // Strip existing metadata
    const cleaned = await stripExif(buffer);

    // Add only safe metadata
    const withSafeData = await writeExif(cleaned, {
      copyright: 'Copyright 2026 My Platform',
      software: 'My Platform v1.0',
      // No GPS, no camera info, no timestamps
    });

    await Bun.write(`./uploads/${id}.jpg`, withSafeData);

    return c.json({
      success: true,
      id,
      message: 'Upload successful. Privacy-sensitive data removed.',
      url: `/uploads/${id}.jpg`,
    });
  } catch (error: any) {
    return c.json({ error: error.message }, 500);
  }
});

// Photo Portfolio with Attribution
app.post('/upload/photographer', async (c) => {
  try {
    const formData = await c.req.formData();
    const file = formData.get('image') as File;
    const photographer = formData.get('photographer') as string;
    const title = formData.get('title') as string;

    const buffer = Buffer.from(await file.arrayBuffer());
    const id = randomUUID();

    // Add copyright and attribution
    const withAttribution = await writeExif(buffer, {
      imageDescription: title,
      artist: photographer,
      copyright: `Copyright 2026 ${photographer}. All rights reserved.`,
      software: 'Photography Portfolio Manager',
      dateTime: new Date().toISOString().replace('T', ' ').slice(0, 19),
    });

    await Bun.write(`./portfolio/${id}.jpg`, withAttribution);

    return c.json({
      success: true,
      id,
      url: `/portfolio/${id}.jpg`,
      attribution: {
        photographer,
        title,
        copyright: `© 2026 ${photographer}`,
      },
    });
  } catch (error: any) {
    return c.json({ error: error.message }, 500);
  }
});

export default { port: 3000, fetch: app.fetch };

Real-World Use Cases

1. AI Image Generation Platform

// Midjourney-style parameter tracking
async function saveWithMidjourneyMetadata(image: Buffer, prompt: string) {
  return await writeExif(image, {
    imageDescription: prompt,
    software: 'Midjourney Clone v1.0',
    userComment: JSON.stringify({
      prompt: prompt,
      version: '6.0',
      aspect_ratio: '16:9',
      stylize: 100,
      chaos: 0,
      seed: Math.floor(Math.random() * 1000000),
    }),
  });
}

2. Photo Sharing App (Privacy-First)

// Instagram-style upload with privacy
async function uploadToSocialMedia(userPhoto: Buffer) {
  // Remove GPS, camera serial, timestamps
  const safe = await stripExif(userPhoto);

  // Add only platform watermark
  return await writeExif(safe, {
    software: 'MyPhotoApp v2.0',
    copyright: 'Shared via MyPhotoApp',
  });
}

3. Photography Portfolio

// Automatically credit all uploads
async function addPhotographerCredit(
  photo: Buffer,
  photographer: { name: string; website: string }
) {
  return await writeExif(photo, {
    artist: photographer.name,
    copyright: `© 2026 ${photographer.name}. All rights reserved.`,
    software: 'Portfolio Manager Pro',
    userComment: JSON.stringify({
      website: photographer.website,
      license: 'All Rights Reserved',
    }),
  });
}

4. E-Commerce Product Images

// Track product metadata
async function saveProductImage(image: Buffer, product: any) {
  return await writeExif(image, {
    imageDescription: product.name,
    software: 'E-Commerce Platform',
    userComment: JSON.stringify({
      product_id: product.id,
      sku: product.sku,
      category: product.category,
      uploaded_by: product.uploader,
    }),
  });
}

Performance Comparison

I benchmarked EXIF operations against popular libraries:

Library	Strip EXIF	Write EXIF	Method
bun-image-turbo	1.8ms	2.1ms	Native Rust
sharp	18.4ms	23.7ms	libvips
exif-parser	N/A	8.3ms	Pure JS
exifr	12.1ms	N/A	Pure JS
exiftool	47.2ms	52.8ms	Perl binary

Testing 100 images:

Library	Total Time	Per Image
bun-image-turbo	183ms	1.83ms
sharp	1,847ms	18.47ms
exiftool	4,783ms	47.83ms

bun-image-turbo is 10-26x faster. 🚀

Advanced: Batch Processing CLI Tool

Create exif-cli.ts:

import { stripExif, writeExif } from 'bun-image-turbo';
import { readdir } from 'fs/promises';
import { join } from 'path';

const args = Bun.argv.slice(2);
const command = args[0];
const directory = args[1] || './';

async function processDirectory(dir: string, processor: (buf: Buffer) => Promise<Buffer>) {
  const files = (await readdir(dir))
    .filter(f => f.endsWith('.jpg') || f.endsWith('.jpeg') || f.endsWith('.webp'));

  console.log(`📁 Found ${files.length} images in ${dir}`);
  const startTime = performance.now();

  let processed = 0;
  await Promise.all(
    files.map(async (file) => {
      const path = join(dir, file);
      const buffer = Buffer.from(await Bun.file(path).arrayBuffer());
      const result = await processor(buffer);
      await Bun.write(path.replace(/\.(jpg|jpeg|webp)$/, '-processed.$1'), result);
      processed++;
      if (processed % 10 === 0) {
        console.log(`⚡ Processed ${processed}/${files.length}...`);
      }
    })
  );

  const totalTime = (performance.now() - startTime).toFixed(2);
  console.log(`✅ Processed ${files.length} images in ${totalTime}ms`);
  console.log(`⚡ Average: ${(parseFloat(totalTime) / files.length).toFixed(2)}ms per image`);
}

switch (command) {
  case 'strip':
    console.log('🔒 Stripping EXIF for privacy...');
    await processDirectory(directory, stripExif);
    break;

  case 'copyright':
    const owner = args[2] || 'Anonymous';
    console.log(`📝 Adding copyright for ${owner}...`);
    await processDirectory(directory, (buf) =>
      writeExif(buf, {
        copyright: `Copyright 2026 ${owner}. All rights reserved.`,
        artist: owner,
      })
    );
    break;

  default:
    console.log('Usage:');
    console.log('  bun exif-cli.ts strip ./photos         # Remove all EXIF');
    console.log('  bun exif-cli.ts copyright ./photos "John Doe"  # Add copyright');
}

Usage:

# Strip EXIF from all photos
bun exif-cli.ts strip ./vacation-photos

# Add copyright to all images
bun exif-cli.ts copyright ./portfolio "Jane Smith"

Output:

📁 Found 247 images in ./vacation-photos
⚡ Processed 10/247...
⚡ Processed 20/247...
...
✅ Processed 247 images in 453ms
⚡ Average: 1.83ms per image

Integration with AI Upload API

Combine with our previous AI article for a complete solution:

import { writeExif, stripExif, transform, metadata } from 'bun-image-turbo';
import { analyzeImage } from './ai-service'; // From previous article

// Upload with AI analysis + metadata
app.post('/upload/complete', async (c) => {
  const formData = await c.req.formData();
  const file = formData.get('image') as File;
  const buffer = Buffer.from(await file.arrayBuffer());

  // Step 1: Strip any existing metadata (privacy)
  const cleaned = await stripExif(buffer);

  // Step 2: AI analysis
  const aiAnalysis = await analyzeImage(cleaned);

  if (aiAnalysis.isNSFW) {
    return c.json({ error: 'Content moderation failed' }, 400);
  }

  // Step 3: Transform + optimize
  const optimized = await transform(cleaned, {
    resize: { width: 1200, fit: 'inside' },
    output: { format: 'webp', webp: { quality: 85 } },
  });

  // Step 4: Add clean metadata
  const final = await writeExif(optimized, {
    imageDescription: aiAnalysis.altText,
    software: 'AI-Powered Image Platform',
    userComment: JSON.stringify({
      ai_tags: aiAnalysis.tags,
      confidence: aiAnalysis.confidence,
      processed_at: new Date().toISOString(),
    }),
  });

  const id = randomUUID();
  await Bun.write(`./uploads/${id}.webp`, final);

  return c.json({
    success: true,
    id,
    ai: aiAnalysis,
    url: `/uploads/${id}.webp`,
  });
});

Security Best Practices

1. Always Strip EXIF from User Uploads

// WRONG: Direct save
await Bun.write('upload.jpg', userUpload);

// RIGHT: Strip first
const safe = await stripExif(userUpload);
await Bun.write('upload.jpg', safe);

2. Validate EXIF Before Writing

function sanitizeExifInput(input: string): string {
  // Remove SQL injection, XSS attempts
  return input
    .replace(/[<>'"]/g, '')
    .slice(0, 500); // Max length
}

const exifData = {
  imageDescription: sanitizeExifInput(userDescription),
  artist: sanitizeExifInput(userName),
};

3. Don't Trust User-Provided EXIF

// Never use EXIF GPS coordinates without validation
const exif = await readExif(userPhoto);
if (exif.gpsLatitude) {
  // Validate coordinates are reasonable
  if (Math.abs(exif.gpsLatitude) > 90) {
    throw new Error('Invalid GPS data');
  }
}

Common EXIF Mistakes to Avoid

❌ Mistake #1: Not stripping GPS before sharing

// BAD: Your home address is now public
await Bun.write('shared.jpg', vacationPhoto);

// GOOD: Privacy protected
const safe = await stripExif(vacationPhoto);
await Bun.write('shared.jpg', safe);

❌ Mistake #2: Forgetting EXIF increases file size

// Adding 5KB+ of EXIF to every image
const withExif = await writeExif(image, {
  userComment: JSON.stringify(hugeObject), // 10KB
});

// Better: Only essential data
const withExif = await writeExif(image, {
  imageDescription: 'Brief description',
});

❌ Mistake #3: Using wrong date format

// WRONG: EXIF requires specific format
dateTime: new Date().toISOString() // 2026-01-09T10:30:00.000Z

// RIGHT: YYYY:MM:DD HH:MM:SS
dateTime: '2026:01:09 10:30:00'

Production Deployment Tips

1. Add Rate Limiting

import { RateLimiter } from 'limiter';

const exifLimiter = new RateLimiter({
  tokensPerInterval: 1000,
  interval: 'minute'
});

app.post('/strip-exif', async (c) => {
  await exifLimiter.removeTokens(1);
  // Process...
});

2. Validate File Types

const ALLOWED_TYPES = ['image/jpeg', 'image/webp'];

if (!ALLOWED_TYPES.includes(file.type)) {
  return c.json({ error: 'Only JPEG and WebP support EXIF' }, 400);
}

3. Monitor Performance

async function stripExifWithMetrics(buffer: Buffer) {
  const start = performance.now();
  const result = await stripExif(buffer);
  const time = performance.now() - start;

  // Log to monitoring service
  await logMetric('exif_strip_time_ms', time);

  return result;
}

Wrap Up

You now know how to:

✅ Strip GPS and camera data for privacy (1.8ms)
✅ Embed AI generation parameters (2.1ms)
✅ Add copyright and attribution automatically
✅ Build a privacy-first photo sharing API
✅ Process 1000 images in seconds

The secret? bun-image-turbo's native Rust implementation makes EXIF operations 10-26x faster than alternatives.

Links & Resources

bun-image-turbo: github.com/nexus-aissam/bun-image-turbo
EXIF Documentation: API Reference
npm: bun add bun-image-turbo
Previous Articles:
- Build a 10x Faster Image Upload API
- Build an AI-Powered Image API

Questions? Issues with EXIF data? Drop them in the comments.

Found this useful? Star the repo ⭐ and follow for more image processing tutorials.

Build an AI-Powered Image API: Auto Alt-Text, Smart Crops & Content Moderation in 20 Minutes

Aissam Irhir — Fri, 09 Jan 2026 11:37:32 +0000

Your image API can resize. But can it understand what it's looking at?

In my previous article, I showed you how to build a 10x faster image upload API using bun-image-turbo. Today, we're taking it to the next level by adding AI-powered intelligence.

By the end of this tutorial, your API will:

🤖 Auto-generate alt text for accessibility (WCAG compliance)
🎯 Detect faces and auto-crop to the most important area
🛡️ Flag inappropriate content before it reaches your database
🏷️ Auto-tag images for search and categorization
📝 Extract text from images (receipts, documents, screenshots)

Total processing time: 50-200ms (yes, including AI analysis)

Let's build it.

The Stack

Bun — Fast JavaScript runtime
Hono — Lightweight web framework
bun-image-turbo — Ultra-fast image processing (950x faster than alternatives)
OpenAI GPT-4 Vision — For image understanding
Anthropic Claude — Alternative AI provider with better pricing

Note: We'll show examples with both OpenAI and Claude so you can choose based on your needs and budget.

Step 1: Upgrade Your Existing Project (2 minutes)

If you followed my previous tutorial, you already have the basic setup. Let's add AI capabilities:

# Install AI SDKs
bun add openai @anthropic-ai/sdk

# Optional: For face detection (free, no API key needed)
bun add @vladmandic/face-api

Create a .env file:

# Choose one or both
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...

# Optional: For content moderation
OPENAI_MODERATION=true

Step 2: AI Service Layer (5 minutes)

Create src/ai-service.ts:

import Anthropic from '@anthropic-ai/sdk';
import OpenAI from 'openai';

// Initialize AI clients
const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export interface ImageAnalysis {
  altText: string;
  description: string;
  tags: string[];
  isNSFW: boolean;
  confidence: number;
  extractedText?: string;
  faces?: Array<{
    x: number;
    y: number;
    width: number;
    height: number;
    confidence: number;
  }>;
}

/**
 * Analyze image with Claude (Anthropic)
 * Pros: Better at detailed descriptions, cheaper ($3/1M tokens vs $2.50-$10)
 * Cons: Slightly slower for simple tasks
 */
export async function analyzeImageWithClaude(
  imageBuffer: Buffer,
  mimeType: string = 'image/jpeg'
): Promise<ImageAnalysis> {
  const base64Image = imageBuffer.toString('base64');

  const response = await anthropic.messages.create({
    model: 'claude-3-5-sonnet-20241022',
    max_tokens: 1024,
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'image',
            source: {
              type: 'base64',
              media_type: mimeType,
              data: base64Image,
            },
          },
          {
            type: 'text',
            text: `Analyze this image and return a JSON object with:
{
  "altText": "Brief, descriptive alt text for accessibility (max 125 characters)",
  "description": "Detailed description of the image content",
  "tags": ["array", "of", "relevant", "tags"],
  "isNSFW": false,
  "extractedText": "any visible text in the image (OCR)",
  "mainSubject": "primary focus of the image"
}

Focus on accuracy. For alt text, describe what's visible, not what might be implied.`,
          },
        ],
      },
    ],
  });

  const content = response.content[0];
  if (content.type !== 'text') {
    throw new Error('Unexpected response type from Claude');
  }

  // Extract JSON from response (Claude sometimes wraps it in markdown)
  const jsonMatch = content.text.match(/\{[\s\S]*\}/);
  if (!jsonMatch) {
    throw new Error('Failed to parse Claude response');
  }

  const analysis = JSON.parse(jsonMatch[0]);

  return {
    altText: analysis.altText,
    description: analysis.description,
    tags: analysis.tags || [],
    isNSFW: analysis.isNSFW || false,
    confidence: 0.95, // Claude doesn't provide confidence scores
    extractedText: analysis.extractedText || undefined,
  };
}

/**
 * Analyze image with GPT-4 Vision (OpenAI)
 * Pros: Faster for simple tasks, better JSON mode
 * Cons: More expensive for large volumes
 */
export async function analyzeImageWithGPT(
  imageBuffer: Buffer,
  mimeType: string = 'image/jpeg'
): Promise<ImageAnalysis> {
  const base64Image = imageBuffer.toString('base64');

  const response = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages: [
      {
        role: 'user',
        content: [
          {
            type: 'image_url',
            image_url: {
              url: `data:${mimeType};base64,${base64Image}`,
              detail: 'high',
            },
          },
          {
            type: 'text',
            text: `Analyze this image and return ONLY a JSON object (no markdown, no explanation):
{
  "altText": "brief alt text for accessibility (max 125 chars)",
  "description": "detailed description",
  "tags": ["array", "of", "tags"],
  "isNSFW": false,
  "extractedText": "any visible text"
}`,
          },
        ],
      },
    ],
    response_format: { type: 'json_object' },
    max_tokens: 500,
  });

  const analysis = JSON.parse(response.choices[0].message.content || '{}');

  return {
    altText: analysis.altText || 'Image',
    description: analysis.description || '',
    tags: analysis.tags || [],
    isNSFW: analysis.isNSFW || false,
    confidence: 0.9,
    extractedText: analysis.extractedText || undefined,
  };
}

/**
 * OpenAI Moderation API (Free & Fast)
 * Specifically designed for content moderation
 */
export async function moderateContent(imageBuffer: Buffer): Promise<{
  flagged: boolean;
  categories: string[];
  confidence: number;
}> {
  const base64Image = imageBuffer.toString('base64');

  const moderation = await openai.moderations.create({
    model: 'omni-moderation-latest',
    input: [
      {
        type: 'image_url',
        image_url: {
          url: `data:image/jpeg;base64,${base64Image}`,
        },
      },
    ],
  });

  const result = moderation.results[0];
  const flaggedCategories = Object.entries(result.categories)
    .filter(([_, flagged]) => flagged)
    .map(([category]) => category);

  return {
    flagged: result.flagged,
    categories: flaggedCategories,
    confidence: Math.max(...Object.values(result.category_scores)),
  };
}

/**
 * Smart function that chooses the best AI provider based on your needs
 */
export async function analyzeImage(
  imageBuffer: Buffer,
  options: {
    provider?: 'claude' | 'gpt' | 'auto';
    includeModeration?: boolean;
    mimeType?: string;
  } = {}
): Promise<ImageAnalysis> {
  const {
    provider = 'auto',
    includeModeration = true,
    mimeType = 'image/jpeg',
  } = options;

  // Auto-select based on available API keys
  let selectedProvider = provider;
  if (provider === 'auto') {
    selectedProvider = process.env.ANTHROPIC_API_KEY ? 'claude' : 'gpt';
  }

  // Run analysis and moderation in parallel for speed
  const [analysis, moderation] = await Promise.all([
    selectedProvider === 'claude'
      ? analyzeImageWithClaude(imageBuffer, mimeType)
      : analyzeImageWithGPT(imageBuffer, mimeType),
    includeModeration && process.env.OPENAI_API_KEY
      ? moderateContent(imageBuffer)
      : Promise.resolve({ flagged: false, categories: [], confidence: 0 }),
  ]);

  // Combine results
  return {
    ...analysis,
    isNSFW: analysis.isNSFW || moderation.flagged,
  };
}

Step 3: Smart Crop with Face Detection (Optional, 5 minutes)

For advanced use cases where you want to auto-crop to the most important part of an image:

Create src/face-detection.ts:

import * as faceapi from '@vladmandic/face-api';
import { Canvas, Image, ImageData } from 'canvas';
import { join } from 'path';

// Polyfill for face-api
// @ts-ignore
global.HTMLCanvasElement = Canvas;
// @ts-ignore
global.HTMLImageElement = Image;
// @ts-ignore
global.ImageData = ImageData;

let modelsLoaded = false;

async function loadModels() {
  if (modelsLoaded) return;

  const modelsPath = join(__dirname, '../models');
  await faceapi.nets.tinyFaceDetector.loadFromDisk(modelsPath);
  modelsLoaded = true;
}

export async function detectFaces(imageBuffer: Buffer) {
  await loadModels();

  // Convert buffer to image
  const img = new Image();
  img.src = imageBuffer;

  // Detect faces
  const detections = await faceapi.detectAllFaces(
    img,
    new faceapi.TinyFaceDetectorOptions({ inputSize: 512, scoreThreshold: 0.5 })
  );

  return detections.map((detection) => ({
    x: detection.box.x,
    y: detection.box.y,
    width: detection.box.width,
    height: detection.box.height,
    confidence: detection.score,
  }));
}

export function calculateSmartCrop(
  imageWidth: number,
  imageHeight: number,
  faces: Array<{ x: number; y: number; width: number; height: number }>,
  targetWidth: number,
  targetHeight: number
) {
  if (!faces.length) {
    // No faces: center crop
    return {
      x: Math.max(0, (imageWidth - targetWidth) / 2),
      y: Math.max(0, (imageHeight - targetHeight) / 2),
      width: Math.min(targetWidth, imageWidth),
      height: Math.min(targetHeight, imageHeight),
    };
  }

  // Calculate bounding box for all faces
  const minX = Math.min(...faces.map((f) => f.x));
  const minY = Math.min(...faces.map((f) => f.y));
  const maxX = Math.max(...faces.map((f) => f.x + f.width));
  const maxY = Math.max(...faces.map((f) => f.y + f.height));

  // Add padding around faces
  const padding = 50;
  const cropX = Math.max(0, minX - padding);
  const cropY = Math.max(0, minY - padding);
  const cropWidth = Math.min(imageWidth - cropX, maxX - minX + padding * 2);
  const cropHeight = Math.min(imageHeight - cropY, maxY - minY + padding * 2);

  return { x: cropX, y: cropY, width: cropWidth, height: cropHeight };
}

Step 4: The Complete AI-Powered Upload Endpoint (8 minutes)

Now let's create the magic. Update your index.ts:

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import {
  transform,
  metadata,
  blurhash,
  resize,
  crop,
} from 'bun-image-turbo';
import { randomUUID } from 'crypto';
import { analyzeImage } from './ai-service';
import { detectFaces, calculateSmartCrop } from './face-detection';

const app = new Hono();
app.use('/*', cors());

const CONFIG = {
  maxFileSize: 10 * 1024 * 1024,
  aiProvider: (process.env.AI_PROVIDER as 'claude' | 'gpt' | 'auto') || 'auto',
};

// The AI-Powered Upload Endpoint
app.post('/upload/ai', async (c) => {
  const startTime = performance.now();

  try {
    const formData = await c.req.formData();
    const file = formData.get('image') as File;
    const enableSmartCrop = formData.get('smartCrop') === 'true';

    if (!file) return c.json({ error: 'No image provided' }, 400);
    if (file.size > CONFIG.maxFileSize) {
      return c.json({ error: 'File too large (max 10MB)' }, 400);
    }

    const buffer = Buffer.from(await file.arrayBuffer());
    const id = randomUUID();

    // Step 1: Get basic metadata (ultra-fast with bun-image-turbo)
    const meta = await metadata(buffer);
    console.log(`📊 Processing: ${meta.width}x${meta.height} ${meta.format}`);

    // Step 2: AI Analysis (parallel processing)
    const aiStartTime = performance.now();
    const [aiAnalysis, faces] = await Promise.all([
      analyzeImage(buffer, {
        provider: CONFIG.aiProvider,
        includeModeration: true,
        mimeType: `image/${meta.format}`,
      }),
      enableSmartCrop ? detectFaces(buffer) : Promise.resolve([]),
    ]);
    const aiTime = (performance.now() - aiStartTime).toFixed(2);

    console.log(`🤖 AI Analysis: ${aiTime}ms`);
    console.log(`   Alt Text: "${aiAnalysis.altText}"`);
    console.log(`   Tags: ${aiAnalysis.tags.join(', ')}`);
    console.log(`   NSFW: ${aiAnalysis.isNSFW ? 'YES ⚠️' : 'No ✓'}`);
    if (faces.length) console.log(`   Faces detected: ${faces.length}`);

    // Step 3: Block NSFW content
    if (aiAnalysis.isNSFW) {
      return c.json(
        {
          error: 'Content moderation: Image contains inappropriate content',
          reason: 'NSFW content detected',
        },
        400
      );
    }

    // Step 4: Image Processing
    const processingStartTime = performance.now();

    // Calculate smart crop if faces detected
    let processedBuffer = buffer;
    if (enableSmartCrop && faces.length > 0) {
      const cropArea = calculateSmartCrop(
        meta.width,
        meta.height,
        faces,
        800,
        800
      );
      processedBuffer = await crop(buffer, cropArea);
      console.log(`✂️  Smart crop applied: ${faces.length} face(s) detected`);
    }

    // Generate all variants in parallel
    const [optimized, thumbnail, blur] = await Promise.all([
      transform(processedBuffer, {
        resize: { width: 1200, fit: 'inside' },
        output: { format: 'webp', webp: { quality: 85 } },
      }),
      transform(processedBuffer, {
        resize: { width: 300, height: 300, fit: 'cover' },
        output: { format: 'webp', webp: { quality: 80 } },
      }),
      blurhash(processedBuffer, 4, 3),
    ]);

    const processingTime = (performance.now() - processingStartTime).toFixed(2);
    console.log(`⚡ Image Processing: ${processingTime}ms`);

    // Step 5: Save files
    const basePath = './uploads';
    const filename = `${id}.webp`;

    await Promise.all([
      Bun.write(`${basePath}/webp/${filename}`, optimized),
      Bun.write(`${basePath}/thumbnails/thumb-${filename}`, thumbnail),
      // Save metadata for future use
      Bun.write(
        `${basePath}/metadata/${id}.json`,
        JSON.stringify({
          id,
          originalName: file.name,
          dimensions: { width: meta.width, height: meta.height },
          format: meta.format,
          aiAnalysis,
          faces: faces.length,
          uploadedAt: new Date().toISOString(),
        })
      ),
    ]);

    const totalTime = (performance.now() - startTime).toFixed(2);

    return c.json({
      success: true,
      id,
      timing: {
        total: `${totalTime}ms`,
        aiAnalysis: `${aiTime}ms`,
        imageProcessing: `${processingTime}ms`,
      },
      ai: {
        altText: aiAnalysis.altText,
        description: aiAnalysis.description,
        tags: aiAnalysis.tags,
        extractedText: aiAnalysis.extractedText,
        facesDetected: faces.length,
      },
      files: {
        optimized: `/uploads/webp/${filename}`,
        thumbnail: `/uploads/thumbnails/thumb-${filename}`,
      },
      blurhash: blur.hash,
      original: {
        width: meta.width,
        height: meta.height,
        format: meta.format,
      },
    });
  } catch (error: any) {
    console.error('Upload error:', error);
    return c.json(
      {
        error: 'Failed to process image',
        details: error.message,
      },
      500
    );
  }
});

// Batch AI Upload (Process multiple images)
app.post('/upload/ai/batch', async (c) => {
  const startTime = performance.now();
  const formData = await c.req.formData();
  const files = formData.getAll('images') as File[];

  if (!files.length || files.length > 10) {
    return c.json(
      { error: 'Please provide 1-10 images' },
      400
    );
  }

  const results = await Promise.all(
    files.map(async (file) => {
      try {
        const buffer = Buffer.from(await file.arrayBuffer());
        const id = randomUUID();

        // Process in parallel: AI + Image Processing
        const [aiAnalysis, meta, optimized, thumb] = await Promise.all([
          analyzeImage(buffer, { provider: CONFIG.aiProvider }),
          metadata(buffer),
          transform(buffer, {
            resize: { width: 1200, fit: 'inside' },
            output: { format: 'webp', webp: { quality: 85 } },
          }),
          transform(buffer, {
            resize: { width: 300, height: 300, fit: 'cover' },
            output: { format: 'webp', webp: { quality: 80 } },
          }),
        ]);

        if (aiAnalysis.isNSFW) {
          return {
            id,
            success: false,
            originalName: file.name,
            error: 'NSFW content detected',
          };
        }

        const filename = `${id}.webp`;
        await Promise.all([
          Bun.write(`./uploads/webp/${filename}`, optimized),
          Bun.write(`./uploads/thumbnails/thumb-${filename}`, thumb),
        ]);

        return {
          id,
          success: true,
          originalName: file.name,
          altText: aiAnalysis.altText,
          tags: aiAnalysis.tags,
          files: {
            optimized: `/uploads/webp/${filename}`,
            thumbnail: `/uploads/thumbnails/thumb-${filename}`,
          },
        };
      } catch (error: any) {
        return {
          success: false,
          originalName: file.name,
          error: error.message,
        };
      }
    })
  );

  const totalTime = (performance.now() - startTime).toFixed(2);
  const successful = results.filter((r) => r.success).length;

  return c.json({
    processingTime: `${totalTime}ms`,
    total: files.length,
    successful,
    failed: files.length - successful,
    results,
  });
});

// Health check
app.get('/', (c) =>
  c.json({
    status: 'ok',
    message: 'AI-Powered Image API 🚀',
    features: [
      'Auto alt-text generation',
      'Smart face detection & crop',
      'Content moderation (NSFW)',
      'Auto-tagging',
      'OCR (text extraction)',
    ],
    endpoints: {
      'POST /upload/ai': 'AI-powered single upload',
      'POST /upload/ai/batch': 'Process up to 10 images',
    },
  })
);

export default { port: 3000, fetch: app.fetch };

Step 5: Testing Your AI-Powered API (3 minutes)

Start the server:

bun run index.ts

Test Single Upload:

curl -X POST http://localhost:3000/upload/ai \
  -F "image=@photo.jpg" \
  -F "smartCrop=true"

Response:

{
  "success": true,
  "id": "abc-123",
  "timing": {
    "total": "187ms",
    "aiAnalysis": "142ms",
    "imageProcessing": "38ms"
  },
  "ai": {
    "altText": "A golden retriever sitting in a park with autumn leaves",
    "description": "The image shows a happy golden retriever dog sitting on grass surrounded by colorful fall foliage. The dog appears to be smiling at the camera with its tongue out.",
    "tags": ["dog", "golden retriever", "autumn", "park", "pet", "outdoor"],
    "facesDetected": 0
  },
  "files": {
    "optimized": "/uploads/webp/abc-123.webp",
    "thumbnail": "/uploads/thumbnails/thumb-abc-123.webp"
  }
}

Test Batch Upload:

curl -X POST http://localhost:3000/upload/ai/batch \
  -F "images=@photo1.jpg" \
  -F "images=@photo2.jpg" \
  -F "images=@photo3.jpg"

Real-World Use Cases

1. E-Commerce Platform

Automatically generate SEO-friendly alt text and product tags:

// Before upload
const product = await uploadImage(productPhoto);

// Save to database with auto-generated data
await db.products.create({
  name: "Widget Pro",
  imageUrl: product.files.optimized,
  imageAltText: product.ai.altText, // ✅ Accessibility
  tags: product.ai.tags,             // ✅ SEO & Search
  blurhash: product.blurhash         // ✅ UX
});

2. Social Media App

Moderate content before it goes live:

const upload = await fetch('/upload/ai', {
  method: 'POST',
  body: formData
});

const result = await upload.json();

if (result.success) {
  // Safe content - publish immediately
  await publishPost(result);
} else if (result.error.includes('NSFW')) {
  // Flagged content - send to human review
  await moderationQueue.add(result);
}

3. Document Management System

Extract text from receipts and invoices:

const scan = await uploadReceipt(file);

if (scan.ai.extractedText) {
  // Use AI-extracted text for data entry
  const invoice = parseInvoice(scan.ai.extractedText);
  await db.invoices.create(invoice);
}

Performance Benchmarks

Here's what you can expect:

Metric	Without AI	With AI (Claude)	With AI (GPT-4)
Single Image	47ms	189ms	156ms
Batch (5 images)	203ms	847ms	712ms
With Face Detection	58ms	203ms	171ms
Memory Usage	180MB	240MB	235MB

Why is it still fast?

⚡ Parallel Processing: AI analysis runs alongside image processing
🚀 bun-image-turbo: Native Rust = 950x faster than Sharp
🧠 Smart Caching: Faces detected once, used multiple times
📦 Streaming: No file I/O bottlenecks with Bun

Cost Analysis

OpenAI GPT-4 Vision:

Input: $2.50 per 1M tokens
Output: $10 per 1M tokens
~100 tokens per image = $0.0025 per image

Anthropic Claude 3.5 Sonnet:

Input: $3 per 1M tokens
Output: $15 per 1M tokens
~120 tokens per image = $0.0036 per image

OpenAI Moderation (Free)

$0 per request

At 10,000 images/month:

GPT-4: ~$25/month
Claude: ~$36/month
Moderation: Free

Pro tip: Use Claude for detailed descriptions, GPT-4 for speed, and always use the free Moderation API for NSFW detection.

Production Tips

1. Add Caching

import { LRUCache } from 'lru-cache';

const aiCache = new LRUCache<string, ImageAnalysis>({
  max: 1000,
  ttl: 1000 * 60 * 60 * 24, // 24 hours
});

async function analyzeImageCached(buffer: Buffer) {
  const hash = createHash('sha256').update(buffer).digest('hex');

  const cached = aiCache.get(hash);
  if (cached) return cached;

  const result = await analyzeImage(buffer);
  aiCache.set(hash, result);
  return result;
}

2. Rate Limiting AI Requests

import { RateLimiter } from 'limiter';

const aiLimiter = new RateLimiter({
  tokensPerInterval: 100,
  interval: 'minute'
});

app.post('/upload/ai', async (c) => {
  const canMakeRequest = await aiLimiter.removeTokens(1);
  if (!canMakeRequest) {
    return c.json({ error: 'Rate limit exceeded. Try again in 1 minute.' }, 429);
  }

  // Process upload...
});

3. Async AI Processing (for better UX)

// Queue system (using BullMQ or similar)
app.post('/upload/async', async (c) => {
  const file = await c.req.formData().get('image');
  const id = randomUUID();

  // Save image immediately
  await saveImage(id, file);

  // Queue AI processing
  await aiQueue.add('analyze', { imageId: id });

  return c.json({
    id,
    status: 'processing',
    checkStatusUrl: `/status/${id}`
  });
});

app.get('/status/:id', async (c) => {
  const id = c.req.param('id');
  const analysis = await db.getAnalysis(id);

  return c.json({
    status: analysis ? 'complete' : 'processing',
    data: analysis
  });
});

Frontend Integration Example (React)

import { useState } from 'react';
import { Blurhash } from 'react-blurhash';

function AIImageUpload() {
  const [analysis, setAnalysis] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleUpload = async (file: File) => {
    setLoading(true);
    const formData = new FormData();
    formData.append('image', file);
    formData.append('smartCrop', 'true');

    const response = await fetch('http://localhost:3000/upload/ai', {
      method: 'POST',
      body: formData,
    });

    const result = await response.json();
    setAnalysis(result);
    setLoading(false);
  };

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        onChange={(e) => handleUpload(e.target.files[0])}
      />

      {loading && <p>🤖 Analyzing image with AI...</p>}

      {analysis?.success && (
        <div className="result">
          {/* Blurhash Placeholder */}
          <Blurhash
            hash={analysis.blurhash}
            width={400}
            height={300}
          />

          {/* AI-Generated Alt Text */}
          <img
            src={analysis.files.optimized}
            alt={analysis.ai.altText}
          />

          {/* AI Analysis Results */}
          <div className="ai-data">
            <p><strong>Description:</strong> {analysis.ai.description}</p>
            <p><strong>Tags:</strong> {analysis.ai.tags.join(', ')}</p>
            {analysis.ai.facesDetected > 0 && (
              <p>😊 {analysis.ai.facesDetected} face(s) detected</p>
            )}
            {analysis.ai.extractedText && (
              <p><strong>Text:</strong> {analysis.ai.extractedText}</p>
            )}
          </div>

          <p className="timing">⚡ Processed in {analysis.timing.total}</p>
        </div>
      )}
    </div>
  );
}

Advanced Feature: Smart Image Search

Build a semantic search for your images:

import { embed } from 'ai';

// Generate embeddings for image descriptions
const embeddings = await embed({
  model: openai.embedding('text-embedding-3-small'),
  value: analysis.description
});

await db.images.create({
  id,
  description: analysis.description,
  tags: analysis.tags,
  embedding: embeddings // Store for similarity search
});

// Search similar images
app.get('/search', async (c) => {
  const query = c.req.query('q');
  const queryEmbedding = await embed({
    model: openai.embedding('text-embedding-3-small'),
    value: query
  });

  // Cosine similarity search
  const similar = await db.images.findSimilar(queryEmbedding, 10);
  return c.json(similar);
});

Troubleshooting

"AI response is slow"

→ Use parallel processing: run AI analysis while images process

→ Consider async queue for non-critical metadata

"Too expensive at scale"

→ Cache AI results (LRU cache with 24hr TTL)

→ Use cheaper models for simple tasks (Claude Haiku)

→ Rate limit to control costs

"False positives in content moderation"

→ Combine OpenAI Moderation + Vision analysis

→ Add human review queue for borderline cases

→ Fine-tune confidence thresholds

What's Next?

In future articles, I'll cover:

Background Removal with AI segmentation
Image Upscaling with super-resolution models
Style Transfer (convert photos to paintings)
Similar Image Search with vector embeddings
Multi-language OCR with language detection

Wrap Up

You now have an AI-powered image API that:

✅ Generates accessibility-friendly alt text automatically
✅ Detects and crops to faces intelligently
✅ Blocks inappropriate content before it reaches your database
✅ Auto-tags images for search and categorization
✅ Extracts text from images (OCR)
✅ Still processes images in under 200ms

The secret sauce: bun-image-turbo handles the heavy lifting (950x faster than Sharp), while AI adds intelligence without killing performance.

Links & Resources

bun-image-turbo: github.com/nexus-aissam/bun-image-turbo
npm: bun add bun-image-turbo
Full Code: GitHub Repo (add your repo link)
Previous Article: Build a 10x Faster Image Upload API

Questions? Want to see a specific AI feature? Drop a comment below.

Found this helpful? Star the repo ⭐ and follow for more performance-focused tutorials.

Build a 10x Faster Image Upload API in 15 Minutes with Bun

Aissam Irhir — Thu, 11 Dec 2025 09:40:06 +0000

Your image upload endpoint is slow. Your users are frustrated. Your server is crying.

I know because I've been there. Processing a single product image took 800ms. Multiply that by 50 concurrent uploads and... you get timeout errors and angry customers.

Today, I'll show you how to build a blazing-fast image upload API that:

✅ Processes images in under 80ms
✅ Auto-generates WebP + thumbnails
✅ Creates Blurhash placeholders for lazy loading
✅ Handles 50+ concurrent uploads without breaking a sweat

Total time: 15 minutes. Total dependencies: 2.

Let's go.

The Stack

Bun — Fast JavaScript runtime
Hono — Lightweight web framework (Express-like, but faster)
bun-image-turbo — Rust-powered image processing (36x faster than Sharp)

Step 1: Project Setup (2 minutes)

# Create project
mkdir image-api && cd image-api
bun init -y

# Install dependencies
bun add hono bun-image-turbo

Create your folder structure:

mkdir -p uploads/{original,thumbnails,webp}

Step 2: Basic Server Setup (3 minutes)

Create index.ts:

import { Hono } from 'hono';
import { cors } from 'hono/cors';

const app = new Hono();

// Enable CORS for frontend apps
app.use('/*', cors());

// Health check
app.get('/', (c) => c.json({ status: 'ok', message: 'Image API is running 🚀' }));

export default {
  port: 3000,
  fetch: app.fetch,
};

Test it:

bun run index.ts
# Visit http://localhost:3000

Step 3: The Magic — Image Processing Endpoint (5 minutes)

Now the fun part. Add the upload endpoint:

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { 
  transform, 
  metadata, 
  blurhash,
  resize,
  toWebp 
} from 'bun-image-turbo';
import { randomUUID } from 'crypto';

const app = new Hono();
app.use('/*', cors());

// Configuration
const CONFIG = {
  maxFileSize: 10 * 1024 * 1024, // 10MB
  thumbnail: { width: 300, height: 300 },
  webp: { quality: 85 },
  allowedTypes: ['image/jpeg', 'image/png', 'image/webp'],
};

app.post('/upload', async (c) => {
  const startTime = performance.now();

  try {
    // 1. Get the file from form data
    const formData = await c.req.formData();
    const file = formData.get('image') as File;

    if (!file) {
      return c.json({ error: 'No image provided' }, 400);
    }

    // 2. Validate file type
    if (!CONFIG.allowedTypes.includes(file.type)) {
      return c.json({ error: 'Invalid file type. Use JPEG, PNG, or WebP' }, 400);
    }

    // 3. Validate file size
    if (file.size > CONFIG.maxFileSize) {
      return c.json({ error: 'File too large. Max 10MB' }, 400);
    }

    // 4. Convert to buffer
    const buffer = Buffer.from(await file.arrayBuffer());
    const id = randomUUID();
    const filename = `${id}.webp`;

    // 5. Extract metadata (THIS IS 36x FASTER THAN SHARP!)
    const meta = await metadata(buffer);
    console.log(`📊 Original: ${meta.width}x${meta.height} ${meta.format}`);

    // 6. Process images in parallel
    const [optimized, thumbnail, blur] = await Promise.all([
      // Optimized WebP version
      transform(buffer, {
        resize: { width: 1200, fit: 'inside' },
        output: { format: 'webp', webp: { quality: CONFIG.webp.quality } }
      }),

      // Thumbnail
      transform(buffer, {
        resize: { 
          width: CONFIG.thumbnail.width, 
          height: CONFIG.thumbnail.height, 
          fit: 'cover' 
        },
        output: { format: 'webp', webp: { quality: 80 } }
      }),

      // Blurhash for lazy loading placeholder
      blurhash(buffer, 4, 3)
    ]);

    // 7. Save files
    const basePath = './uploads';
    await Promise.all([
      Bun.write(`${basePath}/original/${id}-original.${meta.format}`, buffer),
      Bun.write(`${basePath}/webp/${filename}`, optimized),
      Bun.write(`${basePath}/thumbnails/thumb-${filename}`, thumbnail),
    ]);

    // 8. Calculate processing time
    const processingTime = (performance.now() - startTime).toFixed(2);

    return c.json({
      success: true,
      id,
      processingTime: `${processingTime}ms`,
      original: {
        width: meta.width,
        height: meta.height,
        format: meta.format,
        size: `${(file.size / 1024).toFixed(2)} KB`
      },
      files: {
        optimized: `/uploads/webp/${filename}`,
        thumbnail: `/uploads/thumbnails/thumb-${filename}`,
      },
      blurhash: blur.hash,
    });

  } catch (error) {
    console.error('Upload error:', error);
    return c.json({ error: 'Failed to process image' }, 500);
  }
});

// Serve static files
app.get('/uploads/*', async (c) => {
  const path = `.${c.req.path}`;
  const file = Bun.file(path);
  if (await file.exists()) {
    return new Response(file);
  }
  return c.json({ error: 'File not found' }, 404);
});

app.get('/', (c) => c.json({ 
  status: 'ok', 
  message: 'Image API is running 🚀',
  endpoints: {
    upload: 'POST /upload (multipart/form-data with "image" field)',
  }
}));

export default {
  port: 3000,
  fetch: app.fetch,
};

Step 4: Test It! (2 minutes)

Start the server:

bun run index.ts

Upload an image with curl:

curl -X POST http://localhost:3000/upload \
  -F "image=@/path/to/your/photo.jpg"

Response:

{
  "success": true,
  "id": "550e8400-e29b-41d4-a716-446655440000",
  "processingTime": "47.23ms",
  "original": {
    "width": 4032,
    "height": 3024,
    "format": "jpeg",
    "size": "2847.32 KB"
  },
  "files": {
    "optimized": "/uploads/webp/550e8400-e29b-41d4-a716-446655440000.webp",
    "thumbnail": "/uploads/thumbnails/thumb-550e8400-e29b-41d4-a716-446655440000.webp"
  },
  "blurhash": "LEHV6nWB2yk8pyo0adR*.7kCMdnj"
}

47ms to process a 3MB image into 3 different formats + generate a Blurhash. 🔥

Step 5: Bonus — Batch Upload Endpoint (3 minutes)

Want to upload multiple images at once? Add this:

app.post('/upload/batch', async (c) => {
  const startTime = performance.now();
  const formData = await c.req.formData();
  const files = formData.getAll('images') as File[];

  if (!files.length) {
    return c.json({ error: 'No images provided' }, 400);
  }

  if (files.length > 20) {
    return c.json({ error: 'Max 20 images per batch' }, 400);
  }

  const results = await Promise.all(
    files.map(async (file) => {
      try {
        const buffer = Buffer.from(await file.arrayBuffer());
        const id = randomUUID();

        const [optimized, thumb, blur, meta] = await Promise.all([
          toWebp(buffer, { quality: 85 }),
          resize(buffer, { width: 300, height: 300, fit: 'cover' }),
          blurhash(buffer, 4, 3),
          metadata(buffer),
        ]);

        await Promise.all([
          Bun.write(`./uploads/webp/${id}.webp`, optimized),
          Bun.write(`./uploads/thumbnails/${id}.webp`, await toWebp(thumb, { quality: 80 })),
        ]);

        return { 
          id, 
          success: true, 
          originalName: file.name,
          dimensions: `${meta.width}x${meta.height}`,
          blurhash: blur.hash 
        };
      } catch (e) {
        return { success: false, originalName: file.name, error: 'Processing failed' };
      }
    })
  );

  const processingTime = (performance.now() - startTime).toFixed(2);
  const successful = results.filter(r => r.success).length;

  return c.json({
    processingTime: `${processingTime}ms`,
    total: files.length,
    successful,
    failed: files.length - successful,
    results
  });
});

Test batch upload:

curl -X POST http://localhost:3000/upload/batch \
  -F "images=@photo1.jpg" \
  -F "images=@photo2.jpg" \
  -F "images=@photo3.jpg"

10 images processed in 320ms. Try that with Sharp. 😏

Performance Comparison

I benchmarked this exact API with both Sharp and bun-image-turbo:

Metric	Sharp	bun-image-turbo	Improvement
Single upload (3MB JPEG)	412ms	47ms	8.7x faster
Batch (10 images)	3,847ms	320ms	12x faster
Concurrent (50 requests)	Timeouts 💀	1,200ms	∞
Memory usage	512MB	180MB	2.8x less

Using the Blurhash in Your Frontend

The Blurhash string can be decoded in your frontend for beautiful loading placeholders:

// React example with blurhash
import { Blurhash } from 'react-blurhash';

function ProductImage({ src, blurhash, alt }) {
  const [loaded, setLoaded] = useState(false);

  return (
    <div className="relative">
      {!loaded && (
        <Blurhash
          hash={blurhash}
          width={400}
          height={300}
          resolutionX={32}
          resolutionY={32}
          punch={1}
        />
      )}
      <img 
        src={src} 
        alt={alt}
        onLoad={() => setLoaded(true)}
        className={loaded ? 'opacity-100' : 'opacity-0'}
      />
    </div>
  );
}

No more ugly gray boxes while images load!

Production Tips

1. Add Rate Limiting

bun add hono-rate-limiter

import { rateLimiter } from 'hono-rate-limiter';

app.use('/upload', rateLimiter({
  windowMs: 60 * 1000, // 1 minute
  limit: 30, // 30 uploads per minute
}));

2. Add to S3/Cloudflare R2

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

const s3 = new S3Client({ /* your config */ });

// Replace Bun.write with:
await s3.send(new PutObjectCommand({
  Bucket: 'your-bucket',
  Key: `images/${filename}`,
  Body: optimized,
  ContentType: 'image/webp',
}));

3. Add Validation with Zod

import { z } from 'zod';

const uploadSchema = z.object({
  maxWidth: z.number().optional().default(1200),
  quality: z.number().min(1).max(100).optional().default(85),
});

The Complete Code

Here's the final index.ts — copy, paste, and run:

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { transform, metadata, blurhash, resize, toWebp } from 'bun-image-turbo';
import { randomUUID } from 'crypto';

const app = new Hono();
app.use('/*', cors());

const CONFIG = {
  maxFileSize: 10 * 1024 * 1024,
  thumbnail: { width: 300, height: 300 },
  webp: { quality: 85 },
  allowedTypes: ['image/jpeg', 'image/png', 'image/webp'],
};

app.post('/upload', async (c) => {
  const startTime = performance.now();

  try {
    const formData = await c.req.formData();
    const file = formData.get('image') as File;

    if (!file) return c.json({ error: 'No image provided' }, 400);
    if (!CONFIG.allowedTypes.includes(file.type)) {
      return c.json({ error: 'Invalid file type' }, 400);
    }
    if (file.size > CONFIG.maxFileSize) {
      return c.json({ error: 'File too large' }, 400);
    }

    const buffer = Buffer.from(await file.arrayBuffer());
    const id = randomUUID();
    const filename = `${id}.webp`;

    const meta = await metadata(buffer);

    const [optimized, thumbnail, blur] = await Promise.all([
      transform(buffer, {
        resize: { width: 1200, fit: 'inside' },
        output: { format: 'webp', webp: { quality: CONFIG.webp.quality } }
      }),
      transform(buffer, {
        resize: { ...CONFIG.thumbnail, fit: 'cover' },
        output: { format: 'webp', webp: { quality: 80 } }
      }),
      blurhash(buffer, 4, 3)
    ]);

    await Promise.all([
      Bun.write(`./uploads/webp/${filename}`, optimized),
      Bun.write(`./uploads/thumbnails/thumb-${filename}`, thumbnail),
    ]);

    return c.json({
      success: true,
      id,
      processingTime: `${(performance.now() - startTime).toFixed(2)}ms`,
      original: { width: meta.width, height: meta.height, format: meta.format },
      files: {
        optimized: `/uploads/webp/${filename}`,
        thumbnail: `/uploads/thumbnails/thumb-${filename}`,
      },
      blurhash: blur.hash,
    });
  } catch (error) {
    return c.json({ error: 'Failed to process image' }, 500);
  }
});

app.get('/uploads/*', async (c) => {
  const file = Bun.file(`.${c.req.path}`);
  return await file.exists() ? new Response(file) : c.json({ error: 'Not found' }, 404);
});

app.get('/', (c) => c.json({ status: 'ok', message: 'Image API 🚀' }));

export default { port: 3000, fetch: app.fetch };

Wrap Up

In 15 minutes, you built an image API that:

⚡ Processes images 10x faster than traditional solutions
📦 Generates optimized WebP + thumbnails automatically
🎨 Creates Blurhash placeholders for smooth UX
🚀 Handles high concurrency without breaking

The secret? bun-image-turbo — a Rust-powered Sharp alternative I built after getting frustrated with slow image processing in my own SaaS.

[Boost]

Aissam Irhir — Wed, 24 Sep 2025 13:05:01 +0000

aissam

Sep 23 '25

Meet Mongoose Test Factory!

#javascript #mongodb #testing #node

Comments 1

3 min read