Use page.screenshot({ fullPage: true }) to capture a page beyond the current viewport. Puppeteer also lets you choose an image format, set lossy-image quality, make the background transparent, capture a clipped region or element, and save to a file or receive the image data in memory. The examples below follow the current Puppeteer 25.12.0 API reference; check your installed version if its behavior or types differ.
Start with a runnable full-page screenshot
After launching Puppeteer and navigating to a page, pass fullPage: true to capture the full page rather than only the visible viewport. The documented default for fullPage is false.
As an Amazon Associate I earn from qualifying purchases.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}This follows the sequence in Puppeteer’s screenshot guide. Its networkidle2 wait is an example, not a universal readiness rule: pages with continuing network activity or delayed content may need a different wait condition or an explicit wait for the content you need.
Choose viewport, full-page, region, or element capture
Viewport and full-page screenshots
Calling page.screenshot() without a capture-area option takes a screenshot of the current view. Set fullPage: true when you want the entire page. The API documents this as a full-page capture; it does not establish a universal guarantee about how every site’s dynamic or lazily loaded content will behave.
#1 Best Overall
Capture a clipped region
Use clip to select a rectangular region. Its coordinates and dimensions are described by the screenshot clip type, which extends Puppeteer’s bounding-box shape.
await page.screenshot({
path: 'region.png',
clip: { x: 100, y: 200, width: 640, height: 400 }
});captureBeyondViewport controls whether capture may extend beyond the viewport. The reference documents its default as false when there is no clip and true when a clip is provided. Treat this as a documented default, not a claim that every combination has been independently tested.
Capture one element
For a specific element, use ElementHandle.screenshot() rather than calculating a page-level clip yourself. The element screenshot options extend the general screenshot options. The element API documents scrollIntoView as defaulting to true; the guide says Puppeteer tries to scroll a hidden element into view by default.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
const card = await page.$('.product-card');
if (!card) throw new Error('Could not find .product-card');
await card.screenshot({ path: 'product-card.png' });The element-options reference surfaced as version 25.9.0, while the current screenshot and page references are 25.12.0. Confirm element-specific types and options against the Puppeteer version installed in your project.
Select image format and quality
The documented image types are png, jpeg, and webp. PNG is the default. quality accepts a number from 0 to 100 but does not apply to PNG, so pair it with JPEG or WebP if you intend to set lossy-image quality.
await page.screenshot({
path: 'page.webp',
type: 'webp',
quality: 80
});The API reference does not recommend a particular quality value or quantify file-size and visual-quality trade-offs. Choose a value based on your own output requirements rather than treating one number as a universal best setting.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Make the background transparent
Set omitBackground: true to hide the default white background and allow a transparent screenshot. This option defaults to false.
await page.screenshot({
path: 'transparent.png',
omitBackground: true
});This setting concerns the browser’s default background; it does not mean every page element or browser configuration will render transparency identically.
Save to a file or use the screenshot data
Write an image to disk
Set path to save the screenshot. Puppeteer infers the image type from the path extension. A relative path is resolved from the current working directory. Without path, Puppeteer does not save the screenshot to disk.
await page.screenshot({ path: 'output/page.jpg', type: 'jpeg', quality: 85 });Receive bytes or base64
The ordinary Page.screenshot() overload returns a Promise<Uint8Array>. The encoding option defaults to 'binary'; with encoding: 'base64', the corresponding overload returns a Promise<string>.
const bytes = await page.screenshot({ type: 'png' });
// `bytes` is screenshot data; the call does not save a file by itself.
const base64 = await page.screenshot({ encoding: 'base64', type: 'png' });Other documented options
fromSurfacecaptures from the surface rather than the view and defaults totrue.optimizeForSpeeddefaults tofalse. The current reference table does not explain its trade-off, so do not assume it guarantees a particular speed improvement.
For the complete option types and version-specific behavior, see the ScreenshotOptions interface, the Page.screenshot() API, and the screenshots guide.
Free tools Windows power users keep installed
One-click scans. No signup required.
Troubleshoot common screenshot problems
- The image shows only the visible portion. Set
fullPage: truefor a full-page capture; that option defaults to false. - The output is not saved where expected. Supply
pathand check the working directory if the path is relative. Without a path, use the returned data rather than looking for a file. - Changing quality has no effect. Quality does not apply to PNG. Select JPEG or WebP if you need to use the quality option.
- An element is not visible for capture. Check that the selector found the intended element. The element screenshot method tries to scroll a hidden element into view by default; review the element options for your installed version.
- A clipped capture has unexpected boundaries. Review the clip’s
x,y,width, andheight, and consult the documentedcaptureBeyondViewportdefaults for clips. - Content is missing or still loading. Navigation completion is not necessarily the same as the readiness of the specific content you want. Wait for the relevant selector or state; the guide’s
networkidle2example is not a universal prescription. - Your editor reports an unknown option or type. Check the API documentation and type definitions for the Puppeteer version actually installed, especially for element-specific options.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server for developers. A single GET request can return a screenshot or PDF. Its cleanup can accept cookie and consent banners as a visitor and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Example cURL request (replace the URL with your target):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for setup and options, then sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Does quality change PNG screenshots?
No. Puppeteer’s screenshot API documents quality as inapplicable to PNG.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →What does optimizeForSpeed do in practice?
The current API reference lists the option and its default, but does not explain its performance trade-off.
Quick Recap
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.
