Image coordinate finder — click a spot, copy the numbers.

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.

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.

Percent gives you x and y as a share of the image's width and height — the format to store in a database or a component's props. Pixels gives the same point measured against the file's natural size, useful when you are matching a design file or a crop.

<area> coords emits the exact attribute a legacy HTML image map expects, with the point as a circle centre and a default radius you can widen. JSON bundles the natural dimensions with a labelled array of every point, so a whole set of markers moves into your own code in one paste.

A practical habit: capture percentages first, then export pixels or area coords only if a specific tool demands them. Percentages survive every later change of layout; pixel values have to be recalculated the moment the image is resized or replaced.

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.