Web Render Screenshot#

Generate ultra-high-resolution PNG/JPEG images from HTML content via Playwright headless Chromium.

When to Use#

ScenarioUse This SkillUse AI Image Gen InsteadWebsite UI / mockup✅❌Dashboard / data viz✅❌Text-heavy infographic✅❌Weather/finance/news page✅❌Artistic illustration❌✅Photorealistic scene❌✅

Rule: If it has text that must be readable → use this skill.

Quick Start#

Step 1: Create the HTML#

Write a self-contained HTML file with inline CSS. Guidelines:

• Use system fonts or Google Fonts CDN for Chinese support: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif
• All styles inline (no external CSS files)
• Design for the target viewport (default: 1920×1080)
• Use emoji for icons when appropriate (universally supported)
• Ensure overflow: hidden on body if single-viewport capture is desired

Step 2: Take the Screenshot#

Use the bundled script:

bash

python3 scripts/screenshot.py <input.html> [output.png] [options]

Or inline Python when the script cannot be invoked directly:

python

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(
        viewport={"width": 1920, "height": 1080},
        device_scale_factor=4,  # 4x ultra-high res (default)
    )
    page.goto("file:///path/to/input.html", wait_until="networkidle")
    page.wait_for_timeout(1000)
    page.screenshot(path="output.png", full_page=True)
    browser.close()

Step 3: Deliver#

Output MEDIA:<path> for inline delivery, or use openclaw message send with --force-document for Telegram to avoid compression.

Default Parameters#

ParameterDefaultDescriptiondevice_scale_factor4Ultra-high resolution (4x). Output = viewport × 4viewport.width1920CSS pixel widthviewport.height1080CSS pixel heightfull_pagetrueCapture entire scrollable contentwait1000msWait after page load for renderingformatpngLossless output (use jpeg for smaller files)

Resolution Reference#

ScaleOutput for 1920×1080 viewportFile Size (typical)Use Case1x1920×1080100KBDraft / preview2x3840×21601-2MBStandard high-res3x5760×3240~3-5MBHigh-quality print4x7680×43205-8MB****Ultra-high (default)

Script Options#

text

python3 scripts/screenshot.py <html> [output] [options]

Arguments:
  html              HTML file path or URL
  output            Output file path (default: <input-stem>.png)

Options:
  --scale N         Device scale factor (default: 4)
  --width N         Viewport width (default: 1920)
  --height N        Viewport height (default: 1080)
  --full-page       Capture full page (default)
  --no-full-page    Capture viewport only
  --wait N          Wait time in ms (default: 1000)
  --format FORMAT   png or jpeg (default: png)
  --quality N       JPEG quality 0-100 (default: 92)

HTML Design Tips#

1. Glassmorphism: backdrop-filter: blur(20px); background: rgba(255,255,255,0.12);
2. Gradient backgrounds: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
3. Card shadows: box-shadow: 0 8px 32px rgba(0,0,0,0.1);
4. Chinese fonts: Always include fallback chain for cross-platform rendering
5. Emoji icons: Use emoji for weather/status/category icons — they render at any scale
6. Grid layout: CSS Grid for complex dashboards; Flexbox for simpler layouts

File Size Management#

If the output PNG is too large for delivery (e.g., >5MB for Telegram):

python

from PIL import Image
img = Image.open("output.png")
img.save("output.jpg", "JPEG", quality=92, optimize=True)  # Usually 5-10x smaller

Or use --format jpeg --quality 92 with the screenshot script.