image-annotations

Image Annotations

Add visual callouts to any image — screenshots, diagrams, architecture docs, demo frames — using PIL/Pillow. Highlights what changed or what to look at, so reviewers don't have to guess.

When to Use This Skill

Use this skill when you need to:

Highlight a specific area in a screenshot for a PR description
Annotate before/after images to show what changed
Add labels and callouts to diagrams or architecture images
Create annotated frames for animated GIF demos

Prerequisites

pip install Pillow -q

Color Rules

Red (#E63946) — only for "bad" / "removed" things (e.g., circling a bug being fixed)
Yellowish-orange (#FF9F1C) — for neutral highlights ("look here", "new feature", etc.)
Never use red just because it's eye-catching — red = bad/removed

Font

Use Ink Free (C:/Windows/Fonts/Inkfree.ttf) for a handwritten look on Windows
On Linux/macOS, fall back to ImageFont.load_default()
Size 36 for annotations on ~1400px-wide images
stroke_width=1 with stroke_fill=<same color as fill> — gives body without being too thick
Do NOT use white stroke — looks like a bad glow effect

Shapes

Prefer rounded rectangles over circles/ellipses — less pixelation at edges
draw.rounded_rectangle([x1, y1, x2, y2], radius=14, outline=color, width=5)
Padding 18px around the target content

Reference Snippet

from PIL import Image, ImageDraw, ImageFont

Algorithmic Annotation — `annotate.py`

For images with multiple elements to annotate, use the annotate.py module below. Save it next to your script and import from it. It handles automatic label placement without overlapping.

Quick start

elem: (x1, y1, x2, y2) tight bounding box — must be exact pixel coordinates
label: text label (supports \n for multi-line)
draw_box: if True, draws a rounded rectangle around the element. If False (default), draws a V-arrowhead pointing at the element
debug: shows targeting rectangles and candidate heatmap for placement validation

Coordinate grid helper

Always use grid_image() before annotating an unfamiliar image. Scaled-down previews display images smaller than actual pixel dimensions — the error compounds as you move away from (0,0).

Then verify with small crops:

Algorithm overview

Ring search: candidates between MIN_ARROW (25px) and MAX_ARROW (120px) from element edge
Contrast scoring: prefers placements where label text is readable — abs(avg_brightness - 147) - std * 0.3 - dist * 0.02
Joint resolution: candidates computed independently, placed greedily (best score first)
Hard blocks: labels cannot overlap any other annotation's element or breathing box
Proximity penalty: labels within 40px of other placed boxes get a score penalty
Arrow crossing penalty: -50 for arrows crossing already-placed arrows

Debug mode colors

Color	Meaning
Cyan	Target element box (elem + padding)
Gray	Exclusion zone (MIN_ARROW buffer)
Red→Green	Candidate heatmap (red=bad, green=good)
Magenta	Chosen label position
Orange	Final rendered annotation

Arrow styles

draw_box=True: rounded rectangle + straight line to label, no arrowhead
draw_box=False: V-shaped arrowhead with rounded line caps

`annotate.py` — full module

Save this as annotate.py and import from it:

Image Diffing

Find what changed between two screenshots programmatically. Use as a safety net for subtle changes — when the difference is obvious, annotate directly instead.

Debug heatmap colors: Blue = small difference, Yellow = medium, Red = large, Cyan boxes = cluster bounding boxes.

When to use: subtle opacity changes, dashed lines, minor color shifts, anti-aliasing differences. When NOT to use: any change you can see by eye — annotate directly for better labels.

Animated GIF Annotations

Different from static images — animations have timing, transitions, and competing visual motion.

Element highlighting

Rects for big areas, arrows for small elements — 500x300px area = rect, 200x25px element = arrow
Labels go RIGHT NEXT to what they describe — short arrow (30-80px), label adjacent. Viewer's eye shouldn't travel more than ~100px
Arrow must not cross its own label — pick the edge closest to the target
No bottom bar / subtitle approach — eyes jump between content and bar. Contextual placement only
Hero message gets a bigger font — main takeaway 64pt+, detail annotations 38pt

Timing and pacing

Fade: 2-frame pop-in at 10fps — 50% → 100% opacity (0.2s total). Easing curves look bad at low FPS
Type → pause → annotate — during fast action, show NO annotation. Pause, then add it
Variable frame duration — fast during action (100ms), slow during pauses (600-800ms), long hold for hero (500ms)
Higher FPS for smooth motion — 10fps minimum for typing/interaction

Pop-in fade implementation

Guidelines

All elements same thickness — rect width, line width, and visual text weight should feel consistent (~5px)
Place labels close to the rect — short leader line (25-35px)
Labels can overlap content — the stroke gives enough contrast
Show locally first — verify before uploading to a PR
Take screenshots at native 1x, control display size in HTML — use <img width="300"> in markdown, never resize with PIL (creates artifacts)
Always check Image.open(path).size first — HiDPI screenshots are larger than they appear (150% scaling = 1.5x CSS pixel dimensions)
Short labels work better — wide labels have fewer valid placements. Use 1-3 words when possible
Verify with debug=True — always check the first annotation of a new image with debug mode

Limitations

Ink Free font is Windows-only; other platforms need a fallback font
PIL text rendering is basic — no rich text, no markdown
Animated GIF annotations require frame-by-frame processing which can be slow for long recordings
Algorithmic placement works best with 2-6 annotations; more than that may produce crowded results