Decide what the screenshot needs to prove
A screenshot can show a clipped button, an unexpected message or a layout problem. It cannot explain every step that led there. Write the steps to reproduce, expected result, actual result and relevant browser information in the report itself. Keep the screenshot focused on the visible evidence.
For example, if a Save button disappears at a narrow window width, include the surrounding panel and the edge where the button should be. Cropping tightly around an empty space would remove the context that makes the problem understandable.
Remove private information first
Open the screenshot editor and choose, paste or drop a still PNG, JPEG or WebP. Crop unrelated tabs or conversations, but retain relevant controls and error messages. Use permanent redaction for account names, addresses or tokens that support does not need. Apply all redactions before exporting. Highlights and outlined rectangles are annotations, not concealment.
If the error message itself contains a private value, redact that value while leaving enough of the surrounding message to describe the failure. Read the sharing checklist before posting to a public issue tracker.
Give each annotation one job
- Choose Arrow and draw toward the affected control. You can also use Add region and adjust its position with the numeric controls.
- Use a rectangle to outline the relevant area without hiding its contents. Choose a colour that is visible against the screenshot.
- Add a short text label such as “Expected Save button here”. Place it in unused space and keep it inside its text box.
- Use a highlight sparingly for emphasis. Avoid covering text with several overlapping marks.
One arrow and one label are often enough. If several steps need explanation, use separate screenshots and refer to them by order in your written report. Undo and redo let you revise the annotations without restarting.
Choose a readable export
PNG is a useful starting point for small text and flat interface colours. JPEG or WebP may reduce size, but inspect fine text after changing quality. Use the size preview to compare actual bytes; conversion does not always make a file smaller. If you resize, check that the smallest important label is still readable at the size the recipient will see.
Download the flattened result and reopen it outside the editor. Confirm that redactions are complete, arrows point to the intended controls and no annotation hides the error. Browser-supported copying is available, but a downloaded file is useful when a tracker requires an attachment.
When the report needs more than one image
For a short before-and-after comparison, combine exported screenshots into one image. For a longer sequence, prepare an image PDF if the recipient accepts it. Each tool has its own workspace: select the safe exported files, because editor annotations and redactions are not inherited by other tools.