To get a Puppeteer screenshot as Base64, call page.screenshot({ encoding: 'base64' }) and await it. The documented overload returns a JavaScript string; without encoding: 'base64', Puppeteer’s default screenshot result is binary bytes. The Base64 string is not documented as including a data:image/...;base64, prefix, so add that yourself only if the receiving API needs a data URI.
Get a page screenshot as a Base64 string
Here is a complete JavaScript example using Puppeteer’s documented launch, page creation, navigation, screenshot, and browser-close sequence. It saves the Base64 text in a variable so you can pass it to an API, embed it in a JSON payload, or convert it into a data URI if needed.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com');
const base64 = await page.screenshot({ encoding: 'base64' });
// Pass `base64` to a consumer that accepts Base64 text.
} finally {
await browser.close();
}The important part is await page.screenshot({ encoding: 'base64' }). Puppeteer documents this overload as returning Promise<string>. The standard screenshot overload returns Promise<Uint8Array> instead. See the official Page.screenshot() reference and Page API.
This example uses top-level await, as supported in an ES module. Keep the screenshot call inside the try block: the finally block closes the browser even if navigation or capture throws. The snippet is based on the documented API sequence; it is not a report of an independent runtime test.
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 →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
Choose Base64 or binary bytes based on the next step
Base64 represents image data as text. It is useful when a receiving interface accepts text, such as a JSON field or a text-only transport. Binary bytes are usually the more direct choice when the next step accepts image bytes or writes an image file. The right output is the format the consumer expects, not an inherently better screenshot format.
| Screenshot result | Puppeteer option | What to expect | Use it when |
|---|---|---|---|
| Base64 string | encoding: 'base64' |
A string returned by the documented overload. | The receiving code expects Base64 text. |
| Binary bytes | Omit encoding or use the documented default, 'binary'. |
The ordinary screenshot overload returns Uint8Array. |
The receiving code works with bytes or a byte-oriented image pipeline. |
ScreenshotOptions documents 'binary' as the default encoding and 'base64' as the alternative. If a library accepts a Uint8Array, there is no need to encode it as text first. If an API requires Base64, request Base64 explicitly instead of relying on the default.
Base64 text is not necessarily a data URI
A Base64 string and a data URI are related but different formats. The Base64 overload is documented as returning a string; the API reference does not promise a prefix such as data:image/png;base64,. Do not add that prefix blindly when a consumer asks for raw Base64 text, and do not omit it when the consumer explicitly requires a data URI.
Rank #2
If you know the screenshot is PNG and your consumer requires a data URI, construct one at the boundary:
const base64 = await page.screenshot({ encoding: 'base64' });
const dataUri = `data:image/png;base64,${base64}`;The prefix must describe the actual image format. Puppeteer’s documented screenshot options list type, with PNG as the default image type. If you request another supported image type, use its corresponding media type in any data URI you assemble. A mismatch between the prefix and the bytes can confuse the receiving application even though the Base64 string itself is valid.
Set image format, page scope, and file output deliberately
encoding controls how the result is represented; it does not decide what part of the page is captured. The screenshot options separately include fullPage, path, type, and quality. The documented default image type is PNG, and quality does not apply to PNG. Choose capture scope and image format for the task, then select Base64 encoding if the caller needs a string. The official options reference is the place to check option details for the installed Puppeteer version.
- Whole page or viewport: Set
fullPagewhen you need full-page capture rather than only the visible viewport. The option is independent of Base64 encoding. - Image format: The documented default is PNG. Set
typewhen you need a different image format supported by the API.qualityhas no effect on PNG, so changing it is not a way to alter a PNG capture. - File output: The Page API also demonstrates
await page.screenshot({ path: 'screenshot.png' }). A path is a separate output choice from asking the screenshot overload for an encoded string; consult the API options if you need a particular combination of outputs.
Capture one element as Base64
If you need a component rather than the page, call the screenshot method on an ElementHandle and pass the same encoding option:
const element = await page.$('.receipt');
if (!element) {
throw new Error('Could not find .receipt');
}
const base64 = await element.screenshot({ encoding: 'base64' });The selector in this example is illustrative: replace .receipt with a selector that exists on the page. The explicit missing-element check prevents calling the method on a null result. Puppeteer documents that ElementHandle.screenshot() scrolls the element into view if necessary and then uses Page.screenshot(). It throws if the element has been detached from the DOM. See the ElementHandle.screenshot() reference.
For a dynamic page, retain the handle only while the target remains attached. If the page replaces that element between selection and capture, find the current element again rather than treating a detached-handle error as an encoding problem.
Rank #4
Common errors and how to fix them
- The result is not a string: Check that the call includes
encoding: 'base64'. Without it, the documented default is binary and the ordinary overload returnsUint8Array. - The value is a Promise or is not ready: Await the screenshot call:
const base64 = await page.screenshot({ encoding: 'base64' });. The overload returns a promise. - An image viewer rejects the string: Confirm whether the receiver expects raw Base64 or a data URI. The API reference does not promise a data-URI prefix; add one only when required and use the correct media type.
- A quality setting appears to have no effect: Check the requested image type. Puppeteer documents that
qualitydoes not apply to PNG. - Element capture fails after selecting the target: The handle may have been detached from the DOM before capture. Query the element again after the page updates, and then call its screenshot method.
- You expected a file but received a string: Base64 is a text result, not a path. The Page API documents
pathas a separate output option; use it when the goal is a saved screenshot file.
Size, transport, and reliability considerations
Base64 is a text representation of image bytes, so it is convenient for text-based interfaces but not a smaller substitute for the image itself. It also means the application must handle a string rather than a byte array. If you are passing screenshots between services, check the receiver’s maximum request size, accepted field format, and whether it wants raw Base64 or a data URI before choosing this output.
Capture settings influence the image payload independently of the encoding choice. A full-page image can contain more visual content than a viewport capture; format and page scope should reflect what the recipient actually needs. If the recipient accepts bytes, the binary screenshot result can avoid an unnecessary text representation and later decoding step.
For operational reliability, keep browser cleanup in a finally block, await navigation and capture, and handle failures at the level appropriate to your application. The documented API establishes return types and option behavior, but does not provide a performance benchmark or guarantee capture time for a particular site, page size, or runtime environment. Treat timing, memory consumption, and payload limits as workload-specific and verify them in your own deployment rather than relying on a universal estimate.
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 reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteVersion and documentation scope
The official Puppeteer Page.screenshot() reference displayed version 25.12.0 when reviewed on September 29, 2026. The signatures and options described here reflect those official references at that date; APIs can change, so check the linked documentation if you are publishing or upgrading against a later version.
Or skip the browser setup
If your goal is to receive a screenshot from a URL rather than manage a Puppeteer browser yourself, ScreenshotNeo is a website screenshot API and MCP server. A GET request returns an image or PDF; for example, this cURL request writes a WebP screenshot:
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 documentation for request details. The response is an image file in this example, not a Puppeteer Base64 string, so use it when a screenshot service fits the task; keep Puppeteer when you need to control your own browser code.
- Cookie and consent banners are accepted before capture and more than 60 known consent platforms, newsletter popups, and chat widgets are removed; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers identify the page verdict and billing status.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for AI agents and MCP clients. - The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; yearly billing gives two months free, and every feature is on every plan.
Sign up for ScreenshotNeo to get 1,000 free screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Frequently Asked Questions
Does Base64 make a Puppeteer screenshot private or encrypted?
No. Base64 is an encoding, not encryption. Protect the image through the security controls of the system that stores or transports it.
Can I put a Base64 screenshot in JSON?
Yes, if the receiving endpoint accepts a string field and its request-size limits allow the image. Confirm whether that endpoint expects raw Base64 or a data URI.
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.
