OG Image Generation: Cloudflare Workers vs Vercel
Cloudflare Workers and Vercel both offer serverless functions that can generate Open Graph images, but they differ in key ways: Cloudflare uses the Workers runtime with its own image resizing and caching, while Vercel provides a higher-level framework with built-in edge functions and a generous free tier. This article compares the two platforms for generating dynamic OG images, covering setup, performance, cost, and limitations, so you can choose the right one for your project.
What Are Open Graph Images and Why Generate Them Dynamically?
Open Graph (OG) images are the preview thumbnails shown when a link is shared on social media, messaging apps, or search engines. Static OG images work for simple pages, but dynamic generation lets you create a unique image for each URL—showing the article title, author, thumbnail, or other metadata. This improves click-through rates and makes shared links look polished.
Dynamic OG images are typically generated by a serverless function that receives the page URL or parameters, renders an HTML/CSS template to an image (using a headless browser or an image library), and returns the PNG or JPEG. The function must run fast (ideally under a second) and be cached so it doesn’t re-render on every request.
How Cloudflare Workers Handle OG Image Generation
Cloudflare Workers run JavaScript at the edge, on Cloudflare’s global network. To generate OG images, you can use the @cloudflare/puppeteer library, which connects to a remote browser instance via the Workers Browser Rendering API. This API is available on the Paid plan ($5/month minimum) and requires you to enable the feature in the dashboard. Alternatively, you can use a lightweight library like sharp to composite images from SVG or PNG buffers, which is faster and cheaper but less flexible for complex layouts.
Cloudflare’s edge network means the function runs close to the user, reducing latency. However, the Browser Rendering API has a cold start of a few seconds, so you must cache the generated images aggressively using Cloudflare’s Cache API or a KV store. Cloudflare also offers built-in image resizing and optimization, which can be applied to the output.
How Vercel Handles OG Image Generation
Vercel provides a higher-level platform for Next.js and other frameworks. The recommended approach is to use the @vercel/og library, which uses Satori (a pure JavaScript HTML/CSS-to-SVG renderer) and then converts the SVG to PNG using resvg. This runs in Vercel Edge Functions, which are also deployed globally. The library is designed to be fast—typically under 200ms—and doesn’t require a headless browser, so cold starts are minimal.
Vercel Edge Functions are available on the Hobby (free) plan, with a limit of 100,000 requests per month. You can also use Vercel’s built-in caching by setting the Cache-Control header. The platform integrates seamlessly with Next.js, so you can define an API route or a page that returns the image.
Comparing Performance, Cost, and Developer Experience
Performance: Vercel’s @vercel/og is generally faster than Cloudflare’s Browser Rendering because it avoids launching a full browser. Cloudflare’s sharp-based approach can be fast, but it’s limited to simple compositions. For complex layouts, Vercel’s Satori is also fast and more flexible than sharp.
Cost: Cloudflare’s Workers Paid plan costs $5/month, which includes 10 million requests and the Browser Rendering API (with an additional per-request fee). Vercel’s Hobby plan is free for up to 100,000 edge function invocations per month, but beyond that you need the Pro plan ($20/month per member). For high traffic, Cloudflare may be cheaper, but for low traffic, Vercel’s free tier is attractive.
Developer Experience: Vercel offers a more integrated experience if you’re already using Next.js. The @vercel/og library is well-documented and works with TypeScript out of the box. Cloudflare has a steeper learning curve, especially if you need to set up the Browser Rendering API, but it’s flexible for non-Next.js projects.
Common Problems and How to Avoid Them
- Slow cold starts on Cloudflare’s Browser Rendering: Mitigate by using a warm-up cron job or caching the first response.
- Large image sizes causing timeouts: Keep templates simple and use WebP or JPEG instead of PNG when possible.
- Font loading issues in Satori: You must fetch fonts and pass them to
@vercel/og; otherwise, text may not render. - Cache invalidation when content changes: Use a cache key that includes the content hash or version.
- Rate limiting on free tiers: Monitor usage and set up alerts to avoid unexpected charges.
How to Choose Between Cloudflare Workers and Vercel
Consider these factors when deciding:
- Your stack: If you’re on Next.js, Vercel is the natural choice. If you use a different framework or want edge functions without a platform lock-in, Cloudflare is more agnostic.
- Traffic volume: For very high traffic, Cloudflare’s flat pricing may be more predictable. For low traffic, Vercel’s free tier is cost-effective.
- Complexity of images: If you need to render full HTML with complex CSS, Cloudflare’s browser approach is more powerful. For simple cards, Vercel’s Satori is sufficient.
- Latency requirements: Both have edge networks, but Vercel’s Satori is faster in practice.
- Budget: Vercel’s free tier is generous, but Cloudflare’s $5/month includes a lot of requests.
Alternatives and Related Tools
Other options include using a dedicated service like imgix or Cloudinary, which offer dynamic OG image generation as a managed feature. These can be simpler but come with per-image costs. You can also generate images at build time using a script, but that doesn’t work for pages with dynamic data. For self-hosted solutions, you could run a headless browser on a server, but that requires more maintenance.
Frequently Asked Questions
Can I use Cloudflare Workers for free to generate OG images?
Yes, you can use the Workers free tier (100,000 requests/day) with a sharp-based approach, but the Browser Rendering API requires a paid plan. The free tier is enough for low-traffic sites.
Does Vercel’s free tier include OG image generation?
Yes, the Hobby plan includes 100,000 edge function invocations per month, which covers OG image generation. After that, you need to upgrade to Pro.
Which is faster for OG images: Cloudflare Workers or Vercel?
Vercel’s @vercel/og is typically faster because it uses Satori, which doesn’t launch a browser. Cloudflare’s Browser Rendering has a cold start, but you can mitigate with caching.
Can I use @vercel/og on Cloudflare Workers?
No, @vercel/og is designed for Vercel Edge Functions and relies on Vercel’s runtime. However, you can use Satori and resvg directly on Cloudflare Workers, as they are pure JavaScript libraries.
How do I cache OG images to avoid re-generating them?
Set the Cache-Control header to a long max-age (e.g., public, max-age=86400) on the response. Both platforms respect this header, and you can also use a CDN cache or a KV store to store the generated image bytes.
What is the best format for OG images?
PNG is the most compatible, but JPEG or WebP can be smaller in size. Social platforms accept JPEG and PNG; WebP is supported by some but not all. Use PNG for text-heavy images to avoid compression artifacts.
Related
Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.