Export an HTML Card as PNG Without Missing Text or Clipped Edges
Prepare a self-contained HTML or SVG snippet, match its layout to the output canvas and verify the downloaded PNG.
Content updated:
Use a static, self-contained design
TheImageIs HTML to Image renders an editable snippet into a PNG. It supports inline HTML, CSS style blocks, gradients and inline SVG. It does not run JavaScript or include interactive video, iframes or animations. A chart that appears only after a script runs must first be converted into static markup or SVG.
Linked stylesheets and externally hosted images or fonts are not included by this tool. Paste the necessary CSS into the snippet and use embedded images or installed fonts. Read the preview's notices: waiting longer will not make an unsupported external resource appear.
Match the code size and the output size
The default card uses a 1200 × 630 canvas. Use dimensions from code reads a fixed size on the outer element or an SVG viewBox. If you manually make the output canvas smaller while the HTML remains fixed at 1200 pixels wide, the content may be clipped rather than scaled.
For this tool, use explicit output pixel dimensions rather than a device-pixel-ratio recipe from a screenshot service. If you want another size, update the layout and check its line wrapping. In a separate full-browser capture workflow, document.fonts.ready can help coordinate font loading; it is not a control in this static snippet exporter.
A small card exercise that exposes common mistakes
Start with the built-in template and replace its headline with a longer sentence. Keep the outer width and height at 1200 and 630 pixels, then open Preview. Check whether the new line wraps into the subtitle or leaves the bottom of a letter outside the canvas.
Use a familiar installed font while you establish spacing. Set box-sizing to border-box when a fixed-size container also has padding. Leave enough room for the actual text and any shadow; there is no universal padding value that protects every typeface, font size or language. Test Arabic text separately because shaping and direction affect the layout.
Validate the PNG, not just the editor
Create PNG and open the downloaded result independently. Verify its dimensions, line breaks, punctuation, background and corners. The editable code remains useful for the next revision, while the PNG is a flat image; links and text selection do not remain interactive.
If the image must satisfy a byte limit, send the finished PNG to Image Studio for a deliberate format and compression comparison. Keep the original PNG and snippet. Inspect small lettering after compression, and enter meaningful alt text wherever the graphic is published.
Create and check a 1200 × 630 card
A guided exercise, not a benchmark. Inspect your own output; results depend on the source and settings.
- Open HTML to Image and change the built-in headline and subtitle.
- Choose Use dimensions from code and confirm 1200 × 630 pixels.
- Review Preview and any notices; fix wrapping and unsupported resources in Code.
- Create PNG, download it, and reopen it to check dimensions and all text.
The downloaded PNG matches the preview and contains the intended fonts, text and edges without clipping.
Sources & further reading
Try an idea and review your result before saving your edits.
