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 →Use Playwright’s page.screenshot() method with a .png output path. By default, it captures the visible browser viewport; set the viewport to the thumbnail dimensions you need and leave fullPage off for a conventional thumbnail.
Save a website thumbnail as a PNG
Install Playwright, launch a browser, open the page, then pass a PNG filename to page.screenshot(). This complete Node.js example uses a 1200 × 630 CSS-pixel viewport as an illustrative thumbnail size; adjust it for the publishing surface you are targeting.
As an Amazon Associate I earn from qualifying purchases.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1200, height: 630 },
deviceScaleFactor: 1,
});
await page.goto('https://example.com', { waitUntil: 'load' });
await page.screenshot({ path: 'thumbnail.png' });
} finally {
await browser.close();
}
})();Install the package with npm install playwright, then run the script with Node.js. Playwright may require browser binaries to be installed for the selected browser; use npx playwright install chromium if Chromium is not already available. See the Playwright Page API for the screenshot options. The PNG extension selects PNG output, which is also the documented default format. Without a path, the method returns image data as a buffer instead of writing a file.
Choose the capture area and image dimensions
Viewport or full page
The default screenshot is the visible viewport. For a thumbnail, define a viewport matching the intended crop and omit fullPage (or set it to false). To capture the entire scrollable document instead, use fullPage: true; that usually produces a tall image rather than a compact thumbnail.
#1 Best Overall
await page.screenshot({
path: 'full-page.png',
fullPage: true,
});CSS pixels or device pixels
The default screenshot scale is 'device', which outputs device pixels and can therefore produce a larger image on a high-DPI setup. Use scale: 'css' when you want one image pixel for each CSS pixel. Set deviceScaleFactor in the browser context deliberately when output dimensions must be predictable.
const context = await browser.newContext({
viewport: { width: 1200, height: 630 },
deviceScaleFactor: 1,
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'thumbnail.png', scale: 'css' });With a 1200 × 630 CSS-pixel viewport and a device scale factor of 1, CSS and device scales align. If you change the device scale factor, the device-scaled image may have more pixels in each dimension. The BrowserType API documents the context’s device-scale setting.
Rank #2
![Free Fling File Transfer Software for Windows [PC Download]](https://m.media-amazon.com/images/I/41Vq6ZqHfjL._SL160_.jpg)
- Intuitive interface of a conventional FTP client
- Easy and Reliable FTP Site Maintenance.
- FTP Automation and Synchronization
Crop a region or capture an element
Use clip to capture a rectangle, or a locator’s screenshot method to capture one element. A clipped rectangle must fit within the page’s content area.
await page.screenshot({
path: 'region.png',
clip: { x: 100, y: 80, width: 800, height: 450 },
});
await page.locator('main article').screenshot({ path: 'article.png' });Make repeated captures more consistent
Pages can change while they load or between visits. Playwright provides options to disable animations, hide the text caret, mask selected locators, and apply a stylesheet during capture. For example, masking a changing timestamp can keep it from dominating a thumbnail:
await page.screenshot({
path: 'thumbnail.png',
animations: 'disabled',
caret: 'hide',
mask: [page.locator('.timestamp')],
});Use these controls intentionally: disabling animations affects their behavior during capture, and a mask visibly covers the matched element’s bounds. For visual comparisons, keep the browser version, host environment, settings, and headless mode consistent where possible; operating system, hardware, and power conditions can also affect rendering. See the Playwright visual comparisons guide.
For basic thumbnails, page.screenshot() writes the image directly. Playwright Test’s toHaveScreenshot() is a different workflow: it is a test assertion that waits for two consecutive screenshots to match before comparing against an expected snapshot, and it requires the Playwright test runner. Details are in the PageAssertions API.
Troubleshoot missing, oversized, or inconsistent PNGs
- No file was written: Supply
path: 'thumbnail.png'. Without a path,page.screenshot()returns a buffer. - The file is in an unexpected folder: Relative paths resolve from the process’s current working directory. Use an absolute path or run the script from the intended directory.
- The image is much taller than expected: Check that
fullPage: trueis not enabled. The default is the viewport. - Pixel dimensions are larger than expected: The default scale is
'device'. Tryscale: 'css'and setdeviceScaleFactorand viewport dimensions explicitly. - The PNG looks unchanged when you set quality: The
qualityoption does not apply to PNG; it is for JPEG and WebP behavior. - The page is blank or unfinished: Wait for the page or a specific element to be ready before capturing.
page.goto()can use awaitUntilcondition, and you can wait for a selector withpage.locator('selector').waitFor(). Some pages continue updating after the initial load, so wait for the content your thumbnail actually needs. - Successive images differ: Reduce variation from animations or known changing elements with capture options, and use a consistent browser and host environment for comparisons.
Or skip the browser setup
If you need a screenshot without installing and managing a browser, ScreenshotNeo returns an image from a single GET request. Its screenshot API supports PNG, JPEG, WebP, and PDF, with additional options for viewport, full-page capture, and other capture settings. See the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o thumbnail.pngScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Best Value
Frequently Asked Questions
Does Playwright save a PNG by default?
Yes. PNG is the documented default, and a path ending in .png makes the intended format explicit.
Can I capture only one page element?
Yes. Call screenshot() on a locator, such as page.locator('main').screenshot({ path: 'main.png' }).
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesQuick 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.
