Recommended Free Tools
Choose PNG for pixel-accurate interfaces, text, visual-regression baselines, and transparency. Choose JPEG for photographic pages or very large images where smaller files matter more than lossless edges. Choose WebP when your artifact viewers and diff tools support it and you want modern compression with a tunable quality setting. In CI, set type explicitly instead of relying on a filename extension or a library default.
Puppeteer 25.12.0 documents png, jpeg, and webp as the supported screenshot formats. PNG is the default; JPEG and WebP accept a quality value from 0 to 100, while quality does not apply to PNG.
The format decision at a glance
| Need | Format | Reason | Important limitation |
|---|---|---|---|
| Pixel-accurate UI or visual-regression baseline | PNG | Lossless edges and text; no quality tuning | Files are usually larger |
| Photos, gradients, or bandwidth-sensitive artifacts | JPEG | Usually smaller and widely consumable | Lossy compression and no transparent background |
| Modern compressed artifacts with confirmed consumer support | WebP | Modern compression with quality from 0–100 | Every viewer, diff tool, and CI artifact browser must accept WebP |
| Transparent logo or composited interface asset | PNG with omitBackground: true |
Preserves transparency where the capture path supports it | Verify transparency through your complete capture and storage path |
Format is only one part of the result. fullPage, viewport size, device scale, page state, lazy-loaded content, and the element you capture can change dimensions and pixels independently of PNG, JPEG, or WebP.
When PNG is the right default
Use PNG for text and one-pixel edges
PNG is lossless, so browser-rendered glyphs, borders, icons, and fine UI details are not altered by a quality setting. That makes it the safest baseline for pixel diffs and visual-regression tests: a changed pixel is less likely to be a compression artifact.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
Use PNG when a transparent background matters
Set omitBackground: true to hide Puppeteer’s default white background and allow transparency where supported. This is useful for logos, cards intended for compositing, and overlays. Keep the output as PNG when transparency is part of the contract; JPEG cannot represent a transparent background.
Accept the storage trade-off
Lossless output can be larger, especially for full-page captures. If artifact storage or transfer becomes expensive, first check whether the baseline genuinely needs every pixel. If it does, retain PNG and manage retention or dimensions rather than introducing lossy compression into the comparison.
When JPEG is the better trade-off
Choose JPEG for photographic content
Photographs, video stills, and pages dominated by continuous-tone imagery generally tolerate JPEG’s lossy compression better than sharp interface elements do. It is broadly consumable and often produces a smaller artifact.
Set quality deliberately
Puppeteer accepts quality from 0 to 100 for JPEG. A value such as 82 is a practical starting point for a visual preview, but it is not a universal optimum: inspect text, thin lines, and gradients at the size your readers or tests will use. Quality is ignored for PNG, so do not expect a quality value to reduce a PNG.
Do not use JPEG for alpha
JPEG has no transparent background. If a workflow later composites the capture over another color, use PNG with omitBackground: true instead of trying to simulate transparency with a white or colored page background.
When WebP is worth choosing
Use WebP when consumers support it
WebP combines modern compression with a configurable quality value from 0 to 100. It can be a useful middle ground for generated previews, documentation artifacts, or network delivery when PNG files are too large and JPEG’s compatibility or visual behavior is not ideal.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Confirm the entire artifact chain
Check the image viewer used by your CI system, your diff library, issue tracker, object-storage preview, and any downstream conversion step. A WebP screenshot that cannot be opened by one of those tools is less useful than a larger PNG. Record the chosen format in the artifact metadata or filename so a later consumer does not have to infer it.
Quality still needs inspection
WebP’s quality setting is a numeric range, not a guarantee of identical output across all content. Compare representative pages containing text, gradients, and images before standardizing a value.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →How Puppeteer selects the format
Set type explicitly
The ScreenshotOptions.type value can be 'png', 'jpeg', or 'webp'. The documented default is 'png'. Explicit configuration makes a CI job stable if a default changes in a future release or if another helper changes the output path.
Understand extension inference
When you supply path, Puppeteer can infer the screenshot type from the file extension. This is convenient for one-off scripts, but it hides intent in a string. In repeatable tests, specify both a descriptive extension and type; if they disagree, fix the configuration rather than relying on inference.
Know what happens without a path
Without path, page.screenshot() returns image bytes (or base64 when requested). You still choose the encoding with type; the absence of a filename does not make the result format-neutral.
A complete Puppeteer example
Install Puppeteer in the project that runs the capture:
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
npm install puppeteerThe following Node.js script captures the same page as PNG, JPEG, WebP, a transparent overlay, and a full-page PNG. It sets type on every call so the output is unambiguous.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900, deviceScaleFactor: 1 });
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({
path: 'page.png',
type: 'png'
});
await page.screenshot({
path: 'page.jpg',
type: 'jpeg',
quality: 82
});
await page.screenshot({
path: 'page.webp',
type: 'webp',
quality: 80
});
await page.screenshot({
path: 'overlay.png',
type: 'png',
omitBackground: true
});
await page.screenshot({
path: 'full-page.png',
type: 'png',
fullPage: true
});
} finally {
await browser.close();
}
})();Replace https://example.com with the page under test. The default screenshot covers the current viewport; fullPage: true captures the full document. To capture one rendered element instead, pass an element handle to elementHandle.screenshot() or use a locator-based element capture in your Puppeteer version. The format decision remains independent of the target.
Make screenshots reliable in tests
Stabilize the page before encoding it
- Use a deterministic viewport and device scale factor.
- Wait for the state your test actually asserts, not merely for the first HTML response. A page can still be changing after navigation.
- Ensure lazy-loaded images and fonts have arrived before a full-page capture.
- Disable animations or wait for them to finish when motion would create inconsistent pixels.
- Keep the same browser, page state, and capture options for every baseline and comparison.
Separate layout problems from format problems
A very tall page can create a large artifact regardless of encoding. A missing image may be a loading issue rather than a JPEG or WebP quality issue. First reproduce the capture as PNG; then evaluate compression. This gives you a lossless reference for deciding whether a smaller format is acceptable.
Name artifacts so humans can identify them
Include the route, viewport, and format in filenames such as checkout-1440x900-png.png or hero-mobile-webp.webp. Keep the exact options in the test configuration as well. This prevents a reviewer from mistaking a format change for a rendering change.
Choosing quality without blurry text
Start with the consumer, not a magic number
If a file is a regression baseline, use PNG rather than trying to tune JPEG or WebP until it looks lossless. If it is a preview sent over a network, choose JPEG or WebP and inspect the smallest text and sharpest borders at the actual display size.
Test representative pages
- Capture a page with body text, small labels, icons, gradients, and at least one photograph.
- Generate JPEG and WebP at several quality values within Puppeteer’s 0–100 range.
- Compare file size and visual defects in the same viewer used by your team.
- Choose the lowest value that meets that viewer’s readability requirement, then lock it in configuration.
Do not apply the same quality policy to every artifact automatically. A photographic marketing page and a dense admin table have different failure modes.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Common errors and fixes
“Quality has no effect” on a PNG
Cause: Puppeteer does not apply quality to PNG. Fix: use JPEG or WebP when adjustable compression is required, or keep PNG and manage dimensions and retention.
The file extension and actual format disagree
Cause: a helper inferred a type from a path, or type and extension were changed independently. Fix: set an explicit type, use the matching extension, and inspect the artifact with the same decoder used in CI.
The “transparent” image has a white background
Cause: the default page background was retained, or the capture/storage path does not preserve transparency. Fix: use type: 'png' with omitBackground: true, then verify the resulting file through every processing step.
WebP opens locally but fails in CI
Cause: an artifact browser, diff tool, or decoder in the CI path lacks WebP support. Fix: confirm support before adopting WebP, or publish PNG/JPEG for that consumer while retaining WebP only where it is supported.
The full-page screenshot is unexpectedly huge
Cause: fullPage: true captures the entire document, including long or dynamically expanded sections. Fix: capture the viewport or a specific element when that is what the test needs, and make lazy content deterministic before capture.
Text looks different between runs
Cause: the page state, fonts, viewport, device scale, or animation timing changed. Fix: stabilize those inputs first; changing from PNG to JPEG or WebP will not correct an unstable render.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP, or a PDF. Before capture, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
One GET request is enough:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpFor option names, output controls, signed links, asynchronous jobs, and the OpenAPI specification, see the ScreenshotNeo documentation.
Python:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);ScreenshotNeo also supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets or custom viewports, retina scale, PDF paper and page-range options, custom CSS and JavaScript, pre-capture clicks, selector hiding, waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed public image links, signed webhooks for async jobs, bulk capture of up to 100 URLs per call, a usage API, and compatibility with parameter names used by other screenshot APIs.
An MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf without you maintaining a Puppeteer browser setup. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
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 →A practical rule for CI
Use an explicit PNG configuration for visual-regression baselines and transparency-sensitive assets. Use JPEG when photographic content and transfer size dominate. Use WebP only after every consumer is confirmed to decode it, and lock the quality value alongside the viewport and page-state settings. That keeps a format change intentional instead of turning it into a surprise test failure.
Frequently Asked Questions
Can one Puppeteer run create PNG, JPEG, and WebP versions of the same page?
Yes. After the page reaches the required state, call page.screenshot() multiple times with different paths and explicit type values. The example above writes all three encodings from one loaded page.
Should the screenshot format be stored with test metadata?
Yes. Record the format, quality (when applicable), viewport, device scale factor, and capture target with the artifact. This lets reviewers distinguish an intentional encoding change from a rendering change.
What should I do when a downstream system cannot decode WebP?
Publish PNG or JPEG for that consumer, or convert at a controlled artifact boundary. Do not make every developer guess whether a particular CI viewer supports WebP.
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.
