Cloudflare Screenshot

Cloudflare Screenshot

2024 – PresentSee live
Steve on X

Share cards make or break a link on social media, and the best ones are designed pages, not cropped screenshots. Pieter Levels' Nomad List cards showed how good they can be. Cloudflare Screenshot gives any site the same: mount the Worker at /screenshots/* on your domain, and /screenshots/about.png is a picture of /about, rendered, stored and served from Cloudflare's edge, with no browser of your own to run.

It renders the share cards for this site, Coworkations, Flow Canon and The Valley Signal.

Cloudflare Screenshot

The URL is the API

Everything is in the path: size, pixel density up to 4x, JPEG quality, and media emulation for dark mode, contrast, print and reduced motion, so a page can be captured exactly as a reader with those settings would see it. Options it doesn't know are refused rather than ignored.

steve.ly's share card, rendered by Cloudflare Screenshot
This site's share card, in dark mode

Video, recorded in the browser

It records MP4, animated WebP and GIF too, from 240p to 4K, with a duration, frame rate and a choreographed scroll through the page. The encoders run inside the page being recorded, with their own color conversion, and the page's clock is replaced with one the Worker can freeze and step a frame at a time, so animations come out smooth however long each frame takes to render.

Three renders of the travels page
This site's travels, as a still, a clip, and a clip scrolling through three years

Fast, and cheap to run

  • One browser session is kept warm in a Durable Object, and identical requests that arrive together share a single render

  • Renders are stored in R2 and served stale while they refresh, weekly, with ETags and a purge endpoint

  • Failures are remembered briefly, so a broken page can't run up a bill

  • Pages behind Cloudflare Access can be captured with a service token

  • Tests on Vitest, CI on GitHub Actions, and a one-click deploy button