Edge Compute Image Optimization: Dynamic Resizing with Cloudflare Workers

Commercial image CDNs (like Cloudinary or Imgix) are powerful, but they can quickly become expensive as traffic grows. For engineers seeking a cost-effective, custom alternative in 2026, serverless edge compute networks provide a robust alternative.

By deploying a lightweight Cloudflare Worker using its native image resizing APIs, you can build your own dynamic optimization proxy for a fraction of the cost of commercial alternatives. Let's look at how to implement this architecture.

---

1. How Edge Resizing Works

Normally, fetching an image involves a direct round-trip from the client to your origin server (e.g., AWS S3).

With a Cloudflare Worker intercepting the request:

1. The client requests a modified asset (e.g., https://images.yoursite.com/photo.jpg?width=600&format=webp).
2. The Worker executes at the nearest edge node, fetching the original uncompressed file from your origin storage bucket.
3. The Worker applies format optimization (transforming to AVIF or WebP) and resizes it.
4. The edge node caches the optimized asset, ensuring subsequent requests bypass both the origin server and the compute cost.

---

2. Worker Code Implementation

Here is a clean, production-ready TypeScript implementation of an edge image optimizer:

// worker.ts
export default {
  async fetch(request: Request, env: any, ctx: any): Promise<Response> {
    const url = new URL(request.url);

    // Extract query parameters
    const width = parseInt(url.searchParams.get('width') || '0', 10);
    const quality = parseInt(url.searchParams.get('quality') || '85', 10);

    // Auto-negotiate modern formats (AVIF first, fallback WebP)
    const acceptHeader = request.headers.get('accept') || '';
    let format = 'webp';
    if (acceptHeader.includes('image/avif')) {
      format = 'avif';
    }

    // Origin asset path (point this to your bucket URL)
    const originUrl = `https://your-bucket-origin.s3.amazonaws.com${url.pathname}`;

    // Cloudflare-specific image resizing options
    const options: any = {
      cf: {
        image: {
          quality,
          format,
        },
      },
    };

    if (width > 0) {
      options.cf.image.width = width;
    }

    // Fetch from origin with resizing rules applied
    const response = await fetch(originUrl, options);

    // Clone and cache headers
    const newHeaders = new Headers(response.headers);
    newHeaders.set('Cache-Control', 'public, max-age=31536000, immutable');
    newHeaders.set('X-Custom-Optimizer', 'CF-Edge-WASM-v1');

    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: newHeaders,
    });
  },
};

---

3. Advantages & Pricing Math

Building your own worker has clear advantages:

• Cost Control: Cloudflare Workers charge $5 per million requests. Fetching cached optimized assets incurs no compute fees.
• Security: You can easily restrict image sources in the Worker script to prevent bad actors from abusing your resizer to process third-party images.
• No Vendor Lock-In: The edge script works over any static storage provider (S3, Backblaze B2, Google Cloud Storage, or Netlify).