PolishTools

Pixel ruler

Location /en/tools/pixel-ruler/

Design

Pixel ruler

Measure distances and rectangles in source-image pixels.

Files are processed in this browser.
Pixel rulerPolishTools

Drop a file or choose one. You can also paste an image.

JPG · PNG · WebP / up to 40 MB and 16 MP / no animation or rotation metadata
Settings

Drag between two points, or enter start and end coordinates.

Preview

Choose a file to begin.

Choose a file to begin.

How to use the tool

  1. Open the image

    Choose a screenshot or design image and check its source dimensions.

  2. Place two points

    Drag from start to end, or enter both X/Y coordinates. Width, height, distance and angle appear below the preview.

  3. Save the measurement

    Generate an annotated PNG and a JSON record containing source dimensions and coordinates.

Before you export

Distance and rectangle dimensions

Width and height are coordinate differences. Distance is the diagonal length calculated from them. A 30px horizontal difference and a 40px vertical difference give a distance of 50px.

Screen pixels and image pixels

Measurements use source-image coordinates. A 200px span in a 2× screenshot is not necessarily 200 CSS pixels. Scaling the preview does not change the numbers.

Current limitations

  • JPG · PNG · WebP / up to 40 MB and 16 MP / no animation or rotation metadata
  • Dimensions must be positive integers, up to 8,192px per edge and 16 MP.
  • One two-point measurement at a time; no multi-line measurement set.
  • Angles are zero toward the right and positive toward the bottom of the image.
  • No automatic inference of cm, mm, print dimensions or CSS element sizes.

Questions about the image tool

Is the measurement accurate in a small preview?

Calculation uses original coordinates. For small features that are difficult to select with a pointer, enter the exact coordinates.

Does a span of 100 include 101 pixel positions?

It measures the distance between coordinates, not an inclusive pixel count. X=0 to X=100 spans 100px.

What does the JSON contain?

It stores source dimensions, endpoints, units, width, height, distance and angle. It does not embed the original image.

All guides
Updated 2026-09-06 3 min read

Separate source coordinates from display scale, then use the ruler, color picker and diff tool together.

Read guide →
Updated 2026-09-03 7 min read

Understand common frame shapes and choose what to keep when cropping an image to a new aspect ratio.

Read guide →

Design

Image color picker
Ready Files are processed in this browser