How to Annotate a Screenshot Online (Arrows, Steps, Blur, Free)

· Javed Iqbal · 5 min read

A screenshot on its own says "look at this." A screenshot with one red arrow says "look atthis, right here." That tiny difference is the whole reason annotation exists, and it is the gap between a bug report someone acts on and one they have to ask three questions about.

Here is how to mark up a screenshot properly: the markup that earns its place, the numbered-step trick for tutorials, and how to hide the private stuff before you send it. All in the browser, nothing uploaded.

The fast way

  1. Open the image annotator and drop in (or paste) your screenshot.
  2. Add an arrow, box, or text to point at what matters.
  3. Blur or black-box anything private.
  4. Copy it to your clipboard or download it. Paste straight into Slack, a ticket, or an email.

Use less markup than you think

The instinct is to circle five things in three colors. Resist it. The best annotated screenshots usually have one or two marks. A single arrow or a single box beats a rainbow of scribbles, because the point of annotation is to remove ambiguity, not add visual noise. If you genuinely need to call out several things, that is what numbered steps are for.

The numbered-steps trick for tutorials

When you are showing someone how to do something across one screen ("click here, then here, then here"), drop numbered markers (1, 2, 3) instead of three arrows. The reader's eye follows the numbers in order, and you can reference them in your text: "in step 2, open the dropdown." It turns a screenshot into a mini walkthrough. This is the single most useful annotation feature most people never touch.

Hide the private bits (do this before sharing)

Screenshots leak data constantly: an email in the corner, a token in a header, a customer name in a list. Before you share, cover it. The annotator can blur, pixelate, or black-box a region, and there is auto-detection for the obvious things like emails and keys. Use a solid black box or pixelation for anything truly sensitive, since a light blur on text is not reliably safe. There is a full walkthrough in how to redact a screenshot.

Make it look intentional, not slapped together

If the screenshot is going somewhere public (a blog, a tweet, a deck), a raw screen grab looks rough. Adding a bit of padding, a soft background, and rounded corners makes it read as deliberate. The annotator has a one-click way to drop your screenshot onto a clean backdrop, which is the difference between "I took a screenshot" and "I made a figure."

FAQ

How do I add arrows to a screenshot?

Open the image annotator, drop your screenshot in, pick the arrow tool, and drag. You can also add boxes, text, and numbered steps.

Can I annotate an image without uploading it?

Yes. The annotator runs in your browser, so the image stays on your device and is never uploaded to a server.

How do I blur something in a screenshot?

Use the redact tool to blur, pixelate, or black-box a region. For sensitive text, prefer pixelate or a solid box over a light blur.

Is it free?

Yes, free and no signup.

Mark up your screenshot now with the free online image annotator. Need to trim it first? The image cropper pairs with it nicely.