Capturing project covers with headless Chrome

The question

This site had a project write-up for a restaurant website with no picture of the restaurant website. Several thousand pixels of prose about a visual product, and nothing to look at.

Manual screenshots are the obvious answer, and the wrong one: inconsistent sizes, whatever the window happened to be, a scrollbar down the side, and impossible to redo identically when the design changes.

Setup

Chrome takes screenshots from the command line. No dependency, no service, no account:

chrome --headless=new \
  --disable-gpu \
  --hide-scrollbars \
  --virtual-time-budget=9000 \
  --window-size=1600,1000 \
  --screenshot="hero.png" \
  "https://example.com"

--hide-scrollbars removes the gutter that ruins an otherwise clean capture, and --virtual-time-budget waits for fonts, images and entry animations to settle instead of firing at first paint.

The raw PNG comes out around 1.7MB, which is far too heavy to commit. sharp — already present in any Next.js project — converts it:

await sharp(input)
  .resize({ width: 1600, withoutEnlargement: true })
  .jpeg({ quality: 80, mozjpeg: true })
  .toFile(output);

Result

1.7MB → 151KB, at full display resolution. Four captures — home, menu, gallery and a 420px mobile view — took under a minute and are byte-identical if re-run.

Learned

The whole thing is a script, which is the actual point. When a project gets redesigned, the covers regenerate rather than being re-taken by hand at a slightly different size.

Same technique works for Open Graph images, visual regression baselines, and mocking up a client's existing site before a pitch.