ToolSahla, Tools Sahla

I measured an element's position on my web page, but cropping the screenshot at those numbers lands in the wrong place. Why?

Because the cropper works in the image's real pixels, while you measured in page pixels. On high-density screens a screenshot often holds two or more image pixels for every CSS pixel. An element at 100, 50 sized 300 × 200 on the page sits at X = 200, Y = 100, sized 600 × 400 in the image when the factor is 2.

Published · 3 min read

Two kinds of pixel

Browser developer tools and CSS measurements speak in CSS pixels, a unit that stays the same across screens. A screenshot is saved in the screen's physical pixels. On a standard display the two match, but on high-density laptop and phone screens each CSS pixel maps to a 2 × 2 or 3 × 3 block in the screenshot.

The Image cropper knows nothing about the page you captured. 'X from left', 'Y from top', width and height are all in the original image's pixels, exactly as saved. Type your CSS measurements as they are and the box lands above and to the left of the element, at half its size.

How to find the factor

  1. Open the screenshot in the cropper. A line above it shows the image dimensions, for example 2880 × 1800.
  2. In the browser you captured, find the window width in CSS pixels, for example from the developer tools. Say it is 1440.
  3. Divide the first by the second: 2880 ÷ 1440 = 2. That is the factor.
  4. If the screenshot covers part of the screen rather than the whole window, use an element whose CSS width you know and measure it in the image.

Convert, then crop

Worked example

An element on the page at 100, 50, sized 300 × 200 CSS pixels, with a factor of 2.

Multiply each number by 2: X = 200, Y = 100, width 600, height 400.

With the 'Free' ratio, type the width and height first, then X and Y, and you get a 600 × 400 file framing the element exactly.

Note that X is measured from the image's left edge and Y from its top, even on a right-to-left Arabic page. If you measured the element's position from the right on an RTL page, first subtract its offset and width from the page width to get X.

If you need the file at page size

The 600 × 400 result is sharper than the element looks on a standard screen, which is useful for display on high-density screens. If you need the image at the page size itself, 300 × 200, open the file in the Image resizer and type a width of 300 with the ratio locked, and the height becomes 200.

Other common mistakes

  • Browser zoom changes how many screenshot pixels fall on each CSS pixel. Capture at 100% zoom so the factor stays clean.
  • Phone screenshots have their own device factor, so do not assume 2; work it out the same way.
  • Saving a text-heavy screenshot as JPEG can leave marks around letters. Choose PNG under 'Save as'.

Common questions

Do the fields accept decimals?

No. Position and size fields take whole numbers, since a pixel cannot be split. Round after multiplying if needed.

Can I enter coordinates from the right edge?

No. X is always measured from the image's left edge, and Y from its top.

Is the screenshot uploaded to a server?

No, cropping happens inside your browser.