Add Text to Photo

Upload a photo, type your text, and save it at the original size

Add text to photo puts words on top of a picture you already have, then saves the result as one image with the same width and height as the photo. You can place up to eight texts. Each one has its own font, size, tilt, color, outline and background. Drag the text on the stage with a finger or a mouse, resize it with the dot at the bottom right, and tilt it with the dot at the top.

The most common failure with text on a photo is that it gets lost in the picture. So the legibility check under the stage draws the brightness range behind your text and the text color on one bar, and rates the pair with the web accessibility contrast ratio (WCAG). If it says the text is lost, one click on outline, background box or change text color fixes it. The photo and the text are processed only in this browser and are never sent to a server.

When to use it

• Adding a place and a date to a trip or everyday photo: a large title near the top and a small date at the bottom right is the two-text layout you see on the sample photo.
• Marking a price or an offer on a product photo: the yellow label style puts a box behind the text, so the price stays readable even on a busy picture.
• Making a quick notice image: the caption band style lays a translucent band across the full width of the photo and puts the text on it. It looks like a video caption and suits one short line.
• Putting your name on photos you took: the repeating watermark tiles a faint text diagonally over the whole picture, so cropping out one corner does not remove it.
• Making a vertical sign or poster: switch the direction to vertical and the letters stack top to bottom, with lines running from right to left.

Steps

1. Choose a photo: use the button, drag a photo file onto the editor, or paste a copied image. At first a sample photo with two sample texts is shown, so you can see a result before you upload anything.
2. Type the text: click a text chip to select it, then type in the box. A new line makes another line of text, and one text can hold up to 300 characters. Add text creates a new text that copies the look of the current one and sits a little lower.
3. Pick a look: each of the six style cards is a crop of your photo at the spot where the selected text sits, with that style tried on. Click one you like, then adjust the font, size and color.
4. Place it: drag it on the stage, or click one of the nine positions to put the text at 5% of the shorter side away from the edges. While you drag near the middle, a guide line appears and the text snaps exactly to the center.
5. Check and save: look at the legibility check and the outside-the-photo warning, then save as PNG, JPG or WebP. The save button and a legibility badge sit right below the stage, and on devices that support sharing the Share button sends the image straight to an app.

How the tool measures whether text is readable

Success criterion 1.4.3 of the Web Content Accessibility Guidelines (WCAG 2.2) asks for a contrast ratio of at least 4.5 : 1 for text and images of text, and at least 3 : 1 for large-scale text. The ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one. It runs from 1 (the same color) to 21 (black on white). A photo is not one flat color, though, so measuring a single point makes the verdict jumpy.

This tool samples up to about 5,000 photo pixels evenly from inside the text block, measures each one against the text color, and shows the value at the 10% point from the low end. That is close to the worst spot, yet a few stray pixels do not move it. The value is shown rounded down to one decimal place, and the verdict uses the shown value. 4.49 appears as 4.4 and counts as below 4.5.

As the table shows, white text falls far short on a bright sky or a sunset. When the outline is 3% of the text size or more, the edge of each letter takes the outline color, so from that point the verdict uses the contrast between the text color and the outline color. White text with a black outline gives 18.8 : 1 whatever the background is. With a background box, the tool mixes the box color into the photo by its strength and measures again against that result. The opacity setting, which makes the whole text fainter, is mixed into the text and box colors in the same way.

The check bar runs from black on the left to white on the right, in order of perceived lightness (CIE L*). The orange band is the 10% to 90% range of the photo brightness behind the text, the line inside the band is the middle value, the dot with a white edge is the text color, and the thick ring is the outline color. If the dot sits inside the band, a background of the same lightness as the text is behind it, and the text seems to vanish there.

When to use outline, shadow, box or band

Using all of them at full strength at once only makes a mess. Raise the outline from 0 a little at a time until the check turns to easy to read, and if the photo is still too busy, move on to the box or the band, in that order.

Text size is a percentage of the photo width

Text size is set not in px but as a percentage of the photo width. The same 48 px text looks large on a 1,000 px photo and small on a 4,000 px one. With a percentage, the preview and the saved full-size image keep the same proportion, and the text takes the same share of the picture when you switch photos. Line spacing is 1.25 times the text size, outline thickness is a percentage of the text size, and the box padding is 0.3 times horizontally and 0.18 times vertically, all drawn in rounded px.

A canvas strokes an outline half inside and half outside the letter shape, so the tool draws the line at twice the table thickness to make the visible thickness outside the letters match the table. A tall portrait photo has a short width, so the same percentage looks smaller on it. For a three-line text, check that the line height × 3 does not exceed half the photo height, and lower the size if it does.

Seven font choices and their licenses

System sans is a font already on the visitor's device, so it draws at once. The other six are free fonts from Google Fonts that are hosted on this site and downloaded only at the moment you choose them. The first time you pick one, the box blinks while the download in the table below finishes, and then the stage switches to that font.

All six downloadable fonts are under the SIL Open Font License 1.1. According to the OFL FAQ, the license lets you use the fonts for any kind of design work, including logos and posters, without extra permission, and it does not restrict the license of the artwork you make with them. The license file is linked in the table. This is a pointer to the license text, not legal advice.

Fonts differ in which characters they contain. Bebas Neue is a capitals-only design: if you type lowercase letters, the lowercase glyphs are drawn with the same shapes and height as the capitals. None of the six fonts has Korean, Japanese or Chinese characters. Those characters are drawn in the system font, one character at a time, and a note under the font box tells you which ones were swapped.

How vertical writing is laid out

With the direction set to vertical, letters go one per cell from top to bottom, and lines go from right to left. A new line starts a new column on the left. The line alignment buttons change to top, middle and bottom, and they line up the start of each column.

• Latin letters and digits are not rotated. Each one stands upright in its own cell, so a word reads as a stack of letters.
• For Chinese, Japanese and Korean text, the tool moves 、 and 。 to the upper right of the cell and turns characters such as ー, 〜, … and brackets by 90 degrees to follow the vertical direction.
• A long number such as 2026 turns into a tall stack. A separate horizontal text is easier to read for dates.

Spacing of the repeating watermark

When repeat is on, the same text is tiled over the whole photo like a grid. The horizontal gap is the width of the text's bounding box plus 2 times the text size, the vertical gap is its height plus 1.6 times, and each row is shifted by half a tile. If a photo would get more than 300 copies, the gaps are widened by 1.2 times at a time so the stage does not slow down. The repeating watermark style starts at 35% opacity, 4% size and a tilt of −30°.

A watermark only discourages use without permission. It does not stop it. The fainter the text, the less of the photo it hides and the easier it is to remove, so keep the original photo somewhere else and put the mark only on the copy you publish.

Save formats and saved size

• PNG (default): the cleanest letter edges, and transparent areas stay transparent. Files are large.
• JPG: small files. It cannot hold transparency, so the background is filled with white, and you choose a quality from 50 to 100% (default 90%).
• WebP: a middle ground between file size and sharpness. If the browser cannot save WebP, MDN says it makes a PNG instead, so the tool does not save and asks you to pick another format.

The saved size is the same as the photo you uploaded. But Safari on iPhone and iPad can draw a canvas of only up to 4,096 × 4,096 = 16,777,216 pixels (canvas-size test results). If the original size cannot be saved, the image is rebuilt smaller within that area at the same proportions, and the tool tells you it was reduced and by how much.

You can upload a photo up to 20 MiB per file, 40 megapixels, and 16,384 px on a side. The rotation information a camera records is applied when the photo is read, so a photo taken upright does not end up lying on its side.

Common mistakes

• Judging by the preview size: the stage is a scaled-down picture. Open the saved file at its real size to check blur on small text.
• Pushing text against the edge: when a social network crops to a square or 4:5, edge text gets cut. Even if there is no outside-the-photo warning, the 5% margin of the nine positions is the safer choice.
• Adding text again to a photo already saved as JPG: every edit adds another round of compression. Upload the original photo again and save from scratch.
• Using a script font small: thin script strokes get lost in the photo below 4% size. Give them a slightly heavier outline than a sans font would need, or add a box.
• Expecting Bebas Neue to keep lowercase: whatever you type, it is drawn in capital shapes. If you need a mix of cases, choose another font.

What this tool cannot do

• In the saved image the photo and the text are merged into one set of pixels, so you cannot edit the text again later. A page reload also leaves nothing behind.
• There is no different color per letter, no text on a curve, no gradient and no undo.
• Vertical writing is a simple method: it stands letters in cells and moves or turns only some punctuation. It does not use the vertical-only glyph forms inside a font.
• The legibility check measures the pixels of the on-screen preview and does not count the shadow or the thickness of the letter strokes. Text that passes can still be hard to read at the actual screen size or for a reader with weaker eyesight.
• HEIC photos open only when the browser can read them. If one does not open, convert it to JPG and upload that.

As of 2026-10-20 the standards, documents and font licenses below were checked. The numbers in the tables are the same as this tool's calculations.

Sources

• 01W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)4.5:1 for text and images of text, 3:1 for large-scale text, contrast ratio (L1 + 0.05) ÷ (L2 + 0.05)
• 02WHATWG — HTML Living Standard, drawing text to the bitmapfillText and strokeText, alignment and baselines
• 03MDN — CanvasRenderingContext2D.strokeText()Drawing the outline of text
• 04MDN — HTMLCanvasElement.toBlob()Unsupported types fall back to PNG, quality applies to JPEG and WebP, null if the image cannot be created
• 05MDN — createImageBitmap()The imageOrientation option applies the photo's rotation information
• 06canvas-size — Test ResultsMobile Safari 9+ maximum canvas area 4,096 × 4,096 (16,777,216)
• 07SIL — OFL FAQUsing OFL fonts for logos, posters and other artwork; the artwork's license is not restricted
• 08Google Fonts — AntonLicense: OFL
• 09Google Fonts — Bebas NeueLicense: OFL
• 10Google Fonts — DM Serif DisplayLicense: OFL
• 11Google Fonts — LobsterLicense: OFL
• 12Google Fonts — PacificoLicense: OFL
• 13Google Fonts — KalamLicense: OFL

Frequently asked questions

Tools to use with it