og-image

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OG Image Generator

OG图片生成器

Generate Open Graph and social media preview images via

html2png.dev

通过

html2png.dev

生成Open Graph及社交媒体预览图片。

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

平台	尺寸	宽高比
Facebook/LinkedIn	1200×630	1.91:1
Twitter/X	1200×675	1.78:1（16:9）
Twitter 大尺寸卡片	1200×600	2:1
正方形	1200×1200	1:1

Endpoint

接口端点

POST https://html2png.dev/api/convert

POST https://html2png.dev/api/convert

Example

示例

bash

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>'

bash

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)

排版：

大字号粗体标题（60-80px）
易读性副标题（24-32px）
与背景高对比度

布局：

居中或左对齐内容
充足内边距（60-100px）
清晰的视觉层级

背景：

渐变叠加层
简约图案
品牌配色

图片元素：

作者头像（圆形，80-120px）
Logo（顶部角落或居中）
装饰元素（简约风格）

CDN Resources

CDN资源

Fonts:

html

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

Icons:

html

<script src="https://unpkg.com/lucide@latest"></script>

字体：

html

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

图标：

html

<script src="https://unpkg.com/lucide@latest"></script>

Tips

小贴士

Always use
```
deviceScaleFactor=2
```
for crisp text
Use
```
delay=1000
```
for font loading
Keep text minimal (3-5 words headline max)
Test at small sizes (images get compressed in feeds)
Use high contrast for readability

始终使用
```
deviceScaleFactor=2
```
以获得清晰文本
字体加载时使用
```
delay=1000
```
文本尽量精简（标题最多3-5个单词）
在小尺寸下测试（图片在信息流中会被压缩）
使用高对比度提升可读性

Rate Limits

请求限制

50 requests/hour per IP.

每个IP每小时最多50次请求。