Blueprint

System Data Flow

Entry Point

Process Node

Data Store

Output

Productionv1.0.0

The Edge Image Negotiator

Performance / Edge

A Cloudflare Worker that intercepts every image request at the edge and serves the smallest possible format (AVIF → WebP → JPEG) based on the browser's declared capabilities — before the request ever reaches the origin.

Logic Breakdown

On each incoming request the worker reads the `Accept` header to determine the most efficient format the client can decode. It injects a `cf.image` transformation object into the re-issued fetch, delegating encoding and resizing to Cloudflare's edge pipeline. The origin never sees an un-optimised request, and the response is cached at the nearest PoP for 24 hours.

Architecture Decisions

01Request intercepted at the nearest Cloudflare PoP — zero origin round-trips for cached assets.
02Accept header inspected to negotiate AVIF (smallest), WebP, or JPEG fallback.
03Cloudflare `cf.image` object delegates transformation to the CF Images pipeline at the edge.
04Response served with `Cache-Control: public, max-age=86400` to maximise CDN hit-rate.

Code Snippet

typescript

the-edge-image-negotiator.ts

// Cloudflare Worker: Next-Gen Image Negotiation
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const accept = request.headers.get("Accept");

    // Determine optimal format based on 'Accept' header
    let format = "auto";
    if (accept?.includes("image/avif")) format = "avif";
    else if (accept?.includes("image/webp")) format = "webp";

    // Request transformed image from Cloudflare Images / Polish
    const imageRequest = new Request(url, {
      cf: { image: { format, quality: 85, fit: "scale-down" } }
    });

    return fetch(imageRequest);
  }
}

Key Dependencies

@cloudflare/workers-types^4.0.0TypeScript bindings for CF Workers runtime

Fetch API (native)—Edge request / response interface

Cloudflare ImagesmanagedEdge image transformation pipeline

Known Limitations

AVIF encoding is CPU-intensive; first-request latency may spike on cold PoPs.
`cf.image` requires a Cloudflare Pro plan or higher.

Technical Spec

Language: TypeScript
Runtime: Cloudflare Workers
Protocol: HTTP/2 + Accept Header
Formats: AVIF · WebP · JPEG
CDN: Cloudflare Global Network
Cache TTL: 86400s (24 h)
Quality: 85 / scale-down
Status: Production