Free tools Windows power users keep installed
One-click scans. No signup required.
The most reliable fix for a blurry or tiny captureSelector() image is to set a deliberately large viewport, wait for the new viewport and final page layout to finish, and capture a visible element in a lossless format. CasperJS inherits PhantomJS’s documented 400×300 default viewport unless you override it. A selector capture clips the pixels that the page rendered; it does not create additional resolution or upscale the element. Set the viewport before loading or capturing, wait for images and client-side rendering, then use PNG for text and interface detail.
What controls captureSelector quality
Five factors determine the result you see in a selector screenshot:
- Rendered pixel dimensions: the element can only be as detailed as the pixels produced by the current viewport and page layout.
- Responsive layout: a 400×300 viewport can activate mobile rules, narrow columns, smaller type, or alternate components.
- Selector bounds:
captureSelector()captures the page area containing the selected element, including any dimensions, padding, transforms, or overflow that the browser actually renders. - Timing: capturing before images, fonts, JavaScript components, or late layout changes finish can produce incomplete or soft-looking output.
- Image encoding: PNG preserves text and sharp edges; JPEG trades detail for a smaller file. A quality value cannot restore pixels that were never rendered.
Consequently, changing only quality to 100 rarely fixes a small selector image. Diagnose the viewport, layout, timing, and selector first.
Set the viewport before capturing
PhantomJS starts with a 400×300 viewport, and CasperJS does not override it by default. That default is suitable for a quick smoke test, not for documenting a desktop interface. Choose dimensions that match the layout you intend to capture: for example, 1440×900 for a desktop page, or a specific mobile width when you are intentionally testing a mobile breakpoint.
#1 Best Overall
CasperJS changes the viewport asynchronously. Wait for that operation to complete before waiting for the target or taking the screenshot; otherwise the page may still be laid out at the old size.
Complete CasperJS example
var casper = require('casper').create({
pageSettings: {
loadImages: true
}
});
var url = 'https://example.com';
casper.start(url, function () {
this.viewport(1440, 900).then(function () {
this.waitForSelector('#target', function () {
this.captureSelector('target.png', '#target', {
format: 'png',
quality: 100
});
}, function () {
this.die('The target selector did not appear.');
});
});
});
casper.run();The 1440×900 values are an example, not a universal optimum. Use a width and height that reproduce the intended responsive state. If the target depends on a script that runs after the selector first appears, add a targeted wait or a short delay after the relevant condition rather than capturing immediately.
Wait for the final layout, not merely the initial HTML
A selector can exist in the DOM while its useful content is still loading. Images may not have arrived, a chart may still be drawing, and a client-side framework may replace placeholder markup after the first render. Set pageSettings.loadImages to true, wait for a meaningful selector, and add a condition for any page-specific ready state when possible.
Use a selector that represents visual readiness
Prefer a visible, stable element such as a completed card, chart container, or application shell. A wrapper that appears before its children can produce a valid file with missing content. If the page exposes a “loaded” class or a final child node, wait for that instead.
Rank #2
Allow fonts and asynchronous components to settle
Web fonts and JavaScript can change element dimensions after the selector is found. A short, explicit delay can help on pages without a better readiness signal, but it is less reliable than waiting for a known element or state. Keep the delay only as long as the page needs; excessive waits reduce throughput without increasing quality.
Choose and verify the selector
captureSelector(targetFile, selector, imgOptions) captures the area containing a CSS selector. It does not capture an abstract component or infer the bounds you meant. Inspect the selected element in the page and confirm:
- It is visible and has non-zero rendered width and height.
- It is the final element rather than a placeholder or hidden duplicate.
- Its parent does not impose unexpected clipping with
overflow. - CSS transforms are not shrinking, scaling, or moving the content relative to its layout box.
- Responsive rules have not replaced the desktop component with a compact version.
- Padding and borders are intentional; a large wrapper can make the actual content appear tiny in the output.
If the screenshot is cropped, compare the selected element’s rendered bounding box with what you expect. A selector capture follows the rendered page area; it will not add margins outside that area or recover content clipped by CSS.
Use format and quality deliberately
PNG for text and interface detail
Set format: 'png' when the image contains code, labels, icons, tables, or UI edges. PNG is lossless, so it avoids JPEG ringing and block artifacts around high-contrast text.
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 glitchesJPEG when file size matters
JPEG can be appropriate for photographic content or when a smaller file is more important than pixel-perfect edges. Set a high quality value, from 1 through 100, and inspect the result at its intended display size. JPEG quality controls compression; it cannot increase the source resolution.
Force the format instead of relying on the filename
The imgOptions.format setting forces the image format. Use it when you want the output encoding to be unambiguous, even if the target filename has a different extension. imgOptions.quality accepts values from 1 to 100.
Diagnose a blurry, tiny, or cropped result
The file is sharp but unexpectedly small
- Record the output dimensions and the viewport dimensions.
- Confirm that
casper.viewport(width, height)completed before capture. - Check whether responsive CSS selected a compact breakpoint.
- Inspect the target’s rendered width and height, including transforms and parent constraints.
- Capture the same page with a larger intentional viewport and compare the element bounds.
If the element itself is rendered at a small size, a screenshot tool cannot make its text genuinely sharper by changing JPEG quality.
The result is cropped
- Check whether the selector’s parent uses
overflow: hiddenor a fixed height. - Look for transforms that move content outside the element’s normal box.
- Make sure you selected the content container rather than a narrow wrapper.
- Compare the selector capture with a full-page capture using a clip rectangle around the same coordinates.
Images or widgets are missing
Keep loadImages: true, wait for the image or widget’s final selector, and verify that the page does not require an interaction or an additional network request. A selector’s presence alone does not prove that its children have finished rendering.
Rank #4
The page is captured before a layout shift
Move the capture after the page-specific ready signal. If no signal exists, wait for the relevant content and use a conservative delay. Repeat the capture with the same viewport and timing to determine whether the page is nondeterministic.
Compare captureSelector with a clip rectangle
capture() accepts a clipRect and the same format and quality controls. Use it as a diagnostic, not as an automatic quality upgrade. If a clip rectangle is sharp while captureSelector() is not, inspect selector bounds, transforms, and element sizing. If both are soft, the limitation is probably the rendered viewport, page scale, source assets, or timing.
casper.then(function () {
this.capture('diagnostic.png', {
clipRect: {
top: 120,
left: 80,
width: 900,
height: 600
},
format: 'png',
quality: 100
});
});The coordinates above are illustrative. Obtain coordinates from the page you are diagnosing rather than copying them unchanged.
Use captureBase64 when you need an in-memory result
captureBase64() can capture the whole page or an area specified by a CSS selector, clip rectangle, or selector object. Supported formats include BMP, JPG/JPEG, PNG, PPM, TIFF, XBM, and XPM. This is useful when a pipeline sends image data directly to another service instead of writing a file first, but it does not change the underlying viewport or rendered-pixel limits.
Recommended Free Tools
Check CasperJS and PhantomJS versions
Legacy rendering differences can affect screenshot output. One community report described poor selector output with PhantomJS 1.9.7 and CasperJS 1.0.2, followed by an improvement after upgrading to PhantomJS 1.9.8 and CasperJS 1.1.0-beta3. That is anecdotal evidence, not a compatibility guarantee. Record the exact versions in your test log, reproduce the same URL, viewport, selector, and format, and validate any upgrade in your own environment before relying on it.
Do not treat a version change as a substitute for layout diagnosis. A different binary may alter rendering, but it will not make a deliberately 200-pixel-wide element contain desktop-resolution text.
A repeatable quality checklist
- Choose the intended viewport and set it explicitly.
- Wait for the asynchronous viewport change to complete.
- Enable image loading and wait for the final visual selector or ready state.
- Verify the target is visible, correctly sized, and not transformed or clipped.
- Capture PNG for text and UI; use JPEG only for a deliberate size trade-off.
- Use
quality: 100only when the chosen format benefits from it; do not expect it to add resolution. - Compare with
capture()and aclipRectwhen selector bounds are suspect. - Record CasperJS and PhantomJS versions when comparing environments.
- Repeat the same run to detect late layout shifts or nondeterministic rendering.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server when maintaining a CasperJS/PhantomJS browser is unnecessary. A single GET request returns PNG, JPEG, WebP, or PDF. For a basic capture, see the ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before the capture, ScreenshotNeo accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. Sign up for the free ScreenshotNeo plan.
FAQ
Does captureSelector support a higher device pixel ratio?
The documented CasperJS controls covered here set viewport dimensions and image encoding; they do not provide a separate selector-resolution multiplier. Increase the intended viewport and ensure the element is rendered at the required size rather than expecting post-capture upscaling.
Why does a full-page capture look better than a selector capture?
The two captures may use different effective regions or expose a selector’s padding, transform, or responsive sizing. Compare their rendered dimensions and use a clip rectangle around the same page coordinates to isolate the cause.
Is quality 100 always the best setting?
It is the maximum accepted quality value, but it matters mainly for lossy formats. PNG remains the safer choice for crisp text and interface edges, while JPEG may be preferable when a smaller file is the priority.
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.
