How to measure pixels in an image

Open the original image

Start with the original file whenever possible. A thumbnail, a resized chat attachment or a screenshot of another screenshot has a different pixel grid. Measuring it accurately still gives you the dimensions of that copy, not the dimensions of the source artwork.

Open the pixel measurement tool and choose a PNG, JPG, WebP, AVIF or BMP file. The tool shows the full decoded width and height. Check those dimensions before drawing a selection: an unexpectedly small width is a useful clue that you downloaded a preview instead of the original asset. The selected image stays in your browser; this ruler does not send it to a conversion server.

Choose a line or a rectangle

Use Line when you need the straight-line span between two points. A horizontal line measures a width, a vertical line measures a height, and a diagonal line measures the shortest distance between its endpoints. The endpoint coordinates remain editable, so you can align the two Y values for an exactly horizontal line or align their X values for a vertical one.

Use Rectangle when you need a bounding box. Drag from one corner to the opposite corner to read its width, height and area. Dragging in the reverse direction produces the same dimensions. A 30 by 40 pixel rectangle has an area of 1,200 square pixels; its diagonal is 50 pixels. These are different quantities, so record the one your task actually requires.

Measure edges to avoid an extra pixel

The ruler uses edge coordinates. The top-left outer corner is X 0, Y 0. X increases to the right and Y increases downward. A 100-pixel-wide image runs from its left edge at X 0 to its right edge at X 100.

A box beginning at X 10 and ending at X 30 is 20 pixels wide. Do not add one to this edge-to-edge span. Counting indexed pixel centres is a different convention: pixels numbered 10 through 30 include 21 pixels. Mixing the two conventions is a common reason for a one-pixel discrepancy in a handoff. For sprite boundaries and crop rectangles, recording the outer edges makes the intended extent explicit.

Zoom in and refine the coordinates

Zoom changes how large the preview appears; it does not change the image or measurement units. Increase it to distinguish a border from its shadow, then use the scrollbars to reach the part of the image you need. Use Fit to bring the full width back into view.

For a repeatable result, enter the start and end coordinates directly. This is especially helpful when a large image has been reduced to fit the screen and a small mouse movement crosses several source pixels. Read image pixels versus CSS pixels before translating screenshot measurements into website layout values.

Decide what belongs inside the boundary

Transparent padding is part of the image dimensions but may not be part of the visible logo. A shadow can extend beyond a button, and an anti-aliased edge can fade across several pixels. Decide whether your measurement includes padding, shadows and partially visible edge pixels before comparing two assets.

Use the same rule for both measurements and note it alongside the copied result. The tool does not detect objects or infer which edge you intended. Use Trapezoid when a four-sided shape has slanted edges, then move each corner independently; its central height label measures between the top and bottom edge midpoints. If your source is vector artwork, render the SVG to PNG at a known width first; a vector has no single pixel size until you choose a raster size.

Add a grid and readable labels

Choose Grid and drag a single cell. The tool repeats that cell across the image, so adjusting its corner coordinates changes the spacing of the entire ruling. X and Y labels count cells from the origin you placed. Negative numbers indicate positions to the left or above it. These are cell offsets, not pixel coordinates; the measurement list shows the cell dimensions.

Open Customize to set grid thickness, color, opacity and subdivisions. You can turn the labels off independently. The main measurement lines and text have separate color and size controls, with a halo, solid background or no background behind the lettering. Fine ruling is bounded, and dense labels are spaced apart so a small cell does not cover the image in unreadable numbers.

Calibrate a reference when pixels are not enough

For objects at the same scale, use Set scale, draw across a known length and enter that length with a unit. A 200-pixel reference assigned 100 cm makes a 50-pixel line read 25 cm. This is a scale you supplied, not a physical size the tool inferred.

For a flat surface seen at an angle, Set plane accepts four corners of a known rectangle and its real width and height. Place the corners in order around the rectangle. The tool projects measurement coordinates onto that plane. Measurements on other surfaces or at different depths are not valid under this calibration. A self-crossed, collapsed or incomplete reference falls back to pixels instead of displaying a calibrated result.

Keep several measurements and export a marked image

New shapes stay on the image. Choose one from the measurement list, then drag its handles or type its coordinates to refine it. Select / move lets you move a shape by its outline. Drag a label to reposition it, shift-drag it to move its whole shape, and double-click to reset its position. Notes and arrows help explain what a dimension refers to.

Undo and Redo cover drawing, coordinate edits and deletion. Download marked PNG creates a full-resolution copy with the current annotations and style; the original file stays intact. Copy all measurements produces a text report. Measurements are remembered locally for up to 20 images, without saving the images themselves. Reopen the same file to continue, or Clear all to remove its saved annotations.

Frequently asked questions