The Complete Guide to Image Coordinate Annotation with tack.pics

Image coordinate annotation has long been one of those small but persistent challenges in digital production work. Whether the goal is defining hit zones for an interactive prototype, marking collision boundaries on a game sprite, or labeling regions for a machine-learning dataset, the underlying task is the same: translate visual locations on an image into structured coordinate data that another system can use.

tack.pics is a free, browser-based tool that addresses this challenge with a focused single-page workflow. This guide explores what the tool does, how it works, the workflows it supports, and the use cases it serves across game development, machine learning, interactive media, and design.

Understanding Coordinate Annotation

Coordinate annotation is the process of identifying specific locations or regions within an image and recording them as numerical data. The result is typically a list of points, polylines, or polygons that downstream software can use for collision detection, region-of-interest analysis, hotspot mapping, or any other task that requires knowing precisely where something is within an image.

Why Coordinate Annotation Matters

Coordinate data acts as the bridge between visual content and programmatic logic. Without it, software cannot distinguish “the head of this character sprite” from “the empty space around it.” The accuracy and format of that data shapes everything that follows in the pipeline.

Common Coordinate Conventions

Different industries and engines have settled on different conventions:

• Origin location: top-left, top-right, bottom-left, bottom-right, or center
• Y-axis direction: down (canvas and screen conventions) or up (math and OpenGL conventions)
• Unit system: absolute pixels or normalized 0-to-1 coordinates

A coordinate annotation tool that fails to support all of these conventions forces users into a post-processing step, which adds friction and increases the chance of bugs.

Introducing tack.pics

tack.pics is a single-page web application that provides a fast, focused environment for coordinate annotation. The tool loads images locally in the browser, allows users to mark points and shapes through direct manipulation, and exports the resulting data in JSON or YAML.

Core Design Principles

The tool’s design reflects a small number of clear priorities:

• Local processing: images are read into the browser through the File API and never leave the device
• No accounts: there is no signup, no login, and no project-creation step
• Single-screen workflow: the entire tool fits on one page with no modal dialogs or tabs to navigate
• Round-trip support: previously generated output can be loaded back into the tool to resume work

Supported File Formats

The tool accepts the following image formats:

• PNG: ideal for sprites, screenshots, and images with transparency
• JPG/JPEG: suitable for photographs and high-resolution backgrounds
• GIF: useful for animated sprites (the first frame is annotated)
• WEBP: modern format with strong compression and broad browser support

Annotation Primitives

tack.pics supports three primitive shape types, which can be combined freely on a single image.

Single Points

Single points represent individual coordinates. Common applications include:

• Sprite anchor points (origin and pivot definitions)
• Spawn locations in game level layouts
• Marker placement on maps and floorplans
• Reference points for image registration

Open Polylines

Open polylines are sequences of connected points that do not close into a shape. Typical use cases include:

• Pathing waypoints for game AI
• Trace lines on diagrams
• Route definitions on maps

Closed Polygons

Closed polygons enclose a region of the image. They are the most common shape type and serve uses such as:

• Collision boundaries on game sprites
• Hit zones for clickable or tappable interface elements
• Region-of-interest boxes for machine-learning annotation
• Hotspots on interactive infographics and maps

Working with Bezier Curves

Real-world shapes are rarely well-described by straight lines. Character silhouettes, terrain boundaries, and organic objects all benefit from curved edges. tack.pics supports proper bezier curves on every anchor.

Curve Interactions

The interaction model follows conventions familiar from vector tools such as Figma and Illustrator:

• Click: places a corner anchor
• Click and drag: places a smooth anchor with two symmetric handles in the direction of the drag
• Drag a handle: reshapes the curve on either side of the anchor
• Alt-drag a handle: breaks symmetry between the two handles, useful when one side of an anchor needs a sharp curve and the other a soft one
• Shift-drag a handle: re-syncs the two handles after symmetry has been broken
• Alt-drag a corner anchor: converts it to a smooth anchor and pulls handles outward
• Double-click an anchor: toggles between smooth and corner

When to Use Bezier Curves

Bezier curves are valuable when the shape being annotated involves organic edges. Straight-line polygons remain the right choice for geometric objects, UI rectangles, and architectural plans.

Coordinate System Configuration

The output format can be tailored without leaving the page.

Origin Selection

The origin can be set to any of six positions:

• Top-left corner (default for most web and canvas conventions)
• Top-right corner
• Bottom-left corner (common in math and OpenGL contexts)
• Bottom-right corner
• Geometric center
• Custom point selected by clicking anywhere on the image

The custom-origin option is particularly useful for sprite anchor work, where the origin should align with a specific feature such as the character’s feet or center of mass.

Axis Direction

The Y-axis can be flipped between “down” (the standard for canvas and screen coordinates) and “up” (the standard for math and OpenGL coordinates). Switching the axis is non-destructive: shapes are recalculated and the output regenerates immediately.

Unit System

Coordinates are emitted in one of two unit systems:

• Absolute pixels: integer or fractional pixel values relative to the chosen origin
• Normalized 0-to-1: values scaled to the image dimensions, suitable for resolution-independent applications

Output Formats

The tool exports in two formats.

JSON Output

JSON is the default and is suitable for ingestion by most game engines, web applications, and machine-learning pipelines. The structure is intentionally flat and self-describing.

YAML Output

YAML is offered as an alternative for configuration-heavy workflows where human readability is a priority.

Round-Trip Workflows

A defining feature of tack.pics is that previously exported JSON can be loaded back into the tool through the Load Data button. The result is a complete reconstruction of every anchor, handle, and shape, including all bezier geometry.

Why Round-Tripping Matters

Round-trip support transforms the tool from a one-shot utility into the foundation of a sustainable workflow. Coordinate data can be committed to a repository, reviewed in pull requests, and reopened weeks later for edits without losing any precision.

Use Cases by Industry

Game Development

• 2D collision boundaries on character and object sprites
• Pathing waypoints for non-player character AI
• Spawn points and triggers in level layouts
• Hit zones for interactive elements
• Sprite anchor and pivot definitions

Machine Learning

• Region-of-interest annotation for training datasets
• Object localization for computer-vision models
• Polygon segmentation for semantic-segmentation tasks
• Reference point definition for keypoint detection

Web and UI Design

• Hit zones for click and tap targets on image-based mockups
• Hotspot definitions for interactive prototypes
• Image-map coordinate generation
• Layout reference coordinates for responsive design

Mapping and Visualization

• Hotspots on interactive maps and infographics
• Region markup for floorplans and blueprints
• Annotation regions on satellite and aerial imagery

Image Processing

• Region-of-interest extraction for downstream processing
• Mask generation for compositing workflows
• Reference annotation for image registration tasks

Keyboard Shortcuts

The tool exposes a keyboard-shortcut layer for power users:

• N: start a new shape
• C: close the current polygon
• Cmd-Z / Ctrl-Z: undo
• Shift-Cmd-Z / Ctrl-Shift-Z: redo
• Arrow keys: nudge the selected anchor by one pixel
• Shift-Arrow keys: nudge the selected anchor by ten pixels

A pop-out shortcut reference is available in the sidebar.

Privacy Architecture

Privacy is not an add-on feature but a consequence of the tool’s architecture.

No Server Upload

Images are read locally through the browser’s File API. The bytes never travel to any server, which means there is nothing to log, leak, or subpoena.

No Account System

There is no login, no profile, and no associated identity. The tool can be used anonymously by anyone with a browser.

Minimal Analytics

The site collects anonymous, cookie-less page-view counts via a self-hosted Umami install. There is no per-button telemetry, no session recording, and no cross-site tracking.

Progressive Web App Capabilities

tack.pics is implemented as a Progressive Web App.

Installation

The tool can be installed to the home screen or app dock on supported operating systems, where it appears alongside native applications.

Offline Operation

A service worker pre-caches the application and its legal pages. Once the tool has been visited, it works without an internet connection, useful for travel, secure environments, and unreliable network conditions.

Caching Strategy

Pre-caching uses fingerprinted assets, and HTML resources follow a stale-while-revalidate strategy that delivers a cached response immediately while the network request happens in the background.

Recommended Form Factor

tack.pics is intended as a desktop and tablet experience. Pixel-precise anchor placement and bezier handle manipulation require more screen real estate and pointer precision than a phone reasonably provides. On narrow viewports the tool displays a “best on a larger screen” notice while keeping the explanatory content readable.

Best Practices for Effective Annotation

Plan the Coordinate Convention First

Before placing anchors, decide on the origin, axis direction, and unit system that the receiving software expects. Switching conventions mid-annotation is supported but unnecessary if the destination format is known ahead of time.

Mix Shape Types Deliberately

A single image can hold any combination of points, polylines, and polygons. Use single points for anchors and triggers, polylines for paths, and polygons for boundaries.

Save Output Alongside Source Images

Exported JSON should be stored next to the source image in version control. The pairing makes round-trip editing straightforward and keeps the coordinate data discoverable.

Use Bezier Curves Sparingly

Straight-line polygons are easier to review, edit, and reason about. Reserve bezier curves for genuinely curved boundaries.

Conclusion

tack.pics addresses a small but pervasive workflow problem with an unusually focused tool. Its combination of local processing, round-trip editing, multiple coordinate conventions, and PWA offline support makes it a credible default for coordinate annotation across game development, machine learning, design, and content production.

For any project that needs to translate “where is this thing in this picture” into structured data, the tool provides a fast, private, and free path from image to JSON.