Processing Images with Vercel Edge Functions

In an earlier post on processing images with Cloudflare Workers, I ran into the strict 10 ms CPU execution limit on Cloudflare’s free plan, which frequently timed out on larger photos. I had some free time today, so I ported the Wasm pipeline over to Vercel Edge Functions to see how it performs.

Vercel offers native Image Optimization, but caps free accounts at 1,000 source images per month and only handles resizing. Running our own WebAssembly pipeline on Vercel Edge unlocks resizing, cropping, watermarking, and color filters with much higher transformation headroom. Keep in mind that Vercel’s free plan includes 100GB of monthly bandwidth, so putting a CDN in front in production is a good idea.

Supported features:

1. Ingests PNG, JPG, BMP, ICO, and TIFF inputs.
2. Encodes JPG, PNG, and WebP outputs (WebP is default).
3. Supports pipeline chaining for multiple consecutive actions.
4. Domain whitelist to prevent open-proxy abuse.
5. Graceful fallback: returns the original image on processing failures (errors are not cached).

Demo

Format Conversion

WebP

JPG

PNG

Resizing

Rotation

Cropping

Filters

Image Watermark

Text Watermark

Pipelining

Resize + Rotate + Text Watermark

Resize + Image Watermark

Any operation supported by Photon works. Check the image URL parameters against the Photon documentation to experiment with custom parameters.

Repository

The project is open source on GitHub: