---
canonical: 'https://htmlcsstoimage.com/compare/vercel-og'
title: 'HTML/CSS to Image vs Vercel OG: Features & Costs'
description: 'Vercel OG (@vercel/og) turns JSX into PNGs using flexbox and a subset of CSS. HTML/CSS to Image renders complete HTML/CSS, with templates and hosting.'
---

# HTML/CSS to Image vs Vercel OG

Vercel OG draws Open Graph images from JSX using flexbox and a subset of CSS. HTML/CSS to Image renders your complete HTML/CSS, with templates, hosting, and URL screenshots built in.

[View this comparison on the website](https://htmlcsstoimage.com/compare/vercel-og)

## The short answer

**Choose HTML/CSS to Image if:**

- Your design needs more than flexbox: grid, z-index, calc, or WOFF2 fonts.
- You want to render the HTML/CSS you already have, not rewrite it as Satori JSX.
- You want managed image hosting, or also need URL screenshots or PDFs.
- People outside engineering should be able to change designs without a deploy.

**Choose Vercel OG if:**

- You're on Next.js and Vercel, and your cards are simple flex layouts.
- You'd rather pay for function compute than per image.

## Where they overlap

Both turn markup into Open Graph images on request. Both return a PNG you can point `og:image` at, and both are built for generating many variations of a design from data like a title or an author.

## What Vercel OG does well

It's close to your code. In the Next.js App Router, `ImageResponse` is already included: write JSX, return an image from a route, and Vercel caches the response for a year by default. For a card with a title, an avatar, and a logo, that can be all you need.

## Where Satori's CSS runs out

Vercel OG doesn't use a browser. Satori converts your JSX to SVG, then Resvg converts that to PNG, so only a subset of CSS works:

- Flexbox only: `display: grid` won't work, and there's no `z-index` or `calc`.
- Only Noto Sans is built in. Load other fonts as TTF, OTF, or WOFF data. WOFF2 isn't supported.
- No `<script>`, `<link>`, or React state. Explicit image dimensions are recommended.
- A 500KB bundle limit covers your JSX, CSS, fonts, and images together.

Satori also notes that its output isn't guaranteed to match what a browser renders.

## Rendering the HTML you already have

HTML/CSS to Image renders HTML/CSS with a full browser engine, including grid layouts, Google Fonts loaded by name, and JavaScript that runs before the capture. The components and styles from your site work as they are, without rewriting them for Satori.

It also captures live URLs, creates PDFs, and keeps each image at a hosted URL, and saved templates and the visual editor let people change a design without a deploy. It's an HTTP API, so it works the same from any stack, on Vercel or not.

## Pricing

The @vercel/og package is free under the MPL-2.0 license. On Vercel, you pay for function compute: Hobby includes 4 hours of Active CPU and 1 million invocations a month, and on Pro, invocations cost $0.60 per million plus CPU and memory priced by region. Default caching reduces how often your function runs.

HTML/CSS to Image charges per created image, with hosting included.

### Getting started

**HTML/CSS to Image:** $14/month for 1,000 images on Basic.

Includes templates, the visual editor, and hosted image delivery. A free plan includes 50 images per month.

**Vercel OG:** Free library. Vercel Hobby includes 4 hours of Active CPU and 1 million invocations a month.

Low-volume cards may fit within an existing Vercel plan.

### A production image service

**HTML/CSS to Image:** $69/month for 10,000 images on Basic.

Optional overages cost $10 per 1,000 images. Includes templates, hosted image delivery, storage destinations, and bring-your-own proxies at this volume.

**Vercel OG:** Vercel Pro compute: $0.60 per million invocations, plus Active CPU and memory priced by region.

Per-image cost depends on render time and how often the cache serves a request.

## Common questions

### What CSS does Vercel OG support?

Vercel OG uses Satori, which supports flexbox and a subset of CSS. display: grid, z-index, calc, and 3D transforms aren't supported, and fonts must be TTF, OTF, or WOFF. HTML/CSS to Image renders HTML/CSS with a full browser engine.

### Can I use @vercel/og outside Vercel?

Yes. It supports Node.js, including self-hosted Next.js apps using ImageResponse. Your deployment handles hosting and delivery. HTML/CSS to Image includes both through its API.

### Is Vercel OG free?

The @vercel/og package is free under the MPL-2.0 license. On Vercel, you pay for function compute, and default caching keeps repeat requests off your function.

### What's the best Vercel OG alternative?

If your design needs full CSS, existing HTML, or editing outside of code, HTML/CSS to Image. It renders complete HTML/CSS, hosts the images, and generates Open Graph images from templates and signed URLs.

## Comparison details

### Layout and CSS support

**HTML/CSS to Image:** Render HTML/CSS with a full Chromium browser engine, including grid, z-index, calc(), box-shadow, filters, and web fonts.

Send your HTML/CSS directly or capture a webpage URL, using the same browser rendering model as your site.

**Vercel OG:** Supports flexbox and a subset of CSS. display: grid, z-index, calc, and 3D transforms aren't supported.

Satori doesn't guarantee its output matches browser rendering.

HCTI renders HTML/CSS with a full browser engine.

### Image hosting and reuse

**HTML/CSS to Image:** Hosting and CDN delivery are included. Application-level caching keeps an existing image URL reusable, even after a CDN cache miss, without consuming another image credit.

Paid plans keep images while your account is active. Custom-storage-only images use your own delivery.

**Vercel OG:** Responses are cached with an immutable, one-year Cache-Control header by default.

Your deployment supplies the image route, hosting, and delivery.

HCTI includes hosted image URLs without maintaining an endpoint.

## Research and sources

Last reviewed: 2026-09-30

Reviewed Vercel's OG image generation documentation, the @vercel/og API reference, the Satori README, Next.js ImageResponse and self-hosting documentation, and Vercel Functions pricing alongside HCTI documentation. This compares a self-run rendering library with an image API, not rendering speed or visual quality. No comparative renders or cost measurements were performed.

- [Vercel OG image generation](https://vercel.com/docs/og-image-generation) (checked 2026-09-30)
- [HCTI API reference](https://docs.htmlcsstoimage.com/getting-started/using-the-api/) (checked 2026-09-22)
- [HCTI render readiness](https://docs.htmlcsstoimage.com/parameters/render_when_ready/) (checked 2026-09-22)
- [@vercel/og API reference](https://vercel.com/docs/og-image-generation/og-image-api) (checked 2026-09-30)
- [Next.js ImageResponse](https://nextjs.org/docs/app/api-reference/functions/image-response) (checked 2026-09-30)
- [Next.js self-hosting](https://nextjs.org/docs/app/guides/self-hosting) (checked 2026-09-30)
- [Satori README and CSS support](https://github.com/vercel/satori) (checked 2026-09-30)
- [HCTI image templates](https://docs.htmlcsstoimage.com/getting-started/templates/) (checked 2026-09-22)
- [HCTI template editor](https://docs.htmlcsstoimage.com/template-editor/) (checked 2026-09-22)
- [HCTI plans and pricing](https://htmlcsstoimage.com/pricing) (checked 2026-09-30)
- [HCTI storage destinations](https://docs.htmlcsstoimage.com/guides/advanced/storage-destinations/) (checked 2026-09-22)
- [Vercel Functions usage and pricing](https://vercel.com/docs/functions/usage-and-pricing) (checked 2026-09-30)

## Try it out

[Try the live image demo](https://htmlcsstoimage.com/compare/vercel-og#demo)

## Related comparisons

- [HTML/CSS to Image vs Playwright](https://htmlcsstoimage.com/compare/playwright.md)
- [HTML/CSS to Image vs html2canvas](https://htmlcsstoimage.com/compare/html2canvas.md)
- [HTML/CSS to Image vs Cloudflare Browser Run](https://htmlcsstoimage.com/compare/cloudflare-browser-run.md)
- [HTML/CSS to Image vs html2img.com](https://htmlcsstoimage.com/compare/html2img.md)
- [HTML/CSS to Image vs APITemplate.io](https://htmlcsstoimage.com/compare/apitemplateio.md)
- [HTML/CSS to Image vs ApiFlash](https://htmlcsstoimage.com/compare/apiflash.md)

## Get started

[Start creating free](https://htmlcsstoimage.com/join) · [Pricing](https://htmlcsstoimage.com/pricing.md) · [Documentation](https://docs.htmlcsstoimage.com)

We tried to make this an honest and fair comparison. We last updated the details on September 30, 2026. If you represent Vercel OG and want to correct the record, please [email us](mailto:support@htmlcsstoimage.com).