Screenshot editing guide
How to Edit a Website Screenshot: Add Text, Arrows, Highlights and Redact Details
By SnapshotFlow ·
A raw screenshot rarely speaks for itself. Send one without notes and the reply is “What am I looking at?” Send one with a customer’s email in the corner and you have a bigger problem.
To edit a website screenshot, open it in a screenshot editor, add a short note and an arrow, highlight what matters, cover private details with a solid mask, and export the edited copy. In SnapshotFlow, you can do all of this for free in the Chrome extension, right after a new capture or on a PNG, JPG or WebP image you already have.
Below you’ll find each annotation tool with its shortcut, plus the details that decide whether an edit actually helps: labels people can read, redaction that really hides data, long full-page captures and the right export format.
On this page
Quick steps: how to edit a website screenshot1. Capture a page or open an existing screenshotChoose the right screenshot annotation tool2. Add text to a screenshot3. Draw arrows and boxes4. Highlight content and add numbered steps5. Redact private details before sharing6. Crop and refine the screenshot7. Export PNG, JPG or PDF, then shareExample: turn a checkout screenshot into a useful bug reportFix common screenshot editing problemsFrequently asked questionsRelated screenshot guidesQuick steps: how to edit a website screenshot
- Install the SnapshotFlow Chrome extension and open the website you want to capture.
- Choose a capture mode, or click Open image to import a screenshot you already have.
- Use Text for notes, Arrow for a target, and Highlight for emphasis.
- Use Redact to cover private information with solid black rectangles.
- Crop excess space and check the image at 100%.
- Choose PNG, JPG or PDF and click Download. Open the exported file to check the final result.
Local capture, editing and export are free, without an account or watermark. You need an account only for optional cloud features. These instructions describe the Chrome extension editor; the website dashboard also provides server-side screenshot tools, which use a different workflow.
1. Capture a page or open an existing screenshot
Open the page in Chrome and prepare the state you want to show: select the right tab, open the relevant menu, and wait for images and charts to load. Capture only content you have permission to use and share.
Click the SnapshotFlow extension icon. Choose Full page for the document below the fold, Visible area for the current view, or Select an area for one region. Use Scrolling area for content inside a scrollable panel. If a menu disappears when you click the extension, try a capture delay.
After the capture, work in the editor. To annotate a saved screenshot instead, click Open image in the extension popup or editor and choose a PNG, JPG or WebP file. You can also drop a supported image into the editor or paste an image with Ctrl+V on Windows or Cmd+V on macOS. Each imported image opens as a separate editable capture.
For an image created through the SnapshotFlow playground or an automated tool, download the image first and import that file into the extension editor. See the Chrome DevTools screenshot guide if you need another way to create the original.
A scrolling capture combines multiple views. Check for missing lazy-loaded content, repeated sticky headers or changing animations before you annotate. Retaking an incomplete capture gives you a better starting point than marking a broken image.
Choose the right screenshot annotation tool
| Your goal | Tool | Example |
|---|---|---|
| Explain a change | Text | “Move this button below the price.” |
| Point to one control | Arrow | Show the button that fails. |
| Emphasize readable content | Highlight | Mark a sentence or a row. |
| Outline a component | Box | Frame a navigation menu. |
| Explain a sequence | Step | Mark the first and second clicks. |
| Hide private details | Redact | Cover a customer email address. |
| Remove surrounding space | Crop | Keep the form and its error message. |
Use one annotation per point. An arrow with a short note usually explains an issue better than five overlapping marks. Leave some of the surrounding interface visible so the reader can tell where on the page it happens.
2. Add text to a screenshot
- Choose Text in the left toolbar, or press T while you are not typing in a field.
- Enter your note in the Text field on the right. You can use multiple lines.
- Choose a text color and size: 18, 28, 40 or 60 px.
- Click the image where you want the note to start.
- Choose Select or press V to move the note. To revise it, select it on the image or in Objects, change the wording or size, and click Apply changes.
Write a concrete instruction such as “Show the validation message here” rather than “Fix this.” Place the label in open space and connect it to the target with an arrow. Keep labels short enough to read at the size your recipient will see.
Adding text creates an annotation over the image. It does not edit the original website or turn captured words into editable text. If you need to demonstrate replacement wording, label it as a proposed change so readers understand the screenshot.
3. Draw arrows and boxes
- Select Arrow or press A.
- Choose a color and line width of 3, 5, 8 or 12 px.
- Drag from the start of the arrow toward the target, then release. The arrowhead points toward the end of your drag.
- Use Select to move the arrow. To fine-tune its length and direction, change Width and Height in the side panel and click Apply changes.
End the arrow next to the button or text you mean, with enough space to keep its label readable. Choose a color that stands out against the page. On a tall capture, check the arrow at the final viewing scale rather than relying on a zoomed-out preview.
Use Box (R) when the target spans a whole component. Drag a rectangle around the panel, card or form. A box outlines the area without filling it; it does not hide information inside it.
4. Highlight content and add numbered steps
Arrows point at one thing. Highlights and numbered steps help when the reader needs to read a line or follow a sequence. Select Highlight (M), choose a color, and drag over the content you want to emphasize. SnapshotFlow uses a translucent rectangle with fixed transparency, so readers can still see the underlying text. Select the highlight to move it or set its width and height, then apply your changes.
Highlight one phrase, field or row at a time. If the color makes the text difficult to read, choose another color or use a box around the content instead. A highlight is an emphasis tool; use Redact for information you need to conceal.
For a walkthrough, choose Step (N) and click to place numbered circular markers. The editor assigns the next step number. Choose the marker color and number size, then place markers beside the controls in the order the reader should use them. Add a short text note when a number alone leaves the action unclear.
5. Redact private details before sharing
Redaction is the step that is easiest to rush and hardest to take back once a file is shared. Use Redact (H) to cover names, email addresses, account numbers, tokens or other information that should stay private. Drag a mask over the entire value, including its edges. SnapshotFlow uses opaque black rectangles and draws them into the exported image.
- Inspect the capture at 100% and locate private information.
- Draw a redaction mask with a small margin around each value.
- Check other occurrences in headers, tables, sidebars and every part of a split capture.
- Export the edited file and open that file outside the editor.
- Zoom in on each covered area and confirm that no characters remain visible at the edges.
A translucent highlight leaves the content visible. For a shareable copy, prefer a solid mask over a blur whose strength you have not verified. Redaction covers the selected pixels; it does not find secrets elsewhere in the screenshot or remove identifying context that remains outside the masks.
The export and the local draft are different copies. Exported images contain flattened black pixels. The original image and editable masks stay in the local capture on this device for up to 24 hours (the extension keeps the five most recent captures) unless you delete it sooner. Someone with access to that editable capture can remove a mask and see the original. Share the checked export, and use Delete this local capture when you no longer need the original. Local deletion does not delete cloud copies or revoke existing sharing links.
For a public tutorial, use demo accounts and invented data where possible. This reduces the amount of private information you need to find and cover.
6. Crop and refine the screenshot
Choose Crop (C) and drag around the area you want to keep. Leave enough context to identify the page and understand the action. Keep an error message next to its field and a dropdown next to its trigger. Use Undo to restore the previous crop if you cut too much.
Use Select to pick an annotation on the canvas or in Objects. Drag to move it, use the arrow keys for 1 px adjustments, or hold Shift with an arrow key for 10 px adjustments. Delete the selected object with Delete or Backspace. Ctrl/Cmd+Z undoes an edit; Ctrl/Cmd+Shift+Z redoes it.
Fit width helps you navigate a long page. 100% shows the image at its original scale. Editor zoom changes the working view, not the exported image dimensions. Wait for Saved on this device before closing the tab. Saved edits reopen with the capture, while undo history lasts only in the current editor tab.
Example: turn a checkout screenshot into a useful bug report
Suppose a checkout form shows no error after a customer submits an invalid postal code. Capture the relevant form, then prepare one image with a clear message:
- Crop to the form while keeping its heading and submit button visible.
- Redact the customer name, email, address and any payment details.
- Draw a box around the postal-code field.
- Add an arrow pointing to where the missing message should appear.
- Add the note “Expected: show a postal-code validation message after Submit.”
- Place numbered steps beside the field and Submit button if you need to show the action sequence.
- Export PNG and check the file before attaching it to the issue.
In the bug report, record the page URL with private parameters removed, browser, viewport, reproduction steps, expected result and actual result. Keep the screenshot readable by putting longer explanations in the issue text. For automated test evidence, see how to capture screenshots when tests fail.
Fix common screenshot editing problems
| Problem | What to try |
|---|---|
| The text tool does nothing | Enter a note in the right-hand Text field first, then click the image. |
| A shortcut types a letter | Leave the text input before using tool shortcuts, or click the toolbar button. |
| The export contains only part of the page | Check the part picker. Download each part as an image or use PDF for all parts. |
| Annotations look tiny in a message | Crop to a smaller area, enlarge the note or send the original file rather than relying on a scaled preview. |
| The screenshot misses content | Load the content before capture. For a panel with its own scrollbar, use Scrolling area. |
| Copy image fails | Download a PNG and attach that file instead. |
| A shared image still shows an older edit | Create a new sharing copy; later local edits do not change existing links. |
Frequently asked questions
Can I edit a screenshot I already took?
Yes. Use Open image in the SnapshotFlow Chrome extension to import PNG, JPG or WebP. You can also drop a supported file into the editor or paste an image from the clipboard.
Can I change existing words in a screenshot?
The editor adds text annotations over image pixels. It does not make captured website text editable. For an actual website change, update the website and capture it again. Label proposed wording in a mockup so readers understand the change.
Is screenshot editing free in SnapshotFlow?
Local capture, annotation, cropping and export are free without an account or watermark. Optional cloud storage and sharing require an account and have separate limits; server-side URL rendering uses API quota.
Can someone remove a redaction from the exported image?
The exported image contains flattened opaque black pixels in the covered area, rather than a removable editor mask. The local editable capture still keeps the original on your device for up to 24 hours unless you delete it. Check the export for uncovered details and share that file.
Can I edit a full-page website screenshot?
Yes. The editor supports full-page captures. Very large captures may split into parts, with separate edits for each part. Image exports use the selected part; PDF includes all parts and their edits.
Can I export an annotated screenshot as a searchable PDF?
The extension exports image-based PDF pages in A4 or US Letter. Captured text and annotations are part of the image, so the PDF does not provide selectable text or preserve webpage links.
Make your next screenshot easier to act on
Capture a page, point to the detail that matters, and redact private information before you send it. Start with the free local editor; connect an account if you need cloud storage or a sharing link.
Install SnapshotFlow for Chrome · Create a SnapshotFlow account