The practical answer
For this 200×100 CSS-pixel tile, a device-scale capture is 200×100 at device ratio 1 and 400×200 at ratio 2. At ratio 2, selecting CSS-scale capture produces 200×100 instead. These are results for specified browser contexts and screenshot options, rather than a universal rule for every operating-system capture tool.
Give every width a unit
The 200 reported for an element, the 400 recorded in a PNG and the width used in a document describe different objects. CSS pixels define layout; a raster file records a pixel grid; an inserted image may then have a separate display size. They need not be equal.
MDN’s devicePixelRatio reference describes the device-to-CSS pixel ratio and explains that page zoom can change it while pinch zoom does not. A page marked 100% therefore does not by itself determine the saved image dimensions. Capture software can also rescale its output.
| Object | This case records | What it cannot establish alone |
|---|---|---|
| Page element | 200×100 CSS pixels, including its border | The output dimensions of every capture program |
| Actual PNG | 200×100 or 400×200 pixels | Its display size after insertion |
| Image in a document | Displayed at 200×100 if required | Whether the source detail and text remain readable |
A 200×100 tile with text and a visible border
The exercise pack contains an original tile.html. It has a light-blue rectangle, a dark border, labels A and B and two lines of text, with no remote images, login or business information. The border-box model includes the 2-pixel border inside the stated dimensions, so a box-model difference does not masquerade as capture scaling.
Open the HTML in a browser and inspect the element’s bounds first. For your own page, remove changing variables such as CSS transforms, percentage-based dimensions or animation before diagnosing density. A capture in which several conditions change cannot isolate the cause.
width:200px; height:100px; box-sizing:border-box; border:2px solid #0f172a; background:#dbeafe; font:16px/1.4 Arial,sans-serif;Keep the layout fixed and change one capture option
The controlled comparison uses isolated automated Edge contexts with a fixed 800×600 viewport and device scale factors 1 and 2. The page content and element dimensions stay identical. Each capture targets the element, excluding browser chrome. The ratio 2 image is a fresh page rendering, rather than an enlarged copy of the first small image.
Playwright’s screenshot options distinguish CSS-scale from device-scale output. The exercise uses that control deliberately. System shortcuts, extensions and hosted capture services can follow different rules; inspect their settings and the dimensions of their actual output separately.
Three captures from the same HTML
- A
Device ratio 1, device output
Record the 200×100 element and save device-1.png.
- B
Device ratio 2, device output
The element remains 200×100. Save device-2.png; both encoded dimensions should double.
- C
Device ratio 2, CSS output
Keep the page unchanged and select CSS-scale output. Save css-2.png.
Check dimensions, aspect ratio and actual content
The encoded PNG dimensions should match the table. Doubling both axes multiplies the pixel count by four: 200 × 100 = 20,000, while 400 × 200 = 80,000. This does not predict a fourfold file size, because PNG compression also depends on its content.
Open each actual downloaded file and check that A is on the left, B on the right, the border is complete and no text is clipped. A viewer’s 100% pixel display helps inspect the raster. Displaying the 400×200 image inside a 200×100 box is also a valid visual comparison, but that is display scaling and does not change the file’s encoded dimensions.
| File | Recorded element bounds | Encoded PNG dimensions | Pixel count |
|---|---|---|---|
| device-1.png | 200×100 CSS pixels | 200×100 | 20000 |
| device-2.png | 200×100 CSS pixels | 400×200 | 80000 |
| css-2.png | 200×100 CSS pixels | 200×100 | 20000 |
Retain the scale your delivery actually needs
For a small interface illustration, retaining the higher-pixel original capture and specifying its display size can be useful. If a recipient requires an exact 200×100 file, export or resize a separate copy to that size. Name the original and delivery copy separately so that a reduced image does not become the only source for future edits.
For trimming unwanted space, follow the original-versus-preview crop coordinate guide. If only a low-pixel older capture survives, use the upscaling and detail explanation; resampling cannot restore missing letter shapes.
If the border becomes thicker as well, inspect capture scale first. If half a line is missing, inspect clipping and scroll coverage. If dimensions are correct but text looks soft, examine the source, resampling path and final display. Changing a DPI tag, repeatedly saving or renaming a file cannot replace those checks.
Ready to deliver this screenshot?
- Keep the page/source version and original capture; do not mix different layouts.
- Record CSS element dimensions, encoded PNG dimensions and intended display size separately.
- Open the actual receiving document or page and inspect small text, borders and clipping.
- Create a differently sized delivery copy from the original capture when required.
Common questions
Does device ratio 2 always mean a clearer image?
No. A fresh high-density rendering can retain more raster information in text, but it cannot automatically fix an embedded low-resolution image, an already blurred page or later compression. Read the actual content at its final display size instead of comparing pixel counts alone.
