Free tool · No signup
Image coordinate finder — click a spot, copy the numbers.
Get exact X/Y positions from any image as percentages, pixels, <area> coords, or JSON. Runs entirely in your browser, no upload and no account.
Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace
Image coordinate finder
Click any spot on the image to read its exact position as percentages, pixels, <area> coords, or JSON. Everything runs in your browser — the image is never uploaded.
reading image size…
Percentages are the safest format for the web: they keep hotspots aligned when the image scales. Pixel and <area> values only match the natural image size.
Skip the coordinates entirely — place hotspots visually and get an embed.
Open the visual builderFour output formats
Percentages for responsive layouts, pixels for design tools, <area> coords for legacy image maps, and JSON for your own code.
Nothing leaves the browser
Your image is read locally. No upload, no storage, no account — safe for client work and unreleased artwork.
Numbered markers
Every point you place stays visible and numbered on the image, so a long list of coordinates is still readable.
Percentages are what you almost always want
Most people looking for image coordinates are trying to put something on top of an image: a hotspot, a label, a pin, a clickable region. The trap is recording the position in pixels. A pixel offset is only correct while the image is displayed at its natural size, and on the web it rarely is — a container column, a phone viewport, or a retina layout all scale it.
Storing x: 42.18% instead of x: 506px makes the position resolution-independent. Combine it with a wrapper that is position: relative and an overlay element with translate(-50%, -50%), and the marker lands on the same feature of the artwork at every screen width.
Using the JSON output in your own code
The JSON format returns the image's natural size plus an array of labelled points with percentage coordinates. That maps directly onto a React, Vue, or plain-DOM overlay: iterate the array and set left and top from x and y with a % suffix.
Keep the natural size in your data even if you do not position with it. It is useful for setting an aspect-ratio on the wrapper, which prevents layout shift while the image loads — a real Core Web Vitals win on image-heavy pages.
Skip the coordinates altogether
If the end goal is an interactive image rather than a number, you do not need this step. In the visual builder you click the image where the hotspot belongs, drag it to nudge it, and write its card inline — the percentage maths happens for you and the result is an embed you paste into your site once.
This tool exists for the cases where you are wiring the overlay yourself, matching an existing dataset, or debugging why a marker in someone else's code sits in the wrong place.
Continue exploring
Turn any image into a guided experience.
Free forever plan. Paste one iframe into your site and ship.
Create your interactive image