DEV Community

MT
MT

Posted on • Originally published at chi.miantiao.me on

Using Vercel Edge to Process Images

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:

  1. Support for processing PNG, JPG, BMP, ICO, and TIFF format images
  2. Output images in JPG, PNG, and WEBP formats, with WEBP being the default
  3. Support for pipelining, allowing for multiple operations to be performed
  4. Support for whitelisting image URLs to prevent abuse
  5. Graceful degradation in case of processing failure, returning the original image (exceptions are not cached)

Demo

Format Conversion

WEBP

webp

JPG

jpg

PNG

png

Scaling

resize

Rotation

rotate

Cropping

rotate

Filters

filter

Image Watermark

watermark

Text Watermark

draw_text

Pipelining

Scaling + Rotation + Text Watermark

resize & rotate & draw_text

Scaling + Image Watermark

resize & 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.

ccbikai/vercel-edge-image - GitHub


Buy Me A Coffee

stat

Top comments (0)