How to Annotate Images for YOLO Training — Free, Browser-Based, No Install Required

YOLO models expect their training annotations in a specific format: one text file per image, each line describing one bounding box in normalised coordinates. Getting from a raw image to that text file is the job of an annotation tool — and most of the options out there require an account, a local install, or a cloud upload. This guide walks through the full process using RegionKit, which runs entirely in your browser.

What YOLO Format Looks Like

Each YOLO annotation file is a plain .txt with one line per object:

<class_id> <x_center> <y_center> <width> <height>

All five values are normalised to the image dimensions — x_center and width are divided by image width; y_center and height by image height. This means all values fall between 0 and 1 regardless of the original resolution.

For example, a bounding box centred at pixel (320, 240) in a 640×480 image with width 128 and height 64 would be:

0 0.500 0.500 0.200 0.133

Class IDs are integers starting at 0, matching the order in your classes.txt or data.yaml file.

When to Use YOLO Format

YOLO TXT is the right choice when you’re training a YOLO-family model (YOLOv5, YOLOv8, YOLO11, etc.) or any framework that reads the Darknet annotation format. It only supports axis-aligned bounding boxes — if you need polygon segmentation masks, use COCO JSON instead.

For ROI zone definitions (not training data), the native JSON export from RegionKit is a better choice since it preserves layers, labels, and arbitrary polygon shapes.

Annotating in RegionKit — Step by Step

1. Open the Editor

Go to editor.regionkit.app. No login, no install. The tool loads directly in the browser.

2. Load Your Image

Drag the image file onto the canvas, use Open in the toolbar, or paste from clipboard (Ctrl+V). The image appears as the background layer.

3. Select the Rectangle Tool

Press R or click the Rectangle icon in the left toolbar. The rectangle tool uses a click-click model: click the first corner, then click the opposite corner to commit the box. No dragging required — this makes it faster to place precise boxes without overshooting.

4. Draw Bounding Boxes

Click one corner of the object you want to annotate, then click the opposite corner. The box appears immediately.

To adjust after drawing:

Move — switch to the Select tool (V) and drag the box body
Resize — drag any of the 8 handles (4 corners + 4 edges)
Delete — press Delete with the shape selected

5. Set the Class Label

With the box selected, open the Properties tab in the right panel. Set the Label field to your class name (e.g. car, person, defect). The label is included in the YOLO export as the class name — you’ll map it to a class ID in your dataset config.

Repeat for each object in the image.

6. Export as YOLO TXT

Click the Export button in the top toolbar and choose YOLO TXT. RegionKit generates a .txt file with one line per annotation in the correct normalised format.

The class order in the YOLO file follows the order labels appear in the scene. Document your class mapping in a classes.txt or data.yaml alongside the annotation files.

Understanding the Export

For a 1280×720 image with two annotated bounding boxes, the exported file might look like:

0 0.412 0.338 0.156 0.278
1 0.681 0.502 0.094 0.167

Class 0 is the first unique label encountered, class 1 is the second. If you annotated three car boxes and two person boxes, all car boxes get class ID 0 and all person boxes get class ID 1.

Using the Output in a Training Pipeline

A typical YOLOv8 dataset structure:

dataset/
├── images/
│   ├── train/
│   │   └── frame_001.jpg
│   └── val/
│       └── frame_002.jpg
├── labels/
│   ├── train/
│   │   └── frame_001.txt
│   └── val/
│       └── frame_002.txt
└── data.yaml

Your data.yaml maps class IDs to names:

path: ./dataset
train: images/train
val: images/val

nc: 2
names: ['car', 'person']

Then train:

yolo detect train data=data.yaml model=yolov8n.pt epochs=50

Annotating Multiple Images

RegionKit works on one image at a time. For multi-image datasets, the typical workflow is:

Load each image in turn
Annotate and export
Collect the .txt files alongside the images

If you need to resume annotation on an image, export the native JSON scene file — it saves all annotations and the image reference. Re-import the JSON later to continue where you left off.

Tips for Faster Annotation

Use keyboard shortcuts. R activates the rectangle tool; V switches to select; Delete removes selected shapes; Ctrl+Z undoes mistakes. Ctrl+D duplicates a selected box — useful for objects that repeat at similar sizes.

Use snap-to-grid for aligned boxes. Enable the grid in snap settings and set a grid size that matches your annotation granularity. Boxes snap to grid intersections, making it faster to align borders precisely.

Copy and paste. Ctrl+C copies selected annotations; Ctrl+V pastes with a 10px offset. Useful for objects at similar positions across multiple frames — paste and nudge rather than re-draw.