The pixel ruler works like this: it measures distances and element sizes on any page via an on-screen ruler overlay. Everything happens on your device - the input never leaves your tab unless the tool clearly states it performs a server-side lookup.
How to use the Pixel Ruler
Select or drop your image.
Adjust the available settings while watching the preview.
Check dimensions, quality and format before exporting.
Download the result and keep the original when quality matters.
Features
Runs on your device via the Canvas and WebAssembly APIs
Batch-friendly when you have several files
Original images stay untouched
Common mistakes to avoid
Over-compressing images that contain small text
Exporting transparency to JPEG
Examples
Input
Result
Drag between two points
Width, height and diagonal in CSS pixels
Best used for
Getting a reliable answer for pixel ruler without installing an app
One-off tasks done in under a minute from any device
Checking results before committing them to something important
Working on a phone where desktop software is unavailable
Privacy
Images are processed on your device; nothing is uploaded unless a tool explicitly says a server lookup is involved.
Frequently asked questions
Does it measure physical millimetres?
No - CSS pixels vary by device; it measures the units CSS uses.
What can I measure with the on-screen ruler?
Straight distances and element dimensions on any page content you display beside the tool - useful for verifying spacing against a design spec.
Which unit does the ruler use?
CSS pixels, the unit every layout and design spec refers to - measurements match what your CSS actually does.