edgesharp

Cloudflare-native image optimization for Next.js

This page, the source images, and the /_next/image API are all served by the same Cloudflare Worker. Every <Image> below is an unmodified next/image component — only the loader changed. The browser fetches each variant from the same origin; the Worker decodes, Lanczos-resizes, and re-encodes via Zig WASM SIMD on the way out.

Try it · paste any URL, pick any size or format

Live transform running on this Cloudflare Worker. Paste an image URL or pick a sample, change width/quality/format, hit Optimize. The first request encodes via Zig WASM; every repeat serves from cache in single-digit ms.

Source URL

Path-relative URLs (/demo/…) come from this Worker's bundled assets. This demo's ALLOWED_ORIGINS is set to * so any https:// URL works — your production deployment should narrow that to a curated list.

Width640 px

Quality75

Output format

auto negotiates via the Accept header. AVIF is served natively by default; set ENABLE_AVIF=false in the Cloudflare dashboard to fall back to WebP.

/_next/image?url=%2Fdemo%2Fphoto.jpg&w=640&q=75

Original

…

edgesharp

—

Click Optimize to run the pipeline

The integration

1. next.config.mjs

// next.config.mjs — the only file you change.
export default {
  images: {
    loader: 'custom',
    loaderFile: './node_modules/edgesharp/dist/loader.js',
  },
};

2. Use <Image /> as you already do

// app/page.tsx — your <Image> components don't change.
import Image from 'next/image';

<Image src="/photo.jpg" alt="" width={1600} height={1200} />

Same-origin deploy: the loader emits relative URLs, so there's nothing to configure at build time. Drop edgesharp on any domain; your <Image> components stay exactly as written.