Image Marker: Annotate Images and Export Coordinates as JSON

Image Marker is a free browser tool for placing named, described markers on any image and exporting the coordinates as JSON. It's used for UX research, bug reporting, interactive map building, and anywhere you need to attach structured metadata to specific points in an image — without uploading the image to a server.

What Image Marker does

You upload an image (PNG, JPG, WebP or GIF), then click anywhere to place a marker. Each marker gets a title and an optional description. The markers are overlaid on the image with numbered pins. When you're done, click Export JSON to download a structured file containing every marker's coordinates and the metadata you entered.

The tool supports zoom for precise placement on dense or complex images, and you can delete individual markers or clear them all. Nothing is saved between sessions — each use is isolated to your browser tab.

The JSON coordinate format

Each marker exports as an object with four fields:

• x — horizontal position as a percentage of image width (0–100)
• y — vertical position as a percentage of image height (0–100)
• title — the label you typed for the marker
• description — the optional longer description

Using percentages rather than absolute pixels means the coordinates remain accurate regardless of how the image is displayed — whether at 400px wide in a sidebar or 1600px wide on a desktop screen. This is especially important for interactive image features in web apps where the same coordinate data needs to work responsively.

Use cases

UX research and usability testing: take a screenshot of a UI, mark the areas where users struggled, confused, or clicked incorrectly, and export the annotated data for your report. The JSON can be fed directly into a visualisation.

Bug reporting: annotate a screenshot with numbered markers pointing to each issue and export both the image (screenshot) and the JSON (structured issue list) to your bug tracker. This is faster than typing out coordinates or drawing arrows in a separate tool.

Interactive floor plans and maps: upload a floor plan, mark exits, rooms, equipment or points of interest, and export the coordinate JSON. Feed it into a web app to power a clickable interactive overlay without manually measuring pixels.

E-learning hotspots: annotate diagrams, historical maps, or scientific illustrations with labelled hotspots. The JSON output is compatible with most e-learning authoring tools that support custom hotspot data.

Privacy: no uploads

Image Marker is entirely client-side. Your image is loaded via the browser's File API and rendered on a canvas — it never leaves your device. This makes it safe to annotate wireframes, confidential UI designs, internal floor plans, or any image you wouldn't want stored on a third-party server.

How to use it

1. Go to multi-toolkit.com/image-marker and upload your image.
2. Click anywhere on the image to place a marker. Type a title (required) and description (optional).
3. Repeat for all the points you want to annotate. Use zoom for dense areas.
4. Click Export JSON to download the coordinate file, or Copy to paste it directly.