How to Screenshot a Website and Embed in Notion

Notion is great for specs, launch plans, research notes, and client documentation, but a pasted link is often less useful than a clean visual record. If you need to embed screenshot in Notion, treat the capture like documentation. The goal is a screenshot that stays readable in a column, opens clearly when clicked, and looks intentional in light or dark mode.

1. Capture at 1200px wide

Use width=1200 as your default screenshot width for Notion embeds. It is wide enough for most SaaS pages, docs, dashboards, and pricing tables without creating a huge file. Notion's help notes uploaded PNG and JPG images must stay under 5MB, so capture size matters. A 1200px viewport usually gives you sharpness while keeping the upload friendly.

For full-page screenshots, keep the width fixed and let height follow the page. For above-the-fold examples, pair width=1200 with a shorter height such as 800 or 900. That gives you a polished preview instead of a tall image that dominates the page.

2. Copy the base64 data URL directly

A data URL starts with data:image/png;base64, followed by the encoded image. MDN describes data URLs as a way to embed small files inline, and the canvas API exports PNG data URLs by default. For quick internal notes, this is convenient because the screenshot can travel as one copied value.

With FrameSnap, request a PNG screenshot, copy the returned base64 data URL, and paste it where Notion accepts image or embed input. This is useful for short-lived research notes, QA comments, or handoff pages where speed matters more than asset management.

3. Or download the PNG and upload it to Notion

For durable pages, download the screenshot as PNG and upload it as an image block. Notion supports image blocks through drag and drop, upload, and slash commands. The Notion API represents image files as Notion-hosted, file upload, or external file objects, so a hosted PNG is more reliable when a team workspace needs the image to keep working months later.

PNG is right for screenshots because text, buttons, charts, and borders stay crisp. JPEG can introduce artifacts around UI text. If a Notion page becomes image-heavy, compress after capture, but keep the master screenshot stored somewhere repeatable.

4. Use dark mode when the page belongs in a dark workspace

Dark mode screenshots look excellent inside Notion's dark interface. A dark capture feels native in engineering notes, incident writeups, design reviews, and API documentation. It also reduces the bright white rectangle effect when a light webpage sits inside a dark page.

The trick is consistency. Capture the same page with the same viewport, wait timing, color scheme, and format every time. For a product release, make every screenshot 1200px wide. For a weekly report, use the same full-page settings for each URL.

Use FrameSnap for repeatable Notion screenshots

Manual screenshots are fine once. They fall apart when you need ten pages, weekly refreshes, dark mode variants, or consistent widths. FrameSnap turns that workflow into URL-to-image capture with PNG output, base64 data URLs, or hosted image files from one API call. Try the FrameSnap screenshot tool for a quick Notion-ready capture, or create an API key to automate screenshots for docs, content calendars, QA notes, or client workspaces.

FAQ