Skip to main content

4 min read · August 21, 2026

How to add text to an image and keep it readable

Placing labels on a photo so they stay legible over any background, keeping the file in its original format, and doing it without sending the picture anywhere.

Annotating an image is a small job that people reach for a large application to do. A label on a diagram, a caption on a screenshot, a name on a product photo, a title over a picture for a slide — none of that needs a design tool, and opening one for it costs more time than the task.

What it does need is text that stays readable, positioned where you want it, on a file that comes back in the format you gave it.

Readability over a photograph is a contrast problem

Text on a plain background is easy. Text on a photograph is not, because the background changes underneath the line. Dark letters vanish into a shadow, light letters vanish into a sky, and a single word can cross both.

There are three standard solutions: a solid box behind the text, a drop shadow, or an outline in the opposite tone. The box is the most legible and the most intrusive. The shadow is subtle and fails over busy detail. The outline is the good compromise — it costs a thin edge around each letter and works over essentially anything.

Filum can put an auto-contrast outline on each label: a black edge over light text, a white edge over dark text, chosen from the colour you picked. It is on by default and can be switched off per label when you know the background is uniform.

More than one label, positioned by hand

One centred caption covers a small fraction of real annotation work. Labelling a diagram needs several pieces of text in specific places. A comparison screenshot needs a word beside each half. A product photo might need a title in one corner and a price in another.

Filum allows up to twelve separate labels, each dragged into position on the preview and styled on its own — colour, size, and font per label. Line breaks inside a label are kept, so a title and a subtitle can live in one block rather than being fought into two.

Format, quality, and where it happens

A photograph should not come back as a large PNG because that was easier to implement. Filum keeps the format: a JPG comes back a JPG, a PNG a PNG, a WebP a WebP, an AVIF an AVIF. Adding text changes pixels, so lossy formats are re-encoded at high quality and the measured quality score of the delivered file is shown. PNG stays pixel-for-pixel identical everywhere the text does not cover, transparency intact.

The text is drawn inside your browser on your own device. That matters more than it sounds, because the images people annotate are so often screenshots — of an application, an invoice, an error message, a conversation — and a screenshot is one of the most information-dense things a person can accidentally hand to a stranger. Here it is never transmitted at all.

Try Filum free

No account required.

How to add text to an image and keep it readable | Filum