How to Screenshot a Page with Playwright and Save It as JPEG
Use Playwright’s page.screenshot() to save a page as JPEG. Learn how to set quality, capture the full page, return image bytes, and troubleshoot common issues.
In Node.js, navigate to the page and call page.screenshot() with a JPEG path. Playwright also infers the format from a .jpg or .jpeg filename, but setting type: 'jpeg' makes the intent explicit.
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.jpeg', type: 'jpeg' });The example below is a complete runnable script. It saves a full-page JPEG at quality 85. See the Playwright screenshot API for the full option reference.
1. Install Playwright
Create a project and install Playwright. Its browser binaries must also be installed; the command below downloads the Chromium browser used by this example.
npm init -y
npm install playwright
npx playwright install chromium2. Save a page as JPEG
Save this as screenshot.js, then run node screenshot.js. The finally block closes the browser even if navigation or capture fails.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({
path: 'screenshot.jpeg',
type: 'jpeg',
quality: 85,
fullPage: true,
});
console.log('Saved screenshot.jpeg');
} finally {
await browser.close();
}
})();The quality and fullPage values here are choices, not requirements. JPEG quality defaults to 80; full-page capture is off by default. A screenshot with path writes to that file and the call also returns image bytes.
3. Choose capture and output settings
Viewport or full page
By default, Playwright captures the visible viewport. Set fullPage: true to capture the full scrollable page. Full-page captures can be much taller and larger than viewport captures, and a page that keeps loading content while scrolling may need extra preparation before the screenshot.
JPEG format and quality
Use type: 'jpeg' to select JPEG explicitly. If the path ends in .jpg or .jpeg, Playwright can infer the image type from the extension. If neither a type nor a recognizable extension selects a format, the documented default is PNG.
JPEG quality accepts integers from 0 to 100 and defaults to 80. Higher values generally preserve more image detail and produce larger files; lower values trade detail for smaller output. Quality does not apply to PNG. Pick a value that suits your downstream use rather than assuming one setting is best for all pages.
Write a file or keep a Buffer
Pass path to save the screenshot directly. Omit it to receive a Node.js Buffer you can upload or pass to an image-processing step:
const image = await page.screenshot({ type: 'jpeg', quality: 80 });
// image is a BufferIf you save the buffer yourself, create the destination directory first when needed. With a path, Playwright writes the file; without one, your code is responsible for storing or sending the returned bytes.
Other relevant options
fullPage: capture beyond the viewport when true.scale: use'css'for CSS-pixel output or'device'for device-pixel output. Device scale can increase pixel dimensions and file size.omitBackground: useful with formats that support transparency; it does not make a JPEG transparent.clip: capture a specified rectangle when you need a region rather than the viewport or entire page.animations,caret, andmask: control animation, caret, and masked elements in screenshot workflows. Consult the API reference for accepted values and behavior.
JPEG is lossy and does not support transparency. If transparent output is needed, choose a format that supports it, such as PNG, and use the corresponding screenshot type.
4. Common variations
Let the filename select JPEG
await page.screenshot({ path: 'viewport.jpg' });Capture a full-page JPEG with a different quality
await page.screenshot({
path: 'full-page.jpeg',
type: 'jpeg',
fullPage: true,
quality: 90,
});Get bytes for upload or processing
const image = await page.screenshot({ type: 'jpeg', quality: 80 });
// Example: pass image to your upload or image-processing code.5. Make captures more reliable
A screenshot is only as settled as the page at capture time. For a page that loads slowly, choose an appropriate navigation wait condition or wait for a page-specific selector before calling screenshot(). Avoid relying on an arbitrary delay when the page exposes a reliable readiness signal. If images or fonts are still loading, wait for them when they matter to the result.
For visual regression baselines, keep the execution environment consistent. Operating system, browser version, browser settings, hardware, power source, and headless mode can affect rendering. Changes between environments can make visually equivalent pages produce different pixels.
6. ScreenshotNeo alternative
ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request can return a PNG, JPEG, WebP, or PDF. It can capture full pages, selected elements, and custom viewports, and it accepts parameter names used by other screenshot APIs to make switching easier.
Or skip the browser setup
Use the API call below to save a JPEG. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY -d format=jpeg --data-urlencode url=https://stripe.com -o shot.jpgCookie banners are accepted and removed before capture, along with known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents use screenshot and page-info tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
7. Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
Cannot find module playwright |
Playwright is not installed in the project where the script runs. | Run npm install playwright in the project directory. |
| Browser executable is missing | The Playwright package is present but its browser binary is not installed. | Run npx playwright install chromium. |
| Output is PNG instead of JPEG | The path does not have a recognized JPEG extension and the type was omitted. | Set type: 'jpeg' or use a .jpg or .jpeg path. |
| Screenshot file is missing | The relative path points somewhere other than expected, or the destination directory does not exist. | Check the process working directory; create the directory first or use an absolute path. |
| Capture is blank or incomplete | The page has not reached the state you intended to capture, or content is loaded later. | Wait for a meaningful selector or readiness condition before taking the screenshot. |
| JPEG looks soft or has artifacts | Quality is low, or JPEG compression is unsuitable for sharp text or graphics. | Increase quality, or use PNG when lossless edges and transparency matter. |
| Full-page capture is unexpectedly large or fails | The page is very tall, resource-heavy, or changes during capture. | Capture the viewport or a specific region, reduce device-pixel scale, and ensure the page is settled. |
8. Performance, reliability, and cost
Browser launch and page loading usually account for more elapsed time than the screenshot call itself. Reusing a browser process across multiple captures avoids repeated startup, while separate pages keep each capture’s navigation and state independent. Full-page and device-scale output can increase processing time, memory use, and file size. Use viewport capture when the entire document is not needed.
Playwright is a library you run with a browser in your own environment, so account for browser installation, runtime, storage, and any infrastructure you use. The library workflow does not have a per-screenshot service charge from ScreenshotNeo; costs depend on your compute and storage setup. If you prefer a hosted capture API, ScreenshotNeo has a free plan with 1,000 shots per month and paid plans from $5 for 3,000. All features are on every plan.
9. FAQ
Does Playwright support JPEG screenshots?
Yes. Set type: 'jpeg' or use a JPEG filename extension such as .jpg.
Can I make a JPEG transparent?
No. JPEG does not support transparency. Use a format such as PNG when the background must be transparent.
What is the default JPEG quality?
The documented default is 80. You can set an integer from 0 to 100.
Does page.screenshot() return image data?
Yes. It returns a Buffer. Provide path to write a file directly, or omit it to handle the bytes in your own code.
