How to Annotate a Screenshot for a Bug Report

A screenshot proves that something looked wrong, but it does not show where the reader should look or what you expected instead. A developer can spend a minute scanning a full desktop before finding the one control that failed. Annotation turns a picture into an instruction.

Start with a clean capture from Screenshot Capture, then crop and mark it in an image editor. Every mark should answer a question the reader would otherwise ask.

Crop before you annotate

A bug report needs enough context to locate the problem and no more. Keep the window frame, the page title, and the relevant controls. Remove unrelated tabs and your desktop. If the fault only appears at a particular window size, keep enough layout to show that size.

Check the corners before going further. Browser profile names, email addresses, customer records, and notification pop-ups are easy to miss when you are concentrating on the centre. Redact before annotating, because a later crop may remove the detail that explains the bug.

Choose the simplest mark that works

A rectangle around the faulty element is usually enough. Use an arrow when the element is small or sits among similar controls, and point at the exact spot rather than the general area. Numbered circles suit a sequence: 1 for the button pressed, 2 for the dialog that appeared, 3 for the error message.

Pick a colour that contrasts with the page without hiding it. A thin red or orange outline works on most light interfaces; a bright outline may disappear against a white card. Do not highlight text the reader needs to read, and do not blur the error itself. If a value is sensitive, cover it with a solid block and flatten the image.

Write a caption that stands alone

State three things: the action you took, the result you saw, and the result you expected. “Clicked Save on the draft invoice; the spinner remained for two minutes; expected a confirmation message” is more useful than “Save broken”. Add the page or feature name.

If the report has several screenshots, caption each one and refer to it by number in the steps. Do not annotate the same fault from three angles unless the angle is the point.

Check the exported file

Open the image at 100 per cent and read it as if you had never seen the page. Does the arrow point at the control you meant? Is the error message legible? Is any personal data still visible? Name the file specifically, such as invoice-save-spinner-2026-11-12.png.

Save as a PNG so text and thin lines stay sharp, and keep the unmarked capture in case a developer asks for the original. The capture runs in the browser and is not uploaded, but an image attached to a ticket leaves your control at that point.

For a page too long for one frame, see How to Take a Scrolling Screenshot. For the capture options, read How to Capture a Tab, Window, or Selected Area.

Take the screenshot with Screenshot Capture, crop to the evidence, and add one precise mark. The sentence you would say out loud is usually the sentence the report needs.