Image Watermark Tool

A watermark is a compromise you make deliberately. Every pixel it occupies is a pixel of your image obscured, and the return is that a screenshot of your work carries your name with it. Getting the balance right is mostly about size and placement, and both are easier to judge when you can see the result immediately.

This tool draws a text watermark onto an image in your browser. You control the text, its opacity, its size in pixels, and which of five positions it sits in; the preview updates as you adjust, and the download is a PNG at the original dimensions with the text burned in.

The critical detail - the one that produces most of the confusion with tools of this kind - is that the font size is measured against the image, not against the preview. That distinction is explained below, because it is why the same setting looks completely different on two photographs.

The font size you set is in pixels of the output image. On a 4,000-pixel-wide photograph, 48 pixels of text is a thin line across about a tenth of the width - nearly invisible. On an 800-pixel crop, the same 48 pixels spans a substantial part of the frame. The setting has not changed; the canvas it is measured against has.

The preview compensates for this by scaling the finished image down to fit, which is honest - you see the true proportion - and initially disorienting, because raising the number by ten does very little on a large image and a lot on a small one. The practical approach is to think in fractions of the width. Text at roughly a twentieth to a fifteenth of the image width is a readable, unobtrusive watermark, so a 4,000-pixel photo wants something in the 200 to 270 range rather than the default 48.

The setting accepts values from 12 to 400, which is enough for images up to around 6,000 pixels wide at that proportion. Above that the ceiling starts to bind, and the watermark will be proportionally smaller than intended.

It works against casual reuse. Someone screenshotting your image for a mood board, a repost, or a slide carries your name into that context, which is attribution you would not otherwise get and is often the entire point. A corner watermark on a portfolio piece does this job at very little cost to the image.

It does not work against determined removal. A corner watermark is trivially cropped away, and one on a flat background is straightforward to paint out. Central watermarks resist both but ruin the image, which is why they belong on proofs and previews rather than on anything you want people to enjoy looking at. If your concern is theft rather than attribution, a watermark is the wrong instrument - registration and takedown notices are what actually address it.

That framing should also shape the opacity choice. Attribution wants a watermark that is legible when looked for and easy to ignore otherwise, around the middle of the opacity range. Proofing wants one that cannot be ignored, near the top of the range and centred. Picking a setting without deciding which job you are doing is how you end up with a watermark that spoils the image and still gets cropped off.

A canvas is created at the image’s exact dimensions and the image is drawn onto it unmodified, so nothing about the underlying pixels or the resolution changes. The text is then drawn twice: once as a black outline whose thickness scales with the font size, and once as a white fill on top. That pairing is what keeps the watermark legible over both light and dark areas - white alone vanishes on a pale sky, black alone vanishes in shadow.

Both passes are drawn at your chosen opacity, in a bold sans-serif at the size you set. Position is computed from a padding of half the font size: left-aligned positions start one half-size in from the left edge, right-aligned positions are offset by the measured text width plus that padding, top and bottom positions sit a half-size plus half the text height from their edge, and the centre position is measured to the middle on both axes.

Because the offset uses the measured width of your actual string, a longer watermark placed on the right sits further left rather than overflowing. What is not handled is a string longer than the image is wide at that font size - there is no wrapping and no automatic shrinking, so the text will simply run past the edge and be clipped.