Previously, I shared an article on using Cloudflare Worker to process images. However, due to the limitations of the free version of Worker, which only allows for 10ms of CPU usage, there were frequent resource overages and high failure rates. Today, I had some free time, so I decided to try using Vercel Edge instead and share my findings with those who are interested.
The official version of Vercel also supports image processing, but it has a limit of 1000 original images per month and only supports scaling. By using Vercel Edge to process images, you can have additional features such as scaling, cropping, watermarking, and filters. However, please note that the free version of Vercel only allows for 100GB of monthly traffic, so it is recommended to use it in conjunction with a CDN for actual usage.
Supported features:
- Support for processing PNG, JPG, BMP, ICO, and TIFF format images
- Output images in JPG, PNG, and WEBP formats, with WEBP being the default
- Support for pipelining, allowing for multiple operations to be performed
- Support for whitelisting image URLs to prevent abuse
- Graceful degradation in case of processing failure, returning the original image (exceptions are not cached)
Demo
Format Conversion
WEBP
JPG
PNG
Scaling
Rotation
Cropping
Filters
Image Watermark
Text Watermark
Pipelining
Scaling + Rotation + Text Watermark
Scaling + Image Watermark
In theory, it supports various operations available in Photon. If you are interested, you can check the image URLs and modify the parameters according to the Photon documentation to try it out yourself. If you encounter any issues, please leave a comment and provide feedback.
Sharing
I have open-sourced this solution on my GitHub repository, and you can deploy it by following the documentation.
