How to annotate and redact screenshots
Make the next action clear, keep private details out, and share a finished image rather than an editable source.
Free toolScreenshot BeautifierGive screenshots a background, add arrows and numbered steps, and cover private details in a flattened export. Reuse your design next time.Open Screenshot StudioStart with one thing to explain
Crop to the relevant interface, add one clear pointer, and cover details your reader does not need. Export a copy and inspect it before sharing.
- Capture the interface at a readable scale.
- Remove irrelevant space while retaining enough context to identify the screen.
- Add arrows or numbered steps beside the actions you explain.
- Cover private details with fully opaque redaction.
- Export a raster image and open the exported file for a final check.
Choose the annotation that answers the question
An arrow shows where to look. A numbered marker shows when to act. Using them for distinct jobs reduces clutter.
| Annotation | Use it for | Avoid |
|---|---|---|
| Arrow | A small button, control or detail that is easy to miss. | Covering the label with the arrowhead. |
| Numbered step | The order of two or more related actions. | Numbering decorative details that are not steps. |
| Short label | A brief explanation absent from the screenshot. | Repeating an entire paragraph inside the image. |
| Highlight | A group of controls or a region the reader should inspect. | Using transparency to conceal private information. |
| Solid cover | Replacing private details in the shared copy. | Sharing a project with a removable cover layer. |
Make text readable at its final size
Check the screenshot at the width your reader will see. Extra background space reduces the room available for interface text.
Padding belongs around the screenshot rather than between the reader and the action. A marketing image may need generous framing; a help article often benefits from a tighter crop.
A worked framing example
Screenshot Studio’s built-in example is 1120 × 700 pixels. Its default 8% padding uses the shorter edge, giving 56 pixels on each side.
| Part | Calculation | Result |
|---|---|---|
| Padding | 700 × 0.08 | 56 px per side |
| Browser bar | 1120 × 0.045, rounded | 50 px |
| Native canvas width | 1120 + 56 + 56 | 1232 px |
| Native canvas height | 700 + 50 + 56 + 56 | 862 px |
Checked in Chrome 154 on macOS on 2 October 2026. Use Try example, Fit screenshot, 8% Padding, Browser frame, no Caption and Native composition to reproduce these dimensions.
For an exact 1200 × 630 image, choose the link-preview canvas shape and a 1200-pixel long edge. The screenshot fits inside it without being cropped by the ratio setting.
Use solid redaction for private details
A fully opaque cover hides the covered pixels in a flattened raster export. Blur and pixelation leave a transformed version of the source content visible.
The amount of information left by blur depends on the source, scale and strength. For a password, token or customer identifier, use a solid cover and include a margin.
- Check account names, email addresses and browser tabs.
- Check sidebar labels, notifications and search suggestions.
- Check URLs for private identifiers or tokens.
- Check small details outside the main subject.
- Open the downloaded copy. A correct editor preview is only part of the check.
Flattening changes what you can share
A cover in an editable project can be removed. A flattened PNG contains the resulting pixels, without those editable layers.
Screenshot Studio replaces covered source pixels before scaling the composition. The original stays in tab memory for undo, so exporting does not sanitise your source file.
Share the exported image. Keep the original and any editable project within their existing access boundaries.
Checking that covered pixels stay out of the export
We tested two synthetic 320 × 180 images that differed only inside the covered area. One had red pixels there; the other had green pixels.
The same fractional-position cover produced identical exported bytes for both images. We checked PNG, JPG and WebP at native size, in a cropped square and in a portrait composition.
| Export | Native | Square, 1200 px | Portrait, 1200 px |
|---|---|---|---|
| PNG | Identical bytes | Identical bytes | Identical bytes |
| JPG | Identical bytes | Identical bytes | Identical bytes |
| WebP | Identical bytes | Identical bytes | Identical bytes |
Tested in Chrome 154 on macOS on 2 October 2026, using the browser’s canvas encoders. This checks the renderer’s treatment of covered pixels. It cannot find details you forgot to cover, and it is not a Safari or Firefox test.
Choose a workflow for your device
A browser editor suits repeated framing and tutorials. Built-in tools are useful when you need a quick markup or capture.
| Method | Useful when | Tradeoff |
|---|---|---|
| floi Screenshot Studio | You need a reusable background, numbered markers, arrows and solid covers together. | One image at a time. You place covers manually. No editable project export. |
| Mac Preview | You already have an image open and need shapes, arrows or text. | Its markup workflow does not provide this editor’s saved screenshot framing styles. |
| Windows Snipping Tool | You want to capture a region and redact recognised email addresses or phone numbers. | Automatic recognition still needs review for missed details. Available controls depend on your installed version. |
| A full design editor | You need multiple screenshots, brand assets and layouts in an editable document. | More setup. Review storage and sharing settings, then export a flattened copy. |
Apple documents shapes and text in its Preview annotation guide. Microsoft documents Text actions and Quick redact in its Snipping Tool guide. Checked 2 October 2026. These are documented capabilities, not cross-platform floi test results.
Keep a tutorial sequence consistent
Reuse framing settings, then place annotations for each new screenshot. Copying the previous image’s marker positions blindly can point at the wrong control.
- Choose a consistent background and proportional padding.
- Save that design as a named style.
- Replace the screenshot and add the annotations this step needs.
- Use the same export size across the sequence.
- Check every output at the intended reading size.
In floi, named styles exclude captions and annotations. Your current caption survives a style change, so review it when replacing the screenshot.
Pick the output format deliberately
PNG is a useful default for screenshots with small text. JPG and lossy WebP can reduce file size but may soften edges.
| Format | Use it when |
|---|---|
| PNG | You want sharp interface text, transparency or a lossless output encoding. |
| JPG | Your composition is mostly photographic, file size matters and an opaque background is acceptable. |
| WebP | Your destination accepts it and you want transparency with lossy encoding. |
Lossless output does not restore details missing from the input. Start with a clear source and avoid repeatedly resizing exported copies.
Include a text alternative
Write the actions in the surrounding document as well as the image. Numbered markers should connect to those written steps.
Alt text can state the image’s purpose and important result. Keep long procedures in ordinary text where they can be read, copied and updated.