# Lh HTML To Image > Generate images from HTML+CSS via Chrome headless screenshot. Perfect for covers, posters, info cards, and text-layout images. Zero API cost, 100% accurate text rendering. Triggers: "generate cover", "poster", "HTML to image", "make image". - Skill: `dvcrn/lh-html-to-image` (Agent Skill) - Install (CLI): `npx skillmds@latest add dvcrn/lh-html-to-image` - Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/lh-html-to-image/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: dvcrn (https://skillmd.com/u/dvcrn) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/dvcrn/lh-html-to-image --- # 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: ```html ``` ### Step 2: Chrome Headless Screenshot ```bash # 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 | Purpose | Width×Height | Ratio | |---------|-------------|-------| | Portrait cover | 1080×1440 | 3:4 | | Square cover | 1080×1080 | 1:1 | | Widescreen cover | 1920×1080 | 16:9 | | Social media banner | 1280×720 | 16:9 | ## 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