Email platforms, CRMs and marketing teams need pictures of emails all the time: thumbnails in a template picker, a preview to approve before a send, a gallery of past campaigns, a screenshot for a client report. The HTML already exists, so render it like a browser would and store the image next to the campaign.
A desktop preview
Most email templates are 600 px wide. Render at a slightly wider viewport so the background shows, and capture the full height:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<body style=\"margin:0;background:#f3f4f6\"><table role=\"presentation\" width=\"600\" align=\"center\" style=\"margin:24px auto;background:#fff;font-family:Arial,sans-serif\"><tr><td style=\"padding:32px\"><h1 style=\"margin:0 0 12px;font-size:24px\">Your October summary</h1><p style=\"color:#4b5563\">You took 1,284 screenshots this month.</p><a href=\"#\" style=\"display:inline-block;margin-top:12px;padding:12px 20px;background:#2563eb;color:#fff;text-decoration:none;border-radius:6px\">View usage</a></td></tr></table></body>","viewport_width":700,"viewport_height":400,"full_page":true,"format":"png"}' \
--fail-with-body -o shot.pngMobile and dark mode
Responsive emails switch layout with media queries. Render at a phone width with a retina scale to see the mobile version, and add dark_mode for templates that use prefers-color-scheme:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<style>@media (prefers-color-scheme: dark){body{background:#111!important;color:#eee!important}}</style><body style=\"margin:0;padding:24px;font-family:Arial,sans-serif;background:#fff;color:#111\"><h1 style=\"font-size:22px\">Your October summary</h1><p>You took 1,284 screenshots this month.</p></body>","viewport_width":375,"viewport_height":640,"device_scale_factor":2,"full_page":true,"dark_mode":true,"format":"png"}' \
--fail-with-body -o shot.pngThumbnails for a template gallery
Render the top of the email at a fixed viewport height, so every card in the grid has the same shape, and scale it down with image_width:
curl -X POST "https://shotkit.net/api/take" \
-H "X-Access-Key: YOUR_ACCESS_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com/email/view-in-browser/8f2c","viewport_width":700,"viewport_height":900,"image_width":280,"format":"webp","block_trackers":true}' \
--fail-with-body -o shot.webpDon't count previews as opens
Rendering an email loads its open-tracking pixel, which can show up as an open in your reports. Block your email platform's tracking domain with block_requests (for example "block_requests": ["*.list-manage.com/track/*"]) or block_trackers.
What this is and isn't
This renders the email in Chrome, which is close to how Apple Mail, Gmail on the web and most mobile clients show modern HTML email. It doesn't reproduce Outlook for Windows, which uses Word's rendering engine. For testing a send across dozens of real clients, use a dedicated tool such as Litmus or Email on Acid; use this for previews, thumbnails and archives.
Frequently asked questions
Will the image look exactly like Gmail or Outlook?
Close to Gmail and Apple Mail for well-built templates. Not like Outlook for Windows, which renders with Word. Clients also rewrite some CSS, so treat the image as a preview of your design, not of a specific inbox.
Can I screenshot an email that's already been sent?
Yes, if your platform has a "view in browser" link: pass that URL as url. Otherwise send the HTML you sent with html.
Do images in the email load?
Yes. Email HTML already uses absolute image URLs, so they load the same way they do in an inbox.