dev-tools 5 min read

tack.pics – Mark Coordinates on Images

Free browser tool that marks points and polygon regions on any image. Export to JSON or YAML, no upload required.

By
Share: X in
tack.pics product thumbnail

TL;DR

TL;DR: tack.pics is a free, browser-based image annotation tool that marks coordinates and polygon regions and exports them as JSON or YAML — entirely client-side with no uploads.

Source and Accuracy Notes

⚠️ This section is MANDATORY. All links must be verified from actual source, not guessed.

  • Project page: tack.pics — verified via direct fetch
  • License: Proprietary free tool (no LICENSE file; publisher is Smoking Media)
  • No GitHub repository; source is not open source

What Is tack.pics?

tack.pics (also available at tack.pics) is a browser-based image annotation tool built for developers and technical users who need to mark coordinate data on images. The publisher, Smoking Media, describes it as:

“Mark points and polygon areas on any image. Export to JSON or YAML. Free, in your browser, no upload.”

Key characteristics from the official page:

  • Client-side only — images never leave the browser; runs entirely on-device as a Progressive Web App
  • Works offline once loaded
  • Exports to JSON or YAML — useful for feeding annotation data into ML pipelines, computer vision training sets, or GIS tooling
  • Configurable origin — top-left, top-right, bottom-left, bottom-right, center, or custom origin point
  • Coordinate modes — pixel values or 0–1 normalized coordinates
  • Y-axis flip — toggle between screen-space (origin top-left) and math-space (origin bottom-left)
  • Bezier handles — editable control handles for curves
  • 100-step undo/redo history
  • Round-trip JSON loading — load previously exported JSON back into the editor for further work

Setup Workflow

No installation required — tack.pics is a PWA that runs directly in the browser.

Step 1: Open the tool

Navigate to https://tack.pics/ in any modern browser (Chrome, Firefox, Safari, Edge). The page is fully responsive.

Step 2: Load an image

Click Load Image in the toolbar, or drag-and-drop an image file directly onto the canvas. Supported formats are those supported by the browser’s native image rendering (PNG, JPEG, WebP, GIF, SVG, etc.).

Step 3: Choose a drawing tool

Three tools are available in the toolbar:

  • Polygon — click to place anchors, build multi-point regions
  • Rect — drag to draw rectangles; hold Shift for squares, Alt for drawing from the center
  • Ellipse — drag to draw ellipses; Shift constrains to circles, Alt draws from center

Step 4: Configure export settings

Before exporting, choose:

  • Origin — which corner or point acts as (0, 0). Defaults to top-left for screen-space workflows.
  • Coordinate spacepixel (raw pixel values) or normalized (all values between 0 and 1)
  • Y-axisscreen (top-left origin, Y increases downward) or math (bottom-left origin, Y increases upward)

Step 5: Export

Click Export to download the annotation data. Two formats are available:

  • JSON — array of objects with shape type, coordinates, and metadata
  • YAML — equivalent representation for YAML-first pipelines

To reload and continue editing, use Load Data to import a previously exported JSON file.

Practical Evaluation Checklist

  • [ ] Load a PNG or JPEG image (drag-drop or button)
  • [ ] Draw a polygon region with 5+ anchor points
  • [ ] Switch origin to bottom-right and observe coordinate changes
  • [ ] Toggle to normalized coordinates and verify all values are in [0, 1]
  • [ ] Export to JSON and verify the structure matches the shapes drawn
  • [ ] Reload the JSON via Load Data and confirm shapes restore correctly
  • [ ] Use Undo (⌘Z) and Redo (⌌⇧Z) through 10+ steps
  • [ ] Close the tab, reload, and confirm the tool still works offline

Security Notes

Because tack.pics runs entirely on the client:

  • No image data leaves the browser. This makes it safe for annotating sensitive documents, architectural diagrams, or proprietary screenshots.
  • No accounts or tracking. The publisher includes a third-party analytics script (track.exquex.com) — if this is a concern, block third-party scripts at the network level.
  • No localStorage of image data by default — annotation state is held in memory and only persisted when you explicitly export or load a JSON file.

FAQ

Q: Is the source code available? A: No. There is no public GitHub repository for tack.pics. It is a proprietary product from Smoking Media.

Q: Can I use this on mobile? A: The page is responsive and supports touch input, but the drawing tools are optimized for mouse/trackpad workflows. Complex polygon editing on touchscreens may be less precise.

Q: What coordinate system does it use by default? A: Default is screen-space — origin at top-left, pixel-unit coordinates. You can switch to normalized (0–1) coordinates or flip the Y-axis to math-space (origin bottom-left) via the toolbar controls.

Q: Can I annotate multiple images in one session? A: One image at a time. Use Load Data to bring annotation state back in, and Export to save work between images.

Q: Does it support loading images from a URL? A: Not directly — you drag-and-drop or use the file picker. Images are not uploaded to any server; they are loaded into the browser’s canvas via the File API.

Conclusion

tack.pics fills a specific niche: converting visual regions on images into machine-readable coordinate data without any server round-trip. The entirely client-side architecture is the headline feature for security-conscious workflows — nothing leaves the browser.

It is not a general-purpose image editor. If you need layer support, filters, or text annotation, use Figma or GIMP. If you need to extract coordinate geometry from an image for ML labeling, GIS mapping, or UI layout documentation, tack.pics is purpose-built for exactly that task.