For an existing Next.js app deployed on Vercel, Vercel’s documented ImageResponse workflow is the most direct way to generate Open Graph images. Cloudflare Workers can also return generated images, but Cloudflare’s @vercel/og integration is documented for Pages Functions—not Workers. If you choose Workers, select a renderer that supports the Workers runtime and test its resource use, fonts, and caching with your actual cards.
There is no established head-to-head performance or cost winner. The practical choice depends on your existing stack, the rendering features you need, and the limits and caching behavior of the implementation.
How the two approaches differ
| Question | Vercel | Cloudflare |
|---|---|---|
| Documented OG-image path | @vercel/og or, in current Next.js App Router examples, ImageResponse from next/og. |
Cloudflare documents @vercel/og as a Pages Functions plugin. Workers can return image responses, but need a Workers-compatible renderer chosen and validated for that runtime. |
| Best fit | An existing Next.js/Vercel application seeking a first-party documented workflow. | An application already running on Workers, if its chosen renderer fits Workers’ runtime limits—or a Pages Functions project using the documented plugin. |
| Key implementation concern | Documented CSS, font, runtime, and bundle constraints. | Renderer compatibility and CPU use, plus explicit caching when using the Images binding. |
Cloudflare’s plugin page identifies the integration as a Pages Functions plugin and says, “This plugin and its underlying Satori ↗︎ library was created by the Vercel team.” Do not treat that Pages recipe as a Workers-specific integration: Cloudflare Pages’ Vercel OG plugin documentation.
Generate OG images with Vercel
Vercel’s OG Image Generation guide describes generating social-card images with @vercel/og and Vercel Functions. In Next.js App Router examples, use ImageResponse from next/og; outside that setup, the guide describes installing @vercel/og. The renderer uses Satori and Resvg to turn HTML/CSS-like markup into PNG images.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute#1 Best Overall
Next.js App Router example
Create an OG-image route such as app/api/og/route.tsx. This example returns a PNG; replace the sample text with data appropriate to your page.
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') ?? 'A useful page title';
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '64px',
background: '#111827',
color: '#ffffff',
fontSize: 64,
fontWeight: 700,
}}
>
{title}
</div>
),
{ width: 1200, height: 630 }
);
}Vercel recommends 1200 × 630 pixels for OG images. Its API reference documents configurable width, height, font data, status, and response headers; the documented defaults include a PNG content type and a long-lived immutable cache header. Confirm the current API and runtime guidance for your project before deployment: Vercel OG Image API reference.
Constraints to check before designing
- CSS: Vercel says only flexbox and a subset of CSS properties are supported; advanced CSS Grid layouts do not work.
- Fonts: The guide lists TTF, OTF, and WOFF as supported font formats. Load only the font files and weights the card needs.
- Bundle size: Vercel states a 500 KB maximum bundle size for the described setup, including JSX, CSS, fonts, images, and other assets.
- Versions and runtimes: The guide states Node.js 22 or newer and Next.js 12.2.3 or newer for the described setup, with runtime caveats varying by Pages Router/App Router and Node.js/Edge configuration. These are documentation requirements, not a claim that every current deployment has identical constraints; recheck the guide for your version.
Keep layouts simple, avoid oversized embedded assets, and verify that the route builds and renders under the runtime you actually deploy.
Generate OG images with Cloudflare
For Pages Functions
If the project uses Cloudflare Pages Functions, Cloudflare’s documented @vercel/og plugin can extract webpage metadata, inject OG metadata, and render arbitrary images through its API. This is the clearest Cloudflare-documented path in the materials covered here, but it is specifically for Pages Functions.
Free tools Windows power users keep installed
One-click scans. No signup required.
For Workers
Cloudflare Workers implement the Fetch API Response interface, so a Worker can return image bytes with an appropriate content type. Cloudflare also documents an Images binding that accepts image and text inputs, supports transformations and overlays, and can encode output formats; its documentation says it accepts image bytes up to 20 MB. That image-processing capability is not by itself a complete HTML/CSS social-card renderer. Cloudflare documents a separate cf.image fetch-subrequest route for image optimization; do not confuse that with manipulating image bytes directly through the binding.
For a Workers-based dynamic card generator, first choose a renderer that is compatible with the Workers runtime, then validate the exact fonts, asset loading, output formats, and layout features your cards require. Cloudflare’s Rust tutorial demonstrates producing a text-to-PNG response with the text-to-png Rust package; it is an example of image generation, not a ready-made dynamic HTML/CSS OG API: Cloudflare Workers text-to-image tutorial.
export default {
async fetch(): Promise<Response> {
const pngBytes = await renderCardSomehow();
return new Response(pngBytes, {
headers: { 'content-type': 'image/png' },
});
},
};renderCardSomehow() is deliberately not presented as a drop-in Workers API: implement it with a renderer validated for Workers rather than assuming the Pages plugin works in a Worker. See Cloudflare’s Workers Response documentation.
Choose based on your app, renderer, and limits
Choose Vercel when
- Your site is already a Next.js app on Vercel and you want the documented
next/ogor@vercel/ogroute. - Your card design fits the documented CSS subset, font formats, and bundle-size constraint.
- You want the documented generated-image cache-header behavior and can use its route and runtime guidance.
Choose Cloudflare when
- Your application already runs on Cloudflare and you are prepared to select and validate a Workers-compatible renderer.
- You use Pages Functions and the documented plugin meets your needs.
- You are using Cloudflare image transformations or overlays and have planned cache behavior for repeated work.
Check Workers resource limits against real renders
Cloudflare’s limits page lists these Workers limits for 2026: Free allows up to 10 ms CPU time per request and 100,000 requests per day; Paid allows up to 5 minutes of CPU time; memory is listed as 128 MB on both plans. These are plan limits, not a prediction of how much CPU a particular renderer or font set will consume. Check the current limits for your account and measure representative cards before relying on the Free allowance: Cloudflare Workers limits.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchRank #3
Plan caching, metadata, and crawler access
Make cache identity match image content
Vercel’s OG guide says generated images are cached at the CDN with appropriate headers; the API reference documents a long-lived immutable cache header by default. If a title, font, theme, or other input changes, make sure your URL or cache strategy distinguishes the new image from the old one.
Cloudflare says Images binding responses are not automatically cached and recommends enabling Workers Cache for repeated transformations. If a Worker generates a card, decide explicitly how to cache its output and how changes to the underlying content invalidate it. See Cloudflare Images binding documentation.
Ensure social crawlers can fetch the image
Expose an absolute, publicly reachable URL in the page’s og:image metadata and return the correct image content type. Vercel’s guide recommends allowing the relevant OG route in robots.txt so social providers can retrieve it. Test the published URL without an authenticated browser session; a page preview that works only while logged in will not establish that a crawler can fetch the image.
Cost and performance: benchmark your own workload
The available platform documentation does not establish a direct Cloudflare-versus-Vercel cost or performance winner. Vercel’s 2022 launch announcement reported a P99 TTFB reduction from 4.96 seconds to 0.99 seconds and a P90 reduction from 4 seconds to 0.75 seconds for its new OG generation versus its previous version using Vercel documentation traffic. That is a vendor-reported comparison of Vercel’s own versions—not an independent benchmark and not a Cloudflare comparison: Vercel’s 2022 announcement.
Recommended Free Tools
For a useful operational comparison, render representative short and long titles, the largest fonts and assets you expect, and the formats and traffic patterns your site will actually use. Record render success, response time, CPU or function usage, cache-hit behavior, and the relevant platform charges. Then check each provider’s current pricing and quotas; do not extrapolate a winner from a different renderer or a single warm-cache request.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common failures
- CSS layout differs from the browser: In Vercel’s renderer, check for unsupported properties or CSS Grid; simplify the design to the documented flexbox subset.
- Font is missing or renders incorrectly: Confirm the font format is supported by the selected path, that the file is available to the route, and that the font data is included within Vercel’s stated bundle constraint where applicable.
- Build or runtime failure: Verify the project’s Next.js and Node.js versions and its router/runtime combination against Vercel’s current guide. For Workers, confirm the renderer is designed for that runtime rather than relying on the Pages-only plugin.
- Cloudflare render exceeds CPU or memory: Reduce expensive layout or image work, trim fonts and assets, and test under the plan’s applicable limits. A plan ceiling does not guarantee a chosen renderer will fit.
- Updated card still shows old content: Check URL parameters and cache keys. Review Vercel’s immutable cache behavior or configure Workers Cache for binding transformations, then use a new image URL or an intentional invalidation strategy when content changes.
- Social preview is missing: Fetch the absolute
og:imageURL as a public request, confirm it returns an image with the right content type, and ensure crawler access is not blocked by authentication or robots rules.
Or skip the browser setup
If your immediate task is capturing a webpage as an image rather than generating a designed OG card from HTML/CSS, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF; it is a screenshot service, not a replacement for custom social-card rendering.
For the full options, see the ScreenshotNeo API documentation. Example cURL request:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie/consent banners and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Sign up free for 1,000 screenshots a month, with no card required.
Frequently Asked Questions
Does Cloudflare’s Vercel OG plugin run on Workers?
Cloudflare documents that plugin for Pages Functions. A Workers implementation needs a renderer compatible with the Workers runtime.
Can a Workers image response be a PNG?
Yes. A Worker can return image bytes with an appropriate content-type header; the renderer that produces those bytes is a separate implementation choice.
Is there a proven faster or cheaper platform for OG images?
No direct Cloudflare-versus-Vercel cost or performance comparison is established here; benchmark the renderer, cache behavior, and workload you plan to deploy.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
