Annotating, watermarking and blurring images before they go public

A screenshot is about to leave your machine — a bug report, a support ticket, a listing photo. Somewhere in it is a detail that must not go public: an email address, a customer name, an API key in a terminal. Somewhere else is a thing that needs pointing at. This guide covers the four jobs that come up every time: hiding a detail so it cannot be recovered, adding labels and arrows people can read, stamping a watermark that does its job without wrecking the picture, and cropping away what does not belong. It also explains why the obvious approaches — blur it, pixelate it, draw a box on a PDF — fail, and how to check the file before you send it.

Redaction that cannot be undone

Blur and pixelation feel like destruction, but both are ordinary filters that leave much of the original behind. Pixelation replaces each block of pixels with its average colour. For text in a known font on a known grid the set of possible averages is small: render every candidate character, pixelate it the same way, compare. That is what the Depix tool (2020) and Bishop Fox’s Unredacter (2022) do to real screenshots. Blur is a low-pass filter (the editor here uses Konva’s stack blur) that keeps the shape of every word, so heavy blur is matchable by the same candidate-and-compare method.

A solid, fully opaque box has none of these problems: every pixel under it becomes a constant, so the output holds no information about what was there. A 50% black box looks tidy, but each output pixel is out = 0.5 × original + 0.5 × black, so the original is 2 × out — one multiplication per pixel undoes it. Keep the box at 100% opacity, make it a few pixels larger than the text to cover anti-aliased fringes, and then flatten: save a new file with the box baked into the pixels rather than stored as a layer on top of the original.

Flattening is where real leaks happen. A black rectangle drawn on a PDF is usually an annotation over untouched text: select-all and copy, or pdftotext, returns every word. Layered formats (PSD, XCF, an editor’s project file) keep the original underneath. Even crops can leak: the March 2023 “aCropalypse” bugs — CVE-2023-21036 in Google’s Pixel Markup tool, CVE-2023-28303 in the Windows 11 Snipping Tool — came from editors that wrote the cropped PNG over the start of the original file without truncating it, so the uncropped tail survived after the IEND chunk. The rule that covers all of these: the file you publish must be a fresh encode of what you can see, and nothing else.

What the four tools on this site actually do

Blur, Draw/Add Text, Watermark and Crop are four doors into the same editor (Filerobot 5.0.0-beta.159, drawing with Konva 9.3.18). Each page opens it on a different tab, and every tab stays available whichever page you came in through. Anything the browser cannot decode itself (PSD, TIFF, AVIF, TGA…) is converted first by ImageMagick compiled to WebAssembly, and HEIC by libheif.

Blur is a whole-image effect

The Blur Image page opens the Finetune tab with one Blur slider from 0 to 100. It softens the entire picture — there is no region selection — which makes it right for a background behind overlaid text and wrong for hiding a licence plate.

The Rectangle tool is the redaction tool

In the Annotate tab, which Draw/Add Text opens directly, every shape starts from the editor’s defaults: fill #000000, opacity 100%, stroke width 0, no shadow. A freshly drawn Rectangle is therefore already a solid black box; the Opacity, Stroke, Shadow and Position options let you change that, and for redaction you should leave opacity alone. Text starts at 14 px Arial (Tahoma, Sans-serif and Comic Sans are the alternatives) and reads “Lorem ipsum dolor sit amet, consectetur adipiscing elit.” until you type over it. Arrows default to a 6 px stroke, Lines and the Pen to 1 px.

Watermark: one mark, image or text

The Watermarktab has an “Add watermark” button with two choices: “Upload watermark” takes an image file from your device (a transparent PNG of a logo is ideal) and “Add as text” creates a text mark. Either is placed in the centre at half the image’s size and then behaves like any other annotation — drag, scale, rotate, set Opacity, and use Padding and Position to pin it to a corner or an edge. The tab holds a single watermark; adding another replaces it.

Crop, and the save dialog everything shares

Crop opens the Adjust tab with drag handles and the five presets in the table. Whatever you did, Save opens the same “Save as” dialog: a file name, a format (png, jpeg, jpg or webp), a Quality slider from 1 to 100 that appears for JPEG and WebP only and defaults to 92, Width and Height fields, a “Max file size (KB, optional)” field that binary-searches the quality until the output fits, and a “Compress image” tick. The format defaults to the source format when that is PNG, JPG or WebP; anything else — HEIC, TIFF, GIF, BMP, AVIF — defaults to JPG, so pick PNG deliberately when it matters. An Ellipse crop always saves as PNG, because its corners are transparent.

Two limits. Pictures whose long edge exceeds 4096 px are downscaled before the editor opens, with the message Large image resized to 4096 × 3072px so it can be edited and saved on this device. And several files dropped at once open one after another and download together as edited-images.zip; closing an editor without saving skips that image.

A redaction recipe

1. Open the screenshot in Draw/Add Text and choose Rectangle in the Annotate tab.
2. Drag a box over the text with a few pixels of margin on every side. Leave the fill black and the opacity at 100%.
3. Repeat for every occurrence — the same value often appears twice: in the title bar and a sidebar, in a table and in the URL.
4. If a whole region should not exist, switch to the Adjust tab and crop it out instead of covering it; less image is less to leak.
5. Save as PNG. Open the downloaded file, not the editor, and zoom in on the box edges: they should be hard.

The whole editor runs in the tab — load the page, go offline, and it still saves — so a screenshot full of customer data never has to be uploaded in order to be censored.

Screenshot hygiene: what people forget to remove

• The address bar. URLs carry session identifiers (?token=, sid=, access_token=), share links that grant access to anyone holding them, and internal hostnames. Crop it out unless the URL is the point.
• The account corner. Google, Microsoft and most SaaS apps show your email address or avatar top-right.
• Everything around the window. Other tab titles name the customer you were just looking at; a notification preview arrives mid-capture; the taskbar shows open apps, the clock (your time zone) and the Wi-Fi network name.
• File paths and prompts. Terminal prompts (user@hostname), title bars showing /Users/yourname/Projects/client-name/.
• Small text. A footer line you cannot read at fit-to-window is legible at 100%. Check the whole frame at actual size.

Watermarking without ruining the picture

Decide first what the mark is for. Attribution — your name travels with the picture when it is reposted — wants a small, legible mark at an edge. Deterrence — a proof the client has not paid for, a listing photo a competitor might lift — wants a mark that cannot be cropped off, which means across the subject. The crop tool removes a corner mark in one drag; that is the test to apply to your own placement.

For a corner mark, 30–50% opacity is visible without shouting; for a large diagonal across the frame, 15–25% keeps the picture usable. Set the Padding so an edge mark does not touch the border. For repeats, add the logo several times with the Image tool in the Annotate tab, since the Watermark tab holds only one.

A watermark is pixels, not a lock: it can be cropped, cloned out or removed by an inpainting model. Treat it as a label and as evidence of origin, not as copy protection. Keep the unwatermarked original at full resolution somewhere safe, publish a marked copy at the size the page needs (set the Width in the save dialog — 1600 px is plenty for most listings), and never watermark only the preview while the full-size original sits at a guessable URL in the same folder.

Annotating for documentation and bug reports

The reader is looking at an interface they may not know, so the marks must contrast with every colour in it. Pick a colour the UI does not use — a saturated orange or magenta on most themes — and give text and arrows a contrasting Stroke or Shadow from the annotation options. A red arrow pointing at a red error banner disappears.

Sizes in the editor are image pixels, not screen pixels. On a 2× “Retina” capture (2880 × 1800 for a 1440 × 900 display) body text is about 26 px tall, so the default 14 px label is smaller than the UI it describes; use 28–32 px there, 14–16 px on a 1× capture, and keep one size across a set. For step-by-step documentation, number the steps — an Ellipse with a Text digit inside, the same size and colour in every screenshot. Point arrows at the control, not at its label, and stop just outside it.

Save UI screenshots as PNG. JPEG quantises 8 × 8 blocks of a frequency transform, which leaves ringing around every hard edge — exactly what text and window borders are — and its usual 4:2:0 chroma subsampling stores colour at half resolution, so coloured text smears. PNG is lossless. The image-formats guide goes deeper.

Export format and metadata

Whatever you choose, the output is a canvas encode at the cropped size (or the Width and Height you typed). A canvas carries no metadata, so the file has no EXIF, GPS position, XMP, IPTC, embedded thumbnail or colour profile — the right outcome for anything going public. For a photo you want to publish unedited, the Remove Metadata tool lists the GPS, camera, date and software fields it finds and downloads a cleaned copy, losslessly for JPEGs; the metadata guide explains what those fields reveal.

How to check the file before you send it

Look at the exported file itself, never the editor preview, and run three quick checks in a Mac or Linux terminal:

# 1. No metadata should survive a canvas export
exiftool -a -G1 out.png
#    expect no [EXIF], [GPS], [XMP] or [IPTC] group

# 2. A PNG must END with IEND; bytes after it are leftover data
tail -c 12 out.png | xxd
#    0000 0000 4945 4e44 ae42 6082   -> clean (IEND + CRC)
tail -c 2 out.jpg | xxd
#    ffd9                            -> clean JPEG end marker

# 3. A "redacted" PDF that still contains the words
pdftotext redacted.pdf - | grep -i "account"

Then zoom to 400% on every redaction box: edges hard, interior one flat colour. Finally compare size with expectation: a cropped 400 × 300 PNG that weighs 4 MB is carrying more than 400 × 300 pixels.

Common mistakes

• Blur that is “strong enough”.No strength makes blurred text safe against candidate matching, and the site’s blur affects the whole image anyway. Use an opaque Rectangle.
• A tasteful semi-transparent box. Anything under 100% opacity is a linear blend and can be inverted per pixel. Opacity is for watermarks, not redaction.
• Saving the project instead of the picture. A PSD, XCF or PDF with a box on a layer still contains the text. Export a flat PNG or JPEG.
• Leaving the placeholder.A new Text annotation reads “Lorem ipsum dolor sit amet…” until you replace it; it is easy to save with one still in a corner.