Web Render Screenshot
Generate ultra-high-resolution PNG/JPEG images from HTML content via Playwright headless Chromium.
When to Use
| Scenario | Use This Skill | Use AI Image Gen Instead |
|---|---|---|
| Website 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: hiddenon body if single-viewport capture is desired
Step 2: Take the Screenshot
Use the bundled script:
python3 scripts/screenshot.py <input.html> [output.png] [options]
Or inline Python when the script cannot be invoked directly:
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
| Parameter | Default | Description |
|---|---|---|
device_scale_factor |
4 | Ultra-high resolution (4x). Output = viewport × 4 |
viewport.width |
1920 | CSS pixel width |
viewport.height |
1080 | CSS pixel height |
full_page |
true | Capture entire scrollable content |
wait |
1000ms | Wait after page load for rendering |
format |
png | Lossless output (use jpeg for smaller files) |
Resolution Reference
| Scale | Output for 1920×1080 viewport | File Size (typical) | Use Case |
|---|---|---|---|
| 1x | 1920×1080 | ~100KB | Draft / preview |
| 2x | 3840×2160 | ~1-2MB | Standard high-res |
| 3x | 5760×3240 | ~3-5MB | High-quality print |
| 4x | 7680×4320 | 5-8MB | Ultra-high (default) |
Script Options
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
- Glassmorphism:
backdrop-filter: blur(20px); background: rgba(255,255,255,0.12); - Gradient backgrounds:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - Card shadows:
box-shadow: 0 8px 32px rgba(0,0,0,0.1); - Chinese fonts: Always include fallback chain for cross-platform rendering
- Emoji icons: Use emoji for weather/status/category icons — they render at any scale
- 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):
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.