Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For a still frame, take a browser screenshot; for a PDF, generate a PDF from the page. They are different outputs: Puppeteer’s PDF generation uses print styling by default, which can change the page’s layout and colors. If you need a PDF that resembles the on-screen page, explicitly emulate screen media before generating it. Neither workflow requires screen recording.

First decide what “PDF frames” means

The title can describe two distinct jobs. You may want one or more still images of a web page, assembled into a PDF, or you may want the browser to export the webpage as a paginated PDF document. Choose based on what you need to hand over:

  • Still frame: a screenshot image of the page at a particular viewport and moment. Use this when the exact visible appearance matters or you need evidence of a particular state.
  • Full-page image: one tall screenshot that includes content beyond the visible viewport. Use it when you need the full page as pixels, not a text-oriented document.
  • PDF export: a paginated document rendered from the page. Use it for printing, sharing, or archiving a document-like version of the page. Its appearance may differ from the live screen.

A screenshot API produces image output unless it explicitly supports PDF output. ScreenshotNeo supports both screenshots and PDF capture; its API and options are documented at ScreenshotNeo’s documentation.

Choose the capture method

Method Best for What to watch
Browser or DevTools screenshot A manual still image of the page It captures pixels at the current render size; inspect dynamic content and tall-page output.
Puppeteer screenshot Repeatable still images in a JavaScript script Requires a Node.js automation setup and a page that has finished rendering.
Puppeteer PDF A printable or paginated page document Print CSS is the default; screen styling must be selected explicitly if that is what you want.

Chrome’s DevTools Protocol also documents page screenshot operations. The exact browser interface and full-page behavior can vary by browser and version, so this guide uses Puppeteer for repeatable, explicit examples rather than claiming one universal menu path.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Prepare the page so the capture is complete

Capture quality depends on more than the file format. Set the viewport to the size you want represented, and wait for the page’s visible content to settle before taking a screenshot. Dynamic sites may load images as the page scrolls, animate elements, or reveal content only after a click. Check the resulting file for missing or partially rendered material instead of assuming a fixed delay works everywhere.

  1. Choose the target state. Open the exact URL and, if necessary, perform the interaction that reveals the content you need.
  2. Set the viewport. A screenshot records the page as rendered at a particular size. A different viewport can change line wrapping, responsive navigation, and visible content.
  3. Wait for the right condition. Wait for a meaningful selector or for the content you need to appear. A universal delay for all websites is not established; inspect pages with lazy images or animations.
  4. Review the output. Check text sharpness, missing images, clipping, page breaks, and whether the captured state matches your purpose.

Puppeteer’s PDF guide documents that PDF generation waits for fonts by default. That documented behavior is specific to PDF generation; do not assume that it resolves every site’s image, animation, or interaction timing.

Capture a still frame with Puppeteer

Use Puppeteer’s page.screenshot() when the deliverable is an image, not a video. This runnable Node.js example captures the visible viewport as a PNG. Install Puppeteer in a project with npm install puppeteer, save the code as screenshot.js, then run node screenshot.js.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  try {
    const page = await browser.newPage({
      viewport: { width: 1440, height: 900 },
    });
    await page.goto('https://example.com', { waitUntil: 'networkidle2' });
    await page.screenshot({ path: 'frame.png', type: 'png' });
  } finally {
    await browser.close();
  }
})();

Replace https://example.com with the page you are authorized to capture. The chosen viewport is an example, not a universal quality setting. PNG is a practical choice when crisp text and interface edges matter, but the official screenshot documentation does not prescribe one format for every use.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Capture the whole page

When you need the document beyond the visible viewport, enable full-page capture:

await page.screenshot({ path: 'full-page.png', fullPage: true, type: 'png' });

Review the resulting image. Very long pages can create unwieldy output, and content loaded only as the page is scrolled may need additional handling. Full-page details can vary by browser version and page behavior.

Generate a PDF with Puppeteer

For a paginated PDF, use page.pdf(). Puppeteer’s API documentation says it “Generates a PDF of the page with the print CSS media type.” In practice, this means print styles can hide or rearrange elements and alter colors compared with the live page. Use this runnable example when print rendering is appropriate:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  try {
    const page = await browser.newPage({
      viewport: { width: 1440, height: 900 },
    });
    await page.goto('https://example.com', { waitUntil: 'networkidle2' });
    await page.pdf({ path: 'page.pdf', format: 'A4', printBackground: true });
  } finally {
    await browser.close();
  }
})();

To prefer screen styling rather than print CSS, emulate screen media before calling page.pdf():

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
await page.emulateMediaType('screen');
await page.pdf({ path: 'screen-styled-page.pdf', format: 'A4', printBackground: true });

This changes the media type used for rendering; it does not turn the PDF into a screenshot. The result remains a PDF with page dimensions and page breaks. Inspect it for breaks through important content, missing backgrounds, and differences in color or layout.

Make still-image frames into a PDF

If “PDF frames” means screenshots placed in a PDF, capture the required frames as images first, then assemble those images into a PDF using a document or PDF tool of your choice. The browser screenshot APIs described here create image files; the source documentation does not establish a single built-in cross-browser workflow for converting multiple screenshots into one PDF. Before sharing, check that each frame is legible at the PDF’s displayed size and that no page has been cropped.

Or skip the browser setup

ScreenshotNeo returns a screenshot or PDF from one GET request. This example requests a WebP screenshot; replace the URL with the page you need and use an API key from your account. See the API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Cookie banners are accepted and removed before capture, along with supported newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers say whether the page was billed and its verdict. An MCP server provides screenshot and page-info tools for AI agents, including Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up free for 1,000 screenshots a month with no card.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Troubleshoot incomplete or different-looking captures

Images or page sections are missing

The page may render content only after scrolling, waiting, or interaction. Confirm the relevant content is visible in the browser before capture; for automated work, wait for a relevant selector rather than assuming one delay fits every page. Inspect full-page output for lazy-loaded content.

The PDF does not look like the screen

Puppeteer PDF output uses print media by default. If screen styling is the intended appearance, call page.emulateMediaType('screen') before page.pdf(), then inspect the PDF. Print-oriented page breaks and output dimensions still apply.

Colors or backgrounds differ in the PDF

Print CSS can change colors, and backgrounds may not appear unless requested. Test printBackground: true and review the exported file; do not assume it will match the browser pixel for pixel.

The screenshot is clipped or too tall

Check whether you wanted a viewport screenshot or a full-page screenshot. Use the full-page option only when the whole document is needed, and inspect the output at its intended viewing size. Browser versions and dynamic page behavior can affect full-page results.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The capture catches an animation or an intermediate state

Wait for the target state to appear and verify it before capture. There is no universal delay established for dynamic websites; a selector-based wait or a deliberate interaction can be more reliable than an arbitrary pause.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Quality, reliability, and cost considerations

For a one-off still, a browser screenshot avoids the overhead of video recording and extracting a frame. For repeatable captures, Puppeteer or the Chrome DevTools Protocol provides an automation path, but the script still depends on the page loading the content you want. PDF generation is useful when pagination and print output are desired; it is not a substitute for an exact screen frame unless you specifically choose screen media and validate the result.

No universal resolution, DPI, or quality figure is established for these workflows. Choose an appropriate viewport for your use, inspect the saved output, and avoid claiming a numeric quality guarantee. Automated runs can fail or capture incomplete states when a site is slow, interactive, or dependent on resources that have not settled; build checks around the page content relevant to your use case.

Frequently Asked Questions

Does a website screenshot record a video?

No. A page screenshot captures a still image; it does not record a video.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Will a Puppeteer PDF always match the page on my screen?

No. PDF output uses print CSS by default. Emulating screen media can retain screen styling, but the result is still a paginated PDF and should be checked.

Should I save a screenshot as PNG or JPEG?

Choose based on the image and intended use. PNG is often suitable when crisp text and interface edges matter; the official sources do not prescribe one format for every case.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.