og-image
OG Image Generator
Generate Open Graph and social media preview images via html2png.dev.
Standard Sizes
| Platform | Size | Aspect Ratio |
|---|---|---|
| Facebook/LinkedIn | 1200×630 | 1.91:1 |
| Twitter/X | 1200×675 | 1.78:1 (16:9) |
| Twitter Large | 1200×600 | 2:1 |
| Square | 1200×1200 | 1:1 |
Endpoint
POST https://html2png.dev/api/convert
Example
curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&deviceScaleFactor=2" \
-H "Content-Type: text/html" \
-d '<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
</head>
<body class="flex items-center justify-center" style="width: 1200px; height: 630px; font-family: Inter, sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
<div class="text-center text-white px-16">
<h1 class="text-7xl font-extrabold mb-6 leading-tight">How to Build APIs</h1>
<p class="text-3xl opacity-90 mb-8">A complete guide to RESTful design</p>
<div class="flex items-center justify-center gap-4">
<div class="w-16 h-16 rounded-full bg-white/20"></div>
<span class="text-xl">By John Doe · 10 min read</span>
</div>
</div>
</body>
</html>'
Key Elements
Typography:
- Large, bold headline (60-80px)
- Readable subheadline (24-32px)
- High contrast against background
Layout:
- Centered or left-aligned content
- Generous padding (60-100px)
- Clear visual hierarchy
Backgrounds:
- Gradient overlays
- Subtle patterns
- Brand colors
Images:
- Author avatars (circular, 80-120px)
- Logos (top corner or centered)
- Decorative elements (subtle)
CDN Resources
Fonts:
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
rel="stylesheet"
/>
Icons:
<script src="https://unpkg.com/lucide@latest"></script>
Tips
- Always use
deviceScaleFactor=2for crisp text - Use
delay=1000for font loading - Keep text minimal (3-5 words headline max)
- Test at small sizes (images get compressed in feeds)
- Use high contrast for readability
Rate Limits
50 requests/hour per IP.
More from html2png/skills
html-to-image
Generate crisp, high-quality images with perfect typography and precise geometric layouts using HTML/CSS. Use when creating social cards, diagrams, certificates, UI mockups, code screenshots, or any image requiring sharp text rendering, exact alignment, or vector-like precision. AI excels at designing symmetric, pixel-perfect layouts as HTML rather than generating raster images directly. Supports Tailwind CSS, Google Fonts, icon libraries, and any web-based design resource.
111website-screenshot
Capture screenshots of live websites and web pages via API. Use when users need to screenshot a URL, capture website previews, archive web pages, generate thumbnails of sites, or document web content. Ideal for monitoring, archiving, sharing website previews, or creating visual references of web pages.
38code-to-image
Generate beautiful code snippet images with syntax highlighting. Use when users want to share code as an image, create code screenshots for social media, documentation, or presentations. Produces crisp, syntax-highlighted code with customizable themes, window chrome, and professional styling.
13