From Image to JSON in Seconds: A Faster Way to Map Coordinates

Almost every team that touches images eventually runs into the same chore: translating a picture into a list of coordinates. Game developers need collision boundaries around sprites. Machine-learning teams mark up training samples. Product designers turn mockups into clickable hot-zones. Engineers annotate floorplans. The work is small in any single instance and surprisingly expensive in aggregate, especially when the only available tools are heavyweight image editors with plugin systems or one-off scripts that need to be installed locally.

tack.pics sets out to solve that specific problem and nothing else. It is a free, browser-based utility that lets a user drop in an image, click out the coordinates of points or shapes, and copy the data straight into a project as JSON or YAML. There is no account, no upload, no project file. The page itself is the workflow.

The Productivity Case for a Single-Purpose Tool

The friction in coordinate annotation is rarely the act of clicking, it is everything around it. Opening a desktop image editor, finding the right plugin, configuring an export script, agreeing on a coordinate convention with a teammate, and then sharing the result through chat: a thirty-second task balloons into a half-hour project.

A focused web tool sidesteps most of that overhead. Sending a colleague a link, asking them to mark a few hit zones on a sprite, and pasting the result into a Slack message is the kind of low-friction handoff that distributed teams optimize for. The interface is the contract: there is nothing to install, nothing to configure, and nothing to misalign.

That model is not unique to coordinate work. The broader trend in developer-facing utilities is toward narrow tools that do one thing well and live at a memorable URL. tack.pics fits that pattern.

How the Tool Works

The workflow is intentionally short. A user drops a PNG, JPG, GIF, or WEBP into the canvas. The image is loaded by the browser through the File API and never leaves the device. From there:

• Clicking places a corner anchor.
• Clicking and dragging places a smooth anchor with bezier handles that can be reshaped afterwards.
• Multiple shapes can be drawn on the same image: single points, open polylines, and closed polygons can be mixed freely.
• A coordinate origin is selected from any corner, the center, or a custom point clicked anywhere on the image.
• The Y-axis can be flipped to match canvas conventions or math/OpenGL conventions.
• Output toggles between absolute pixels and normalized 0-to-1 coordinates.

Pressing Generate produces a JSON or YAML block for every shape on the canvas. The output regenerates live as origin, axis, or unit settings change, so the impact of each decision is visible without re-clicking.

Bezier Curves and Real-World Shapes

Polygons handle a surprising amount of the workload, but real shapes, character silhouettes, organic terrain, curved hit boxes, are not always well-described by straight lines. The tool supports proper bezier handles on every anchor with the gestures that vector veterans expect from Figma or Illustrator: alt-drag breaks handle symmetry, shift-drag re-syncs it, and a double-click toggles an anchor between corner and smooth.

The result is that a single workflow covers both the boxy hit zones a UI team needs and the curved silhouettes a game studio needs, without forcing a switch between modes or apps.

Use Cases Across the Business

Once the friction drops, the use cases multiply. Coordinate annotation turns out to be a horizontal need that touches a surprising number of roles:

• Game development: 2D collision boundaries, pathing waypoints, spawn points, sprite anchor points, and triggers for level layouts.
• Machine learning: region-of-interest annotation for training data, object localization, and dataset preparation for computer-vision models.
• Product and UX design: hit zones for click and tap targets on mockups, image-based UI layout coordinates, and interactive prototype hotspots.
• Operations and field teams: hotspots on interactive maps, floorplan and blueprint markup, and equipment location tagging.
• Marketing and content: image-based call-to-action zones and interactive infographic regions.

In each case, the deliverable is the same shape: a list of coordinates in a structure the receiving system already understands.

Round-Trip Editing as a Workflow Feature

A detail that makes tack.pics viable for ongoing work rather than one-shot tasks is the Load Data button. Existing JSON output can be pasted back into the tool, which reconstructs every anchor and handle exactly as it was. Coordinate data can be committed to a repository and reopened weeks later by a different team member without losing any of the curve geometry.

That round-trip is what separates “a quick utility” from “a tool you can build a process around”. For studios that need their hit zones to be reviewed, edited, and version-controlled like any other asset, the distinction matters.

Privacy and Compliance

For organizations that take image-handling policies seriously, the architecture is reassuring: the image and the coordinate data never leave the browser. There is no upload, no account, and no server-side processing. The only data the site collects is anonymous, cookie-less page-view counts via a self-hosted Umami install. No per-button telemetry, no session recording, and no cross-site tracking.

For teams working with confidential mockups, internal product imagery, or anything covered by an NDA, that local-only model removes a category of review that a cloud-based annotation service would normally trigger.

A PWA That Works Offline

The tool is a Progressive Web App. Once visited, the service worker pre-caches the application and the legal pages, making the tool usable on flights, in conference centers, and anywhere else where connectivity is unreliable. For agencies and consultants who travel between client sites, that offline guarantee is a small but meaningful productivity win.

A Note on Form Factor

tack.pics is a desktop and tablet experience by design. Pixel-precise anchor placement and bezier handle dragging need more screen real estate than a phone provides, so narrow viewports show a “best on bigger screens” notice with the SEO content still readable below. That is the right trade-off for a tool whose value depends on precision.

The Takeaway

For any team that occasionally needs to turn a picture into a list of coordinates, tack.pics closes a workflow gap that most organizations had quietly accepted as unavoidable overhead. It is free, runs locally in the browser, supports proper curves, exports clean JSON or YAML, and round-trips its own output for ongoing work. That is a reasonable surface area for a tool whose entire promise is “ten seconds from URL to clipboard.”

Worth keeping in the bookmarks bar for the next time a sprite, mockup, floorplan, or training image lands on the desk.