Source: business/marketing/skills/html-image-screenshot-guide.md

HTML Image Screenshot Guide

How to create social media images from HTML files on a Chromebook.

The Rule

Every image file meant for screenshotting must be a standalone HTML file with:

body width and height set to the exact image dimensions
overflow: hidden on body
Zero padding, zero margin on body
No production notes, labels, or surrounding content
No background color on body (the card fills the entire page)

File naming convention: screenshot-[number]-[platform].html

Bad: An image embedded inside a production document with notes and padding around it. Good: A file that IS the image. Nothing else on the page.

Standard Sizes

Platform	Size	Ratio	File suffix
LinkedIn post	1080 x 1350	4:5 portrait	`-linkedin.html`
Facebook feed	1200 x 630	1.91:1 landscape	`-fb-feed.html`
Instagram feed	1080 x 1350	4:5 portrait	`-ig.html`
Facebook post (square)	1080 x 1080	1:1	`-fb.html`
Meta ad (square)	1080 x 1080	1:1	`.html`
Meta ad (vertical)	1080 x 1920	9:16	`-vertical.html`
Facebook cover	820 x 312	~2.63:1	`-fb-cover.html`

How to Screenshot

Open the standalone HTML file in Chrome on the Chromebook
Press Ctrl+Shift+I to open DevTools
Click the three dots (⋮) in the top-right of the DevTools panel
Click "Run command" (or press Ctrl+Shift+P)
Type "screenshot"
Select "Capture full size screenshot"
PNG saves to Downloads

On a 2x display (Chromebook): The output will be 2x the HTML dimensions (e.g., 1080px HTML → 2160px PNG). This is correct — it exceeds platform minimums.

How to Create a Standalone Screenshot File

If you have a production document (like a post.html) with an image embedded inside it alongside notes and analysis, create a separate screenshot file:

Copy ONLY the image div from the production file
Create a new HTML file with:

body { width: [WIDTH]px; height: [HEIGHT]px; overflow: hidden; margin: 0; padding: 0; }
The image div as the only content in

Scale all font sizes and spacing proportionally to the target size
Save as screenshot-[name]-[platform].html

Template:

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=YOUR+FONTS&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: [WIDTH]px; height: [HEIGHT]px; overflow: hidden; }
</style>
</head>
<body>
<!-- Image content goes here — fills entire body -->
</body></html>

Troubleshooting

Colors outside the image: The body has background color or padding. Fix: set body { margin: 0; padding: 0; } and make sure the card div fills the full body dimensions.

Image is too small: The HTML file dimensions are smaller than the platform requires. Fix: set body width/height to the target size and scale all font sizes proportionally.

White space around the image: The card div is smaller than the body. Fix: make the card div the same width/height as the body.

Text looks tiny: The font sizes were designed for a smaller viewport (e.g., 600px) but the file is now 1080px. Fix: multiply all font sizes by the scale factor (1080/600 = 1.8x).

Screenshot captures extra content: The HTML file has production notes, labels, or container elements outside the image. Fix: create a standalone file with ONLY the image content.

Checklist Before Screenshotting

[ ] File is standalone — no production notes, no labels, no surrounding content
[ ] Body width and height match the target platform size exactly
[ ] Body has zero margin, zero padding
[ ] Card/image div fills the entire body
[ ] Font sizes are proportional to the target size (not designed for a smaller viewport)
[ ] Open in Chrome, screenshot looks correct at full page capture

This guide applies to all campaigns: The Build (ad-images/), Practice Command Center (screenshot-), and any future campaign images.*