Use page.screenshot({ fullPage: true }) to capture an entire page; choose type and, for JPEG or WebP, quality to control the image output. Puppeteer’s screenshot options also let you capture a region, allow transparency, save to a file, or return image data to your code.
Take a full-page screenshot
Launch Puppeteer, navigate to the page, then pass fullPage: true to Page.screenshot(). The documented default is false, so a call without that option captures the viewport rather than requesting a full-page image. The official guide uses networkidle2 as an example navigation wait; it is not a universal readiness rule. Pages with ongoing network activity or content that appears after navigation may need a different readiness condition.
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 documented Puppeteer API and guide; the current API reference reviewed is for Puppeteer 25.12.0. Check the documentation for your installed version if its behavior or types differ. See the ScreenshotOptions API reference and screenshots guide.
Choose what to capture: viewport, page, region, or element
Viewport
Call page.screenshot() without fullPage to capture the current viewport. Set the viewport explicitly before navigation when you need a predictable capture size:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match#1 Best Overall
await page.setViewport({ width: 1280, height: 800 });
await page.goto('https://example.com');
await page.screenshot({ path: 'viewport.png' });Full page
Set fullPage: true to request the full page rather than only the viewport. This is the relevant option for a long-page capture; it does not itself change the destination file type.
Clipped region
Pass a clip object to capture a defined region. Its type is ScreenshotClip, which extends BoundingBox. For example:
await page.screenshot({
path: 'region.png',
clip: { x: 100, y: 120, width: 640, height: 360 }
});captureBeyondViewport is a separate option. Its documented default is false when there is no clip and true when a clip is supplied. The API reference documents these controls and defaults; it does not establish that every combination behaves identically on every page.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
One element
For a targeted element, use ElementHandle.screenshot() rather than calculating a page-level clip yourself. The method tries to scroll a hidden element into view by default. The element-specific options reference surfaced as Puppeteer 25.9.0, so verify the interface against your installed package if using another version.
const element = await page.$('.card');
if (!element) throw new Error('Could not find .card');
await element.screenshot({ path: 'card.png' });References: ElementHandle.screenshot() and ElementScreenshotOptions.
Select an image format and quality
The documented formats are PNG, JPEG, and WebP. PNG is the default. The quality option accepts a number from 0 to 100, but does not apply to PNG; pair it with JPEG or WebP if you want to set that option.
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
| Option | Documented behavior | Example |
|---|---|---|
type |
Image format: png, jpeg, or webp; default is png. |
{ type: 'webp' } |
quality |
Number from 0 to 100; not applicable to PNG. The reference does not recommend a value or quantify file-size effects. | { type: 'jpeg', quality: 80 } |
await page.screenshot({
path: 'page.webp',
fullPage: true,
type: 'webp',
quality: 80
});Here, 80 is an example setting, not an officially recommended value. The API documentation does not provide measured quality or file-size comparisons between formats. See ImageFormat.
Make the background transparent
Set omitBackground: true to hide the default white background and allow a transparent screenshot. Its default is false.
await page.screenshot({
path: 'transparent.png',
omitBackground: true
});This option describes the page background; it is not a guarantee that every page element or browser configuration will render transparency identically.
Save to a file or use the returned image data
Write an image to disk
Supply path to save the image. Puppeteer can infer the format from the path extension. Relative paths resolve from the current working directory. Without path, the screenshot is not saved to disk.
await page.screenshot({ path: 'output/page.jpeg', fullPage: true });Keep the bytes in your program
Without a file path, the regular Page.screenshot() overload returns a Promise<Uint8Array>, which you can pass to another API or write yourself.
const imageBytes = await page.screenshot({ fullPage: true });The encoding option defaults to 'binary'. Set it to 'base64' to use the overload that returns a base64 string:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →const imageBase64 = await page.screenshot({ encoding: 'base64' });See the Page.screenshot() API reference for the documented overloads and return types.
Other screenshot options
| Option | Documented behavior | Default |
|---|---|---|
fromSurface |
Capture from the surface rather than the view. | true |
optimizeForSpeed |
An available screenshot option; the reference table does not explain its trade-off, so do not assume it makes captures faster. | false |
captureBeyondViewport |
Controls capture beyond the viewport; default depends on whether a clip is supplied. | false without a clip; true with one |
These option names and defaults are API documentation, not a performance benchmark. Consult the ScreenshotOptions reference before relying on options whose effects are not explained there.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common screenshot problems
- The image shows only the visible area: add
fullPage: trueif the desired output is the full page; the option defaults tofalse. - The output format is unexpected: set
typeexplicitly, or check the extension when usingpath, because Puppeteer can infer the format from it. - Changing quality has no effect:
qualitydoes not apply to PNG. Choose JPEG or WebP when setting quality. - The background is white: use
omitBackground: truewhen a transparent background is wanted, and account for how page elements and browser configuration render. - The element capture misses a hidden target: confirm that the selector matches an element. Element screenshots try to scroll a hidden element into view by default; check the element-specific options for your installed version.
- Navigation never reaches the selected wait condition: the guide’s
networkidle2is an example, not a universal requirement. Choose a readiness condition that suits the page rather than assuming all sites become network-idle. - You expected a file but received data: add
pathto save to disk. Without it, use the returned bytes or request base64 encoding.
Or skip the browser setup
ScreenshotNeo provides a screenshot API and MCP server. A single GET request can return an image or PDF. Its clean-shot steps accept cookie and consent banners 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 are not billed, and response headers report the page verdict and billing status. AI agents can use its MCP server tools: take_screenshot, get_page_info, and capture_pdf.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for setup and options. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for ScreenshotNeo free.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Frequently Asked Questions
Does quality work with PNG screenshots?
No. Puppeteer documents quality as inapplicable to PNG; use JPEG or WebP if you need to set it.
What does Page.screenshot() return when I do not provide a path?
It returns image bytes as a Uint8Array by default, or a base64 string when called with encoding: 'base64'.
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.
