How to Capture a Website Screenshot at a Specific Device Pixel Ratio with Screenshot.rocks
Set the device pixel ratio in Chrome DevTools before capturing with Screenshot.rocks. Learn how DPR differs from viewport size and how to capture full pages.
Direct answer: Set the device pixel ratio (DPR) in Chrome DevTools Device Mode before taking the screenshot. Screenshot.rocks’ extension captures the visible tab at the screen’s full resolution and opens it in the editor for styling and export; its published workflow does not document a numeric DPR setting in the editor itself. For a reproducible capture, record both the viewport in CSS pixels and the DPR.
What DPR changes
DPR is the ratio between physical pixels and logical CSS pixels. A viewport controls the page’s layout area; DPR controls how many output pixels correspond to each CSS pixel. For example, a 400 × 800 CSS-pixel viewport at DPR 2 corresponds to a nominal 800 × 1600 physical-pixel rendering area. That arithmetic describes the emulated pixel density, not a guarantee about the final exported file’s dimensions.
Changing DPR does not mean changing the responsive breakpoint: keep the viewport dimensions fixed when comparing density. When exact output dimensions matter, inspect the saved image’s pixel dimensions.
Capture a visible viewport with Screenshot.rocks
- Open the target page in Chrome and open DevTools.
- Enable Device Mode using the device toolbar control.
- In Device Mode, open More options and choose Add device pixel ratio if the DPR control is not already visible.
- Set the viewport width and height in CSS pixels, then select the required DPR in the toolbar.
- Wait for the page to finish rendering. If content is lazy-loaded, scroll through the relevant area first.
- Use the Screenshot.rocks extension to capture the visible tab. Its documented extension workflow captures the visible portion at the screen’s full resolution and opens the result in the editor.
- Choose a frame, style, and background in the editor, then export. The extension listing describes PNG, JPG, and SVG export formats.
Chrome’s Device Mode documentation describes the DPR control and the distinction between device emulation and the page viewport. Screenshot.rocks’ extension guide documents the capture and editor workflow.
Record the capture settings
For repeatable work, note settings in this form: viewport: 400 × 800 CSS px; DPR: 2; scope: visible viewport. Also record browser zoom and whether the capture is a viewport or a full page. If you need a particular pixel size, verify the saved file rather than inferring it from the toolbar alone.
Capture a full page
The Screenshot.rocks extension guide says its extension captures only what is visible in the tab. For a full-length result, use Chrome’s full-page screenshot workflow, save the resulting image, and import it into the Screenshot.rocks editor for mockup styling. The full-page capture may have different practical constraints from a viewport capture, especially on pages with lazy-loaded content or very long layouts; scroll the page first when needed and check the exported dimensions.
Use an existing screenshot
You can import an existing image into the editor to style it as a mockup. The image’s pixel data is already fixed: importing it cannot change the DPR at which the website was originally rendered. If the image needs a different density or responsive layout, capture the page again with the desired browser settings.
Options and decisions
| Need | Workflow | What to keep in mind |
|---|---|---|
| Show a particular responsive layout | Set the CSS-pixel viewport in Device Mode, then choose DPR. | Viewport determines the layout; DPR determines pixel density. |
| Capture what is currently visible | Use the Screenshot.rocks extension after setting DPR. | The documented extension capture is limited to the visible tab. |
| Capture the entire page | Use the browser’s full-page capture, then import the image into the editor. | Do not assume the extension itself captures the full page. |
| Style a screenshot already on disk | Import or paste the image into the editor. | Styling does not retroactively change browser rendering or DPR. |
| Need exact output dimensions | Set viewport and DPR, capture, then inspect the saved file. | Do not assume a universal exported dimension from DPR alone. |
Screenshot.rocks describes itself as an online mockup tool for browser and mobile screenshots; its repository is MIT licensed. Those facts concern the tool and its code, not a promise about capture dimensions or browser behavior.
Troubleshooting
The DPR control is missing
Open Device Mode’s More options menu and select Add device pixel ratio. The control may not be displayed until added.
The layout changed when I changed DPR
Check that the viewport width and height stayed the same. A changed CSS viewport can trigger a different responsive layout; DPR and viewport are separate settings.
The saved image dimensions are not what I expected
Inspect the saved file’s actual pixel dimensions. Confirm the viewport, DPR, browser zoom, and capture scope. The available documentation does not promise one universal output dimension for every operating system, browser, and display combination.
The screenshot contains only part of the page
That is the extension’s documented behavior: it captures the visible tab. Use the browser’s full-page capture and import the result into the editor when you need the whole scrollable page.
Images or lower sections are missing
Some pages load media as you scroll. Scroll through the target content and wait for it to appear before capturing. For a full-page file, confirm the browser capture included the loaded sections.
Importing an image did not make it sharper
An editor can style an existing image but cannot recover pixels that were not present in the source. Re-capture the webpage at the desired DPR and viewport if you need more rendered detail.
Performance, reliability, and cost
This workflow uses Chrome’s local device emulation and a browser extension, so capture time depends on the page’s loading behavior and your browser environment. Large full-page images can take longer to create and may be less convenient to edit or export. For reliable comparisons, use the same browser, viewport, DPR, zoom, and page state each time, and inspect the output dimensions when they matter.
The cited workflow does not specify a universal capture-time benchmark or a fixed output-size guarantee. Screenshot.rocks’ repository is MIT licensed; check its repository and extension listing for their current terms and availability. The core workflow described here does not require buying a physical device.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF; its options include device presets, custom viewport dimensions, and retina scale. See the API documentation for request parameters and setup.
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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. 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 to get started.
FAQ
Does Screenshot.rocks have a DPR setting?
The published workflow covers browser capture and mockup styling, not a numeric DPR control in the editor. Set DPR in Chrome Device Mode before capture.
Can the Screenshot.rocks extension capture a full page?
The extension guide says it captures the visible part of the tab. Use the browser’s full-page capture and import that image for a full-page mockup.
Does DPR change the page’s responsive breakpoint?
DPR and CSS viewport dimensions are independent inputs. Keep the viewport fixed to compare density without intentionally changing the layout size.
