Use Puppeteer’s page.screenshot() after navigating to the page, set type: 'jpeg', and provide a .jpg path. The example below saves a full-page JPEG; adjust the wait condition to match when the target site is actually ready.
Capture a URL as a JPEG
Install Puppeteer in your Node.js project, then save this as an ES module file such as screenshot.mjs. The example uses networkidle2, a navigation condition shown in Puppeteer’s screenshots guide; it is not a guarantee that every application has finished rendering.
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.jpg',
type: 'jpeg',
quality: 85,
fullPage: true,
});
} finally {
await browser.close();
}- Install Puppeteer in the project with
npm install puppeteer. - Replace
https://example.comwith the page URL. - Run
node screenshot.mjs. Puppeteer writespage.jpgin the current working directory.
The try/finally pattern closes the browser even if navigation or capture throws an error. Puppeteer’s API pages identify version 25.12.0 in search results; check the current documentation if your installed release differs, since API details can change.
Choose the right capture extent and JPEG quality
JPEG is selected with type: 'jpeg'. When a screenshot is written to a path, Puppeteer can also infer the format from a .jpg or .jpeg extension, but specifying the type makes the intended output explicit. The documented image formats also include PNG and WebP. See the ImageFormat type and ScreenshotOptions API.
#1 Best Overall
- Viewport only: omit
fullPageor set it tofalse. This is the default. - Entire page: set
fullPage: true, as in the example. - Specific region: use the
clipoption to capture a defined area. - JPEG compression:
qualityaccepts values from 0 to 100. The example’s value of 85 is illustrative, not a universal quality or file-size recommendation. Quality does not apply to PNG.
The ScreenshotOptions reference documents page extent, clipping, and capture options such as captureBeyondViewport; consult it when you need to control capture beyond the viewport.
Wait for the content your screenshot needs
Navigation completing does not necessarily mean a page’s application content is ready. A page may populate a chart, image, or results panel after the initial document load. Choose a suitable waitUntil condition for the site, then add a page-specific wait if the screenshot depends on content that appears later. Puppeteer’s guide demonstrates networkidle2, but does not prescribe it for every website.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
For example, if a page renders the desired content inside an element with a known selector, wait for that selector before capturing:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.waitForSelector('.report-ready');
await page.screenshot({ path: 'report.jpg', type: 'jpeg', quality: 85 });Replace .report-ready with a selector that represents the content you need. If it never appears, Puppeteer’s wait will fail rather than silently proving that the intended content was captured.
Rank #3
Save a file, use returned image bytes, or capture one element
Write the JPEG to disk
Passing path saves the screenshot at that path. The main example writes page.jpg in the process’s current working directory.
Use the returned bytes
Without a path, Puppeteer does not save the image to disk. Page.screenshot() returns a Uint8Array by default, which you can pass to another part of your application or write yourself. It can return a base64 string when base64 encoding is requested. See the Page.screenshot() API.
Rank #4
- 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
const imageBytes = await page.screenshot({ type: 'jpeg', quality: 85 });
// imageBytes is a Uint8Array; send it to your storage or response layer.Capture a single element
When you need a component rather than the page, locate it and call ElementHandle.screenshot(). Puppeteer scrolls the element into view if necessary. See the ElementHandle.screenshot() API.
Recommended Free Tools
const card = await page.$('.product-card');
if (!card) throw new Error('Product card was not found');
await card.screenshot({ path: 'product-card.jpg', type: 'jpeg', quality: 85 });Or skip the browser setup
For a one-request screenshot, use ScreenshotNeo. Its API returns PNG, JPEG, WebP, or PDF output; this request asks for JPEG by using the documented output-format parameter:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -d format=jpeg -o shot.jpgSee the ScreenshotNeo API documentation for parameters and authentication. ScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; these steps can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month—no card required.
Troubleshooting Puppeteer JPEG captures
- The file is not JPEG: set
type: 'jpeg'and use a.jpgor.jpegpath. The extension can infer the type whenpathis provided, but an explicit type avoids ambiguity. - The screenshot is blank or missing dynamic content: navigation may have completed before the application rendered the relevant content. Wait for an appropriate selector or other page-specific readiness condition before calling
screenshot(). - The image shows only the visible screen: set
fullPage: truefor the full page. The default is viewport capture. - The element capture fails: confirm the selector matches an element after navigation. Check for a missing handle before calling its
screenshot()method. - No file appears: verify that you supplied
pathand check the process’s current working directory. Without a path, the screenshot is returned as bytes rather than saved to disk. - JPEG quality has no effect: confirm that the screenshot type is JPEG; the quality option does not apply to PNG.
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.
