artifactshotTurn HTML into a perfect Instagram post
You have HTML — a quote card from Claude, a stat graphic from ChatGPT, a component you styled yourself — and Instagram wants an image at exact dimensions. Going from HTML to an Instagram post the usual way means screenshot, crop, Canva, export. The direct way: render the HTML at Instagram's real size and download it.
Instagram image sizes that actually matter
| Format | Dimensions | Ratio |
|---|---|---|
| Portrait feed post (max real estate) | 1080×1350 | 4:5 |
| Square feed post | 1080×1080 | 1:1 |
| Story / Reel | 1080×1920 | 9:16 |
The rule behind all three: Instagram serves feed images at up to 1080px wide. Upload smaller and it upscales — that's the soft, fuzzy look. Upload the exact size (or a 2×–4× multiple) and text stays crisp.
HTML to Instagram post in 3 steps
- Paste your HTML into ArtifactShot — hand-written or AI-generated (Claude artifacts, ChatGPT canvases, React, SVG and Mermaid all auto-detect).
- Pick the 4:5 or 1:1 preset. Your layout reflows live inside a true 1080×1350 or 1080×1080 viewport — what you see is exactly what Instagram gets.
- Download the PNG and post it. Free exports are watermarked at up to 720px; Pro exports the full size — and up to 4× for retina-sharp zooms.
Design tips for HTML that posts well
- Design for the frame, not the browser. The 4:5 preset is a real viewport — use flexbox/grid centering and percentage padding so content breathes at 1080×1350.
- Keep a safe margin. Instagram's UI overlays the bottom edge in some surfaces; keep critical text ~8% away from edges.
- Type large. Feed images are viewed at phone width. Body text below ~28px at 1080px wide becomes squint material.
- Web fonts work — they're loaded and inlined before capture, and you're warned if one can't be embedded.
HTML to Instagram post — quick FAQ
What size should the image be? 1080×1350 portrait for maximum feed space, 1080×1080 square for the classic look, 1080×1920 for Stories and Reels.
Is it free? Yes — free exports are watermarked and sized up to 1080px. Pro exports the full dimensions, clean, up to 4×.
Why does my Instagram image look blurry? The source was smaller than the target and got upscaled. Render at the true size — or 2×–4× — and it stays sharp.
Does AI-generated HTML work? Yes — from Claude, ChatGPT or Gemini, pasted as-is.