How to Fix Blurry Website Screenshots from Chrome DevTools

A blurry Chrome DevTools screenshot usually comes from one of three places: the page is already rendering fuzzy imagery, the capture has too few pixels for its CSS viewport, or another app resized or compressed the file afterward. First compare the page in DevTools with the saved original. Then set the intended viewport and device pixel ratio (DPR), choose viewport or full-page capture, and inspect the exported pixel dimensions. If the page itself is blurry, fix the source asset or responsive-image selection; a screenshot cannot restore missing image detail.

Chrome defines DPR as the ratio between physical screen pixels and logical CSS pixels. A viewport is measured in CSS pixels, so viewport dimensions alone do not guarantee a particular bitmap size. See the official Chrome Device Mode documentation.

1. Find where the blur starts

Open the page in Chrome DevTools and look at it at its intended display size before capturing.
Capture a screenshot and open the original file at 100% zoom in an image viewer.
Compare the two. If the page is already soft in DevTools, investigate the page and its image assets. If the page is sharp but the original screenshot is small or soft, inspect viewport, DPR, and any automated capture scaling. If only a copy pasted into a document or shared elsewhere looks soft, compare its dimensions and appearance with the original; downstream resizing or compression is a possibility.

Do not judge sharpness only from a preview that automatically scales an image to fit a window. Check the file’s pixel width and height, and view it at its original size. A high pixel count also does not prove that the source image contains enough detail.

2. Set the viewport and DPR in DevTools

Open DevTools and turn on Device Mode with the device toolbar toggle.
Choose Responsive to enter the required viewport width and height in CSS pixels, or select a device preset if you are reproducing its layout.
Open the Device Mode toolbar’s More options menu and select Add device pixel ratio if the DPR control is not visible.
Choose a DPR that matches the target device when reproducing it. For a denser capture, choose a larger DPR, then verify the actual exported image dimensions.
Capture again and inspect the saved file. Do not assume a particular output size without checking it.

DPR controls how many device pixels Chrome uses to draw each CSS pixel in the emulated viewport. It affects pixel density; it does not change the CSS layout width in the same way that changing the viewport does. A larger DPR can produce a larger image file and more pixels, but cannot make a low-resolution source image detailed.

3. Choose the right capture scope

In Device Mode, open More options and choose the capture operation that matches the framing you need:

Capture screenshot captures the current viewport.
Capture full size screenshot captures the full page, including content outside the current viewport.

Full-page capture changes the amount of page included; it is not a sharpness setting. Set the viewport and DPR deliberately for either capture, and check the resulting file dimensions. See the official Device Mode guide for the current controls.

4. If the page itself is blurry, fix the image source

When imagery is fuzzy before capture, inspect the selected image asset, its rendered CSS size, and any responsive-image rules. The browser can only capture the pixels the page renders. A low-resolution bitmap enlarged beyond its intended size remains soft in a high-DPR screenshot.

Check the image URL the browser actually selected and compare its intrinsic pixel dimensions with its rendered size.
Provide appropriately sized responsive variants and selection conditions so the browser can choose a suitable source for the viewport and DPR.
Consider SVG for suitable graphics that need to scale to different sizes.
Check CSS sizing and transforms that may enlarge or resample an image.

Chrome Lighthouse’s guidance on responsive images discusses rendered-size comparisons that account for DPR, responsive variants, and vector formats. Changing screenshot settings will not repair a fuzzy source asset.

5. Check automated capture settings

If a script or automation tool takes the screenshot, compare its emulated device metrics and screenshot options with the intended viewport and pixel dimensions. The Chrome DevTools Protocol Page domain exposes device metrics including deviceScaleFactor, as well as a screenshot scale control. An override or rescaling step can affect the final bitmap.

For protocol details, consult the primary Chrome DevTools Protocol Page domain reference. Record the configured CSS viewport, device scale factor, screenshot scale, and output file dimensions when diagnosing an automated capture. Change one setting at a time so you can identify which step changes the result.

6. Decision guide

What you observe	Likely area	Next check
Page is sharp; saved screenshot is too small or soft	Capture viewport, DPR, or automation scaling	Set intended viewport and DPR; inspect exported pixel dimensions.
Page imagery is fuzzy before capture	Source asset or responsive-image choice	Inspect the selected asset, rendered size, DPR-aware variants, or SVG suitability.
Original is sharp; shared or pasted copy is soft	Possible downstream resizing or compression	Compare the original file with the copy and check the copy’s dimensions.
You need content beyond the visible screen	Capture scope	Use Capture a full size screenshot.
You need to match a physical phone	Limits of emulation	Validate on the actual device when fidelity matters.

7. Troubleshooting common problems

The screenshot is still blurry after raising DPR

Check whether the page itself is blurry before capture. If it is, inspect the source image and rendered size. If the page looks sharp, verify that the new DPR was applied and inspect the original export’s pixel dimensions. Also check whether a later step resized or compressed the file.

The screenshot has more pixels but still looks soft

More output pixels do not create detail absent from the page’s source assets. Check the selected responsive image, its intrinsic dimensions, and any enlargement from CSS. Replace or serve a better-suited asset where needed.

The image is sharp in the viewer but soft in a document or upload

Compare the original and the copy at 100% and inspect their pixel dimensions. The receiving app may have resized or compressed the image, but behavior varies; verify the actual copy rather than assuming the cause.

The full-page screenshot looks different from the viewport capture

These capture options have different scopes. Use the viewport option for the visible screen and full-size capture for the whole page. Neither option by itself guarantees a sharper image; verify viewport, DPR, and output dimensions.

The emulated phone capture does not match the real device

Device Mode approximates mobile behavior from desktop Chrome. Chrome recommends using a real device when the difference matters. See Device Mode’s limitations and testing guidance.

8. Performance, reliability, and file-size trade-offs

Increasing DPR can increase output dimensions and file size, so use the density the target display or downstream workflow needs. Full-page capture includes more content and can produce a taller image than viewport capture. For consistent results, note the viewport, DPR, capture scope, browser context, and output dimensions together.

For device-specific fidelity, treat desktop emulation as a useful approximation and validate on actual hardware when that distinction matters. When sharpness changes unexpectedly, compare the original captured file rather than a later copy, and isolate capture settings from page asset changes.

Or skip the browser setup

ScreenshotNeo takes a website screenshot with one GET request. The example saves a WebP screenshot of Stripe; replace the target URL as needed. See the ScreenshotNeo API documentation for options and parameters.

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

ScreenshotNeo accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server lets AI agents use 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 screenshots. Every feature is on every plan. Learn more at ScreenshotNeo, then sign up free for 1,000 screenshots a month, with no card required.

FAQ

Does a larger DPR always make a screenshot sharper?

No. It can increase capture pixel density, but it cannot restore detail missing from source imagery or undo later resizing.

Should I use viewport capture or full-page capture?

Use viewport capture for the current visible screen and full-size capture when you need content across the whole page.

Can DevTools emulation guarantee an exact phone screenshot?

No. It approximates mobile behavior from desktop Chrome. Validate on the actual device when exact device behavior matters.

What should I check first when only one image is blurry?

Inspect that image’s selected source, intrinsic pixel dimensions, and rendered size before changing the screenshot settings.