A screenshot shows what is on a screen. An annotated screenshot shows what matters. The difference is a few arrows, boxes and short labels, and doing them well means the reader understands your point in seconds instead of hunting through the image. These are the habits that make annotations clear instead of cluttered.
Decide what the screenshot is for
Before you capture anything, finish this sentence: "After seeing this, the reader should..." For example, "click the blue Export button", "notice that the total is wrong", or "know which setting to change". Every annotation should serve that one purpose. If an arrow does not support it, leave it out.
Crop to what is relevant
The best annotation is a good crop. Remove toolbars, other windows and anything unrelated, so the important part takes up more of the image. Keep just enough surrounding context that the reader can tell where they are, such as a page title or a menu name. A tight crop also reads better on a phone, where a full-desktop screenshot shrinks to unreadable.
Choose the right annotation for the job
| Tool | Best used for |
|---|---|
| Arrow | Pointing at one specific element, such as a button or a value |
| Rectangle or highlight | Marking an area, such as a field, a row or a section of a form |
| Numbered markers | Showing steps in order, with the explanation in the text beside the image |
| Short text label | Naming something or stating a problem, in a few words |
| Blur or solid box | Hiding private details such as names, emails and keys |
Keep it consistent
- One highlight colour. Red or orange stands out against most interfaces. Use the same colour for the whole image and for the whole set of images in a guide.
- One line thickness. Lines that are too thin disappear, and lines that are too thick hide the thing you point at.
- One style of label. Same font, same size, same position relative to what it describes.
Number your steps
For anything that has a sequence, numbered markers work better than long captions. Put a small circled number next to each element, and list what to do for each number in the text. The reader can match "step 3" to the picture immediately, and you avoid writing "the second button from the left".
Say less on the image
Long sentences inside a screenshot are hard to read and impossible to translate or search. Put the explanation in the text around the image and keep on-image labels to a few words. If you need more than one short label per area, the image probably needs splitting into two.
Protect private information
Check every screenshot before you share it for names, email addresses, phone numbers, account numbers, access tokens and anything in browser tabs or notifications. Use a solid fill or strong pixelation rather than a light blur, because light blurs can sometimes be partly reversed. When you can, edit the original data to something fake before capturing, so there is nothing to hide.
Use the right file format
PNG is the best choice for screenshots, because it keeps text and sharp edges crisp. JPEG is smaller but adds blur around text, so use it only for photographs. If a page needs many screenshots, resize them to the width they will be displayed at and compress them, so they do not slow the page down. Our website speed basics guide explains why this matters.
Add alt text when you publish
If the screenshot goes on a website or into documentation, describe it in the alt text, for example "Settings page with the Export button highlighted". This helps screen-reader users and also shows up if the image fails to load. Avoid starting with "screenshot of", since screen readers already announce it as an image.
A quick checklist
- Is the point of the image clear within three seconds?
- Is it cropped to what matters?
- Are there only as many annotations as the point needs?
- Is all private information removed?
- Does the file have a clear name and, if published, alt text?
Tools. Windows includes basic markup in the Snipping Tool (see our guide to Windows screenshot shortcuts). If you annotate screenshots often and want arrows, numbered markers and blur in one place, SnapIt has a built-in editor made for that.