Use Playwright’s page.screenshot() with type: 'jpeg'. It returns the screenshot as a Buffer; add path to save it to a file, and set fullPage: true if you want the full scrollable page rather than just the visible viewport. JPEG quality ranges from 0 to 100 and defaults to 80.
Capture a webpage as a JPEG with Playwright
This Node.js TypeScript example opens a browser, navigates to a URL, captures the full page as a JPEG, and closes the browser even if navigation or capture fails:
import { chromium } from 'playwright';
async function capturePageAsJpeg(url: string): Promise<Buffer> {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto(url);
return await page.screenshot({
path: 'page.jpeg',
type: 'jpeg',
quality: 80,
fullPage: true,
});
} finally {
await browser.close();
}
}
capturePageAsJpeg('https://example.com').then((image) => {
console.log(`Captured ${image.length} bytes`);
});The example uses Playwright’s documented JPEG quality default, 80, and writes the file as page.jpeg. The returned value is still a Buffer, so the same image bytes can be passed to an upload or image-processing step without reading the file back from disk. If you do not need a local file, omit path; page.screenshot() still returns the buffer.
This is a Playwright implementation, not the only possible TypeScript approach. The exact behavior described here follows Playwright’s Page API and screenshots documentation. The API’s screenshot type can be JPEG, PNG, or WebP; its default type is PNG. See the Playwright Page API and screenshots guide.
#1 Best Overall
Choose file output, buffer output, and JPEG quality
Save a file, return bytes, or do both
Set path when you want Playwright to write an image to a named file. Without path, use the returned buffer directly. You can also set a path and retain the returned buffer, as the example does. The path is convenient for a local artifact; the buffer is useful when the next operation is an upload, storage call, or transformation in the same program.
Playwright can infer screenshot format from a file extension when a path is supplied. Explicitly setting type: 'jpeg' makes the intended format clear even if you later change the filename. If you rely on inference, use a JPEG extension such as .jpeg or .jpg, and follow the documented rule that the type is inferred from the extension.
Set quality for the intended use
For JPEG, quality accepts a number from 0 to 100; the documented default is 80. Quality is a tradeoff between image fidelity and file size, not a universal setting that works best for every page. Start with the default, then adjust it if the image is too large for its destination or visual details do not survive compression. PNG does not use the JPEG quality option.
JPEG is not an alpha-transparent output. Playwright’s omitBackground option does not apply to JPEG, so do not choose JPEG when you need a transparent background. Use an appropriate format and verify its transparency behavior for that requirement instead.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
Capture the viewport, the full page, or one element
Visible viewport
By default, a screenshot captures the visible page viewport. This is appropriate for a browser-window preview or a consistent above-the-fold image. The captured area depends on the page’s viewport dimensions, so configure the page viewport when the output needs a specific layout. The default example deliberately uses full-page capture instead.
Full scrollable page
Set fullPage: true to capture the full scrollable page rather than only the currently visible area. This can produce a substantially taller image on long pages. A full-page capture is useful for a page archive or review, but the result may be unwieldy when the destination expects a viewport-sized preview.
One component or region
To capture a particular component, take a locator screenshot rather than capturing the whole page:
const image = await page.locator('.product-card').screenshot({
type: 'jpeg',
quality: 80,
});Replace .product-card with a selector that identifies the element you want. Locator screenshots focus the output on that element; use a page screenshot when the whole viewport or document is the subject.
Recommended Free Tools
Control pixel scale and output dimensions
Playwright’s screenshot scale option controls whether image pixels follow CSS pixels or device pixels:
scale: 'css'produces one image pixel per CSS pixel.scale: 'device'captures device pixels. This is the documented default and can create a larger image on high-density displays.
Choose CSS scale when you want output dimensions tied to the layout’s CSS dimensions. Device scale preserves the higher pixel density, which may be useful for sharper output, but can increase the image’s pixel dimensions and file size. These are pixel-scale choices, not changes to the page’s CSS layout. JPEG quality and pixel scale are separate controls: one governs JPEG compression quality, while the other affects the number of pixels captured.
Make navigation and capture more reliable
The example uses await page.goto(url) before taking the screenshot. In production, decide what successful navigation means for your target site and handle navigation errors at the call site. A page can load its initial document before all dynamic content is ready; if the screenshot is missing content, wait for the relevant page state or element before capturing rather than assuming that navigation alone guarantees every visual asset has appeared.
Always close the browser in a finally block, as shown. That prevents an exception in navigation or screenshot capture from bypassing browser cleanup. For repeated captures, structure the broader program so browser lifecycle is deliberate: launching for each URL is simple, while managing a browser for a batch can avoid repeated startup work. Ensure each page is handled safely and close pages and the browser when the work is complete.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Full-page output can be much larger than viewport output, especially at device scale or on long documents. Consider the destination’s upload limits, storage needs, and processing cost before capturing a very long page at high pixel density. No single JPEG quality or capture scale is established as best for all sites; check the actual output for your workload.
Common problems and fixes
- The output is PNG instead of JPEG. The screenshot type defaults to PNG. Set
type: 'jpeg', or if relying on format inference, use a JPEG file extension with a path. - The screenshot contains only what was on screen. That is the default viewport capture. Add
fullPage: truefor the full scrollable page. - The file looks soft or is larger than expected. Check both
qualityandscale. JPEG quality ranges from 0 to 100; the default is 80. Device scale can produce more pixels than CSS scale, particularly on high-density displays. - The JPEG has no transparent background. JPEG is not an alpha-transparent format, and
omitBackgrounddoes not apply to it. Choose a format that supports the transparency you need. - The capture is missing an element or image. The capture may happen before that content is available. Wait for the particular element or page state your task requires before calling
screenshot(); a navigation completing does not by itself establish that all dynamic content is ready. - The process leaves a browser running after an error. Put browser closure in
finallyso it runs whether navigation and capture succeed or throw. - The screenshot is much taller or heavier than expected. Full-page capture includes the scrollable page, and device scale can raise pixel dimensions. Use viewport capture or CSS scale if those better match the output requirement.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return a PNG, JPEG, WebP, or PDF. For a JPEG, request the JPEG output using the API’s parameters:
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 request options and response details. The one-call route avoids installing and managing a browser for this capture. Before a shot, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether the request was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.
Free tools Windows power users keep installed
One-click scans. No signup required.
When to use each approach
Playwright is a good fit when your TypeScript application needs direct browser automation, control over capture code, or a screenshot buffer to process in the same program. A hosted API is useful when you want to make an HTTP request rather than install and operate a browser locally. Choose based on where you want browser execution and screenshot handling to live; the evidence here does not establish that one browser engine produces better JPEG fidelity or runs faster than another.
Best Value
Frequently Asked Questions
Does Playwright return the JPEG as a Buffer?
Yes. page.screenshot() returns a Promise<Buffer>; a path is optional.
What is the default JPEG quality in Playwright?
The documented default is 80 on a 0–100 quality scale.
Can I capture just one webpage element?
Yes. Use page.locator(selector).screenshot() for an element screenshot.
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.
