I Built a Free OG Image API -- Here's What I Learned
Six weeks ago, I was in Figma at 11 PM on a Tuesday, designing my fourteenth OG image of the week. Same process as always: create a 1200x630 canvas, add a gradient background, type the blog post title, adjust the font size until it fits, export as PNG, upload to my project, update the meta tags. Fifteen minutes per image. Fourteen images. Three and a half hours of my life that week, doing something a computer should be doing.
That was the moment I decided to build ogimg.xyz.
The Problem That Would Not Go Away
I am a solo developer building a portfolio of small SaaS tools. Every product I ship needs a landing page. Every landing page needs OG images. Every blog post needs an OG image. Every documentation page needs one too.
At first, I used Figma templates. It worked for the first 10 images. By image 30, I was cutting corners. By image 50, I was skipping OG images entirely.
I looked at existing solutions:
- Headless browser screenshot services -- Slow (1-3 seconds per image) and expensive to run at scale.
- Design tool APIs -- Pricing starts at $40-50/month. Hard to justify for a solo dev with no revenue.
- @vercel/og -- Excellent, but I did not want to build template code in every project. I wanted a single API.
None of these hit the sweet spot: fast, cheap (ideally free for small usage), and an API callable from any project.
The Technical Decisions
Vercel Edge, Not a Server
The single most important decision was running on Vercel Edge Functions instead of a traditional server. Edge functions execute on Cloudflare's network, close to the user, with near-zero cold starts.
The result: most requests complete in 200-500ms. Fast enough to use as a dynamic og:image URL.
No Headless Browser
I used Satori, Vercel's library that converts React JSX directly to SVG. The SVG then gets rasterized to PNG via Resvg, a Rust-based SVG renderer compiled to WebAssembly.
The pipeline: JSX -> SVG -> PNG. No browser. No DOM. 100-200ms total.
The tradeoff? Limited CSS subset. No position: absolute. No box-shadow. No CSS Grid. Everything Flexbox. This constraint turned out to be a feature -- it forced simpler, cleaner templates.
Template-Based, Not Freeform
I chose curated templates over arbitrary HTML/CSS:
- Performance. Pre-built templates mean predictable rendering.
- Quality floor. Every image looks decent by default.
- Simplicity. Users send template=gradient instead of writing JSX.
10 templates covering gradient backgrounds, minimal text, bold hero-style, documentation, corporate, retro, and more. Each supports 10 background patterns (dots, grid, diagonal lines, waves, hexagons, etc.).
What Surprised Me
Simplicity Wins, Every Time
My initial version had 25 configurable parameters. Nobody used most of them. I stripped it down to about 10 that actually matter: title, description, template, pattern, background color, text color, accent color, site name, author, and logo. Usage immediately went up.
Free Tier Drives Adoption
I offer a free tier: 50 images per month, 4 templates. No credit card required.
Developers are allergic to entering payment information before evaluating a tool. The free tier lets people integrate, see it working, then decide to upgrade.
Edge Rendering Is the Right Architecture
OG images are generated when a social platform's crawler visits a URL. That crawler could be anywhere geographically. Edge rendering means the image is generated at the nearest PoP, so a Facebook crawler in Ireland does not wait for a round trip to us-east-1.
The Honest Numbers
- Development time: About 6 weeks, nights and weekends
- Infrastructure cost: Effectively $0/month. Vercel free tier + Neon PostgreSQL free tier.
- Revenue: Early days. A few paid users on Hobby ($4.90/month). One lifetime purchase ($149).
This is product number one in a larger portfolio. The goal was to build something useful, learn the full stack of launching a SaaS, and have a tool I genuinely use myself.
What I Would Do Differently
- Ship the MVP faster. I spent too long polishing templates before launch.
- Build the visual playground earlier. The interactive playground turned out to be the primary way people discover the product.
- Write integration guides from the start. Developers search for 'Next.js OG images', not 'OG image generation API'.
Try It
If any of this resonates, give ogimg.xyz a try. Free tier, no credit card:
curl "https://ogimg.xyz/api/og?title=Hello+World&template=gradient"&utm_source=devto&utm_medium=article&utm_campaign=wf5 --output og-image.png
Or visit the site and use the visual playground to design something, then copy the URL for your og:image meta tag.
I am building this in public as a solo developer. If you have feedback, I genuinely want to hear it. Drop a comment below.
Thanks for reading. Now go add OG images to that side project you have been meaning to polish.
If you found this interesting, consider leaving a reaction. Building in public is more fun when people are actually watching.
Top comments (1)
bannerbear is $49/mo for 1K credits, you're at $4.90 for the same volume
one /compare/bannerbear page captures "bannerbear alternative" intent - buyers actually trying to leave them - at 10x cheaper. you wrote /compare/vercel-og (clean) but skipped the paid competitor you actually displace. 10 min to find. /templates 404s on top.