HTML to Image

Generate images from HTML+CSS using Chrome headless screenshots. Ideal for covers, posters, info cards, and any text-heavy visual content. Zero API cost, 100% accurate text rendering.

Use Cases

• ✅ Cover images (title + subtitle + tags)
• ✅ Info cards (data display, comparison charts)
• ✅ Text layout images (quote cards, highlight cards)
• ❌ Illustrations, photos (use an AI image generation tool)

Workflow

Step 1: Write HTML

Create an HTML file with inline CSS:

\x3C!DOCTYPE html>
\x3Chtml>
\x3Chead>
\x3Cmeta charset="utf-8">
\x3Cstyle>
  body {
    width: 1080px;
    height: 1440px;   /* 3:4 portrait */
    margin: 0;
    overflow: hidden;
    font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  }
\x3C/style>
\x3C/head>
\x3Cbody>
  \x3C!-- Your content here -->
\x3C/body>
\x3C/html>

Step 2: Chrome Headless Screenshot

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless=new \
  --disable-gpu \
  --screenshot="output.png" \
  --window-size=1080,1440 \
  --hide-scrollbars \
  --force-device-scale-factor=2 \
  "file:///absolute/path/to/your.html"

# Linux (auto-detect chrome/chromium)
google-chrome --headless=new --disable-gpu \
  --screenshot="output.png" \
  --window-size=1080,1440 \
  --hide-scrollbars \
  "file:///absolute/path/to/your.html"

Chrome path can be overridden via CHROME_PATH environment variable.

Common Sizes

Tips

• Chrome GPU error logs can be safely ignored
• Use --force-device-scale-factor=2 for retina/high-DPI output (doubles pixel dimensions)
• Use --force-device-scale-factor=1 for exact pixel dimensions
• CJK fonts: PingFang SC (macOS built-in), Noto Sans SC (Linux, install via apt install fonts-noto-cjk)
• For complex layouts, test in a regular browser first, then screenshot