When this kind of tool is useful (and when it isn't)
Adding text to an image is one of those tasks where ten different specialized tools exist and most are overkill. Canva, Figma, Photoshop, Photoshop Express, Snapseed, Affinity Photo — all great, all require you to learn an app or sign in. For the common case ("I want one short line of text on this thumbnail") a quick web utility is faster.
This tool covers that common case well. One text layer, picked font, picked color, picked corner. It does NOT cover: gradient fills, drop shadows, multi-line layout with custom leading, hex-shaped backgrounds, kerning by hand, animations. For any of those, use a full editor.
Practical tips for legible text-on-image
- High contrast wins. White text on a black stroke (or vice versa) reads from every background. Two same-tone colors lose legibility fast.
- Bigger than you think. Text that looks tasteful at full size becomes unreadable when the image scrolls past on a phone. Err toward larger; you can always crop the image to fit.
- Sans-serif for thumbnails. Bold sans-serifs (Manrope, Inter, system sans) read much better at small sizes than serifs. Reserve serifs for editorial / book-cover treatments.
- Avoid the safe zones. Social platforms add UI on top of thumbnails: TikTok puts a play button in the center, Instagram puts a username overlay at the bottom, YouTube puts a duration badge in the bottom-right corner. Keep your text out of those spots.
How to use this tool
- Drop a PNG, JPG, or WebP image onto the drop zone.
- Type your text in the Text field. The preview updates instantly.
- Adjust font size, font family, color, position, and outline. Each control updates the preview live.
- Click Render & download. The output matches the input format (PNG, JPG, or WebP).
What the export looks like under the hood
Behind the scenes, the tool draws your source image onto a canvas at its original resolution, then renders the text on top with ctx.fillText() (and strokeText() for the outline). The canvas is encoded back to whatever format you uploaded. Resolution is preserved exactly — no upscaling, no downscaling, no quality loss beyond the format's own re-encode.
For PNG sources the output is lossless. For JPG and WebP the re-encode is quality 92 and 0.9 respectively — visually identical to the source on almost every image.