ShottieThis image annotation tool lets you mark up a screenshot with arrows, boxes, ellipses, text, highlights and numbered steps, and hide private details with blur, pixelate or cover. Open an image above, pick a tool, drag, and download a PNG. It's free, and the image never leaves your browser.
How to annotate an image
- Open, drop or paste your image.
- Pick a tool: drag to draw shapes, or click to place text and numbered steps.
- Change colour and size between marks; ⌘Z undoes the last one.
- Optionally add a backdrop, then Download PNG or Copy.
Which tool to use for what
| Tool | Use it to |
|---|---|
| Arrow | Point at one small thing: a button, an icon, a setting |
| Box, ellipse | Mark an area: a panel, a chart, an error message |
| Numbered steps | Show an order: click 1, then 2, then 3 |
| Text | Say what the reader should notice or do |
| Highlight | Make a line of text stand out, like a marker pen |
| Blur, pixelate, cover | Hide emails, faces, keys and numbers before sharing |
Annotating a bug report
- Box the broken thing and number the steps that got you there.
- Add one line of text with what you expected instead.
- Blur customer data and cover tokens in the address bar.
- Keep the whole window in frame; the edges often show the version or the account.
Annotating for docs and tutorials
Consistency does more than style. Give each colour one meaning across a set of screenshots, for example red for "click this" and yellow for "read this". Use numbered steps rather than several arrows, and keep text short enough to read at the size the image will be shown. For a single pointer, the arrow tool page opens with Arrow ready.
Private by design
Screenshots for bug reports and support tickets are exactly the ones full of private details, so this editor doesn't upload anything: opening, marking up and exporting all happen in your browser.
Keeping annotations readable after sharing
Chat apps and social feeds show images much smaller than you drew them: a full-screen screenshot in a Slack thread is often a third of its size until someone clicks it. Use size L on large screenshots, keep text to a few words, and choose colours that contrast with the interface underneath. If a mark only works when the image is full size, most people won't see it.
Annotating on a phone or tablet
The editor works with touch: open a screenshot from your photo library, pick a tool, and drag with a finger. Dragging on the image draws instead of scrolling, so scroll the page by dragging outside the image.
Frequently asked questions
What is the best free image annotation tool?
For screenshots, one that opens instantly, exports at full resolution and doesn't upload your image. This one runs in your browser with arrows, boxes, text, numbered steps, highlights, blur, pixelate and cover.
Can I add text to a screenshot?
Yes. Choose Text, click where it should go, type, and press Enter.
How do I number steps on a screenshot?
Choose Numbered step and click each control in order; the numbers count up automatically.
Is there a keyboard shortcut to undo?
Yes: ⌘Z on a Mac, Ctrl+Z on Windows.