How to Make Website Screenshots Sharper

Capture at the viewport size you need, then render at the device pixel ratio (DPR) or device scale. In Chrome DevTools, set the viewport and DPR in Device Mode before using Capture screenshot or Capture full size screenshot. In Firefox, use the :screenshot helper with --dpr and --fullpage. In Playwright, set scale: "device". These controls add pixels to browser-rendered text, CSS, and SVG. They cannot restore detail that is missing from a low-resolution image or canvas.

DPR is a rendering ratio: Chrome uses it to map CSS pixels to physical pixels. A larger output is not automatically better if it changes the responsive layout or creates a file that is too large for its destination. Set the layout first, choose the smallest useful scale, and inspect the exported file at its native size.

Why website screenshots look blurry

Most blur comes from one of four causes:

CSS-pixel capture: the image contains one output pixel per CSS pixel even though the browser could render more.
Wrong viewport: changing width crosses a responsive breakpoint, so the page reflows and may look less suitable for the intended use.
Downscaling after capture: an editor, CMS, chat app, or document export reduces the image dimensions.
Blurry source content: a raster image is displayed larger than its source, or a canvas has a backing store smaller than its CSS size.

Page zoom changes window.devicePixelRatio; pinch zoom does not. See the MDN devicePixelRatio documentation and Chrome DevTools Device Mode documentation.

Choose the viewport before the pixel density

Define the deliverable: desktop or mobile, viewport width and height, visible viewport or full page, and required file format.
Set those CSS-pixel dimensions in your capture tool. Check media-query breakpoints so the page uses the intended layout.
Only then increase DPR or device scale. A wider viewport can select a different navigation, grid, font size, or image source.
Keep the same viewport and scale for before-and-after comparisons.

A high-DPR capture of the wrong layout is still the wrong screenshot. Responsive image selection can also change with viewport width and density, so record both values when reproducibility matters.

Take a sharper screenshot in Chrome

Open the page in Chrome and open DevTools.
Toggle Device Toolbar.
Enter the required width and height. Select a device preset or use custom dimensions.
Set the device pixel ratio in Device Mode. Use the smallest value that meets the destination’s pixel requirement.
For the visible viewport, open the Command Menu and choose Capture screenshot. For the entire document, choose Capture full size screenshot.
Open the saved file at 100% zoom. Confirm that text and CSS edges are crisp and that a later export did not resize it.

Use viewport capture for a composition that must match what is currently visible. Use full-size capture when below-the-fold content belongs in one image. Full-page capture can create very tall files; check the receiving system’s maximum dimensions.

Capture at device scale with Playwright

Playwright distinguishes CSS-pixel output from device-pixel output. The following JavaScript example captures both a viewport and a full page at device scale. Install Playwright with npm install playwright and run npx playwright install chromium once.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 1440, height: 900 },
    deviceScaleFactor: 2
  });

  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({
    path: 'viewport@2x.png',
    scale: 'device',
    type: 'png'
  });
  await page.screenshot({
    path: 'full-page@2x.png',
    fullPage: true,
    scale: 'device',
    type: 'png'
  });

  await browser.close();
})();

scale: "css" produces CSS-pixel dimensions; scale: "device" uses the device scale. Playwright supports PNG, JPEG, and WebP. Choose the format required by your pipeline rather than assuming one format is universally sharper. See the Playwright screenshot documentation.

Python Playwright

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(
        viewport={"width": 1440, "height": 900},
        device_scale_factor=2,
    )
    page.goto("https://example.com", wait_until="networkidle")
    page.screenshot(path="viewport@2x.png", scale="device")
    page.screenshot(path="full-page@2x.png", full_page=True, scale="device")
    browser.close()

Use Firefox’s screenshot helper

Firefox’s Web Console provides a :screenshot helper. The exact helper syntax is documented in Mozilla’s Web Console command reference.

:screenshot viewport.png --dpr 2
:screenshot page.png --fullpage --dpr 2
:screenshot card.png --selector ".pricing-card" --dpr 2 --delay 500

--fullpage includes content below the viewport. --selector limits capture to an element, and --delay lets a hover menu, animation, or other transient state settle before capture.

Fix blurry images and canvases

Raster images

A screenshot cannot invent pixels that are absent from the source image. If a 600-pixel image is rendered at 1,200 CSS pixels, increasing screenshot DPR captures a larger version of the same soft source. Use a source image with enough intrinsic pixels, provide responsive image candidates, and avoid enlarging a small asset with CSS.

Canvas

Canvas has a CSS display size and a separate bitmap backing size. Set the backing dimensions using window.devicePixelRatio, then scale the drawing context so the canvas remains the intended CSS size:

const canvas = document.querySelector('canvas');
const cssWidth = 600;
const cssHeight = 300;
const dpr = window.devicePixelRatio || 1;

canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;
canvas.width = Math.round(cssWidth * dpr);
canvas.height = Math.round(cssHeight * dpr);

const context = canvas.getContext('2d');
context.scale(dpr, dpr);
// Draw using CSS-pixel coordinates from here.

MDN documents the DPR-aware canvas pattern, and web.dev explains why an undersized raster image becomes low resolution when enlarged. A sharper capture fixes browser-rendered edges; it does not replace the source asset.

Pick the right capture scope and format

Need	Capture choice	Sharpness consideration
Visible composition	Viewport screenshot	Use the exact layout dimensions and device scale.
Everything below the fold	Full-page screenshot	Expect larger dimensions and longer capture time.
One component	Element or selector capture	Avoids scaling an entire page when only a card or chart is needed.
Transparent graphic	PNG or a tool’s transparent-background option	Preserves edges against a new background.
Smaller delivery file	WebP or JPEG where supported	Compression settings can soften fine text; inspect the result.

Keep the capture at native size until the final delivery step. If a design requires a smaller image, resize once with a high-quality resampling method and avoid repeated save-and-resize cycles.

Automate reliable sharp captures

Wait for the page state you need: a selector, a fixed delay, or network idle.
Disable animations or pause them before capture when comparing versions.
Wait for lazy-loaded images and fonts. A full-page image can otherwise contain blank or fallback regions.
Use a fixed viewport, DPR, browser version, timezone, locale, and user agent for repeatable output.
Save PNG for pixel comparisons; choose JPEG or WebP when file size matters and compression artifacts are acceptable.
Check output dimensions and file size before uploading to a downstream service.

Troubleshooting blurry screenshots

Symptom	Likely cause	Fix
Everything is soft	CSS-scale capture or a later downscale	Use device scale/DPR and inspect the original file at 100%.
Only one photo is blurry	The source raster is too small	Use a larger source or a responsive image candidate.
Only a chart or canvas is blurry	Backing dimensions equal CSS dimensions	Multiply canvas width and height by DPR and scale the context.
The page layout changed	Viewport crossed a responsive breakpoint	Restore the target viewport before changing DPR.
Full-page capture has blank images	Lazy loading has not completed	Scroll or wait for the image selector/network idle before capture.
Text looks jagged after export	JPEG compression or repeated resizing	Use PNG for text-heavy images and resize only once.
Capture is unexpectedly huge	High DPR combined with a tall page	Use element or viewport capture, reduce DPR, or deliver a resized copy.
A menu is missing	Hover or animation state was not active	Trigger the state and use a short delay before capture.

Performance, reliability, and cost

Higher DPR increases pixel count, memory use, encoding work, and file size. Full-page captures multiply that cost by page height. Start with the destination’s required dimensions, then increase scale only when inspection shows a need. Element captures are usually more efficient than rendering an entire page when you need one component.

For automated jobs, treat a screenshot as a rendered state: wait for the required content, make the environment deterministic, and retry only transient navigation failures. Record viewport, DPR, URL, and output format with each artifact so a later comparison is meaningful.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. It can render PNG, JPEG, WebP, or PDF and includes a retina scale option, full-page capture, element capture, custom CSS and JavaScript, waits, blocking controls, headers, cookies, user agents, timezone and geolocation settings, resizing, caching, signed links, async jobs, bulk capture, and a usage API. The parameter names used by other screenshot APIs also work, which can simplify migration. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import 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}`);

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers report the page verdict and billing state. Its MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

FAQ

Does increasing DPR sharpen a blurry source image?

No. It adds pixels to the browser rendering, but a low-resolution raster image or canvas still lacks source detail.

Is a 2× screenshot always better than 1×?

Not always. Choose the scale required by the destination. A larger file costs more memory and may be resized later.

Should I use PNG, JPEG, or WebP?

Use PNG for lossless text and UI comparisons. JPEG or WebP can reduce size when their compression does not damage the details you need.

Why did a sharper capture show a different design?

The viewport probably changed a responsive breakpoint or selected a different density-specific image. Fix the viewport before comparing DPR values.

Can a monitor or cable make the screenshot file sharper?

No. Display hardware changes how you see the file; it does not add detail to pixels already captured.