How to Annotate Screenshots for Tutorials and Documentation
Annotated screenshots make tutorials, how-to guides, and documentation significantly clearer. A numbered step circle, an arrow pointing to a button, or a coloured highlight box can communicate in seconds what paragraphs of text cannot. This guide covers best practices and tools.
Quick Answer
Annotated screenshots make tutorials, how-to guides, and documentation significantly clearer. A numbered step circle, an arrow pointing to a button, or a coloured highlight box can communicate in seconds what paragraphs of text cannot.
Try it now — free, no signup
Your images stay on your device. Nothing is uploaded to any server.
Step-by-Step Guide
5 steps · takes under 1 minute
Use numbered circles for step-by-step flows
Numbered circles (1, 2, 3…) placed on the screenshot guide the reader through the exact sequence of clicks or actions required. Use a consistent colour across your documentation.
Use arrows to direct attention
Arrows are the clearest way to say 'look here'. Draw them from your explanatory text to the relevant UI element. Keep arrows simple — one arrowhead, one direction.
Highlight with a coloured box
A semi-transparent coloured rectangle over a region says 'this area matters' without obscuring the content underneath. Use sparingly — too many highlights desensitise the reader.
Keep text labels short
Text labels on screenshots should be 2–5 words maximum. If more explanation is needed, number the element and explain in the text body below the image.
Export at full resolution
Always export annotated screenshots at the original resolution. Scaling down an annotated image blurs text labels and makes numbers unreadable at small sizes.
100% Private — Zero Uploads
ImgToolkit runs entirely in your browser using the Canvas API. Your images are never sent to a server, never stored in the cloud, and never seen by anyone else. This makes it safe for sensitive documents, client work, medical imagery, and confidential screenshots.
Pro tip
Use 75–85% quality for web images — you get 60–80% smaller files with no visible difference at normal screen sizes.
Format & File Size Comparison
Same 1080×1080px photo processed four ways
| Format | Quality | File Size | Notes |
|---|---|---|---|
| PNG (original) | Perfect | 4.2 MB | No compression — too large for web |
| Compressed PNG | Visually identical | 1.1 MB | −74% — transparency preserved |
| JPG (85% quality) | Excellent | 310 KB | −93% · Best for photos |
| WebP (85%)BEST | Excellent | 205 KB | −95% · Recommended for web |
Based on a 1080×1080px photo. Results vary by image content and complexity.
Related Free Tools
All tools run in your browser — no account or upload needed
Frequently Asked Questions
3 questions answered
Ready to get started?
Free, instant — your files stay on your device. Always.
Annotate your screenshots free online