ilovejpg includes a JPG text editor online that places a text overlay on a photo directly in your browser: you type the words, choose a font size, a colour and bold weight, drag the text into position on the preview, and download the result. Nothing is uploaded, because the drawing and the encoding happen on your own device through the HTML5 Canvas. That makes it a practical tool for captions, product labels, event notices, simple memes and annotated screenshots, but it also raises questions that a good editor should answer honestly before you start.
The most common misunderstanding concerns text that is already in the picture. A JPG contains no letters, only a grid of coloured pixels, so words that were photographed or previously saved into an image cannot be selected and retyped. They can only be covered or redrawn. This guide explains that distinction, sets out the typographic choices that decide whether text on an image is legible, shows how JPEG compression treats sharp lettering, and explains when PNG is the better export format for text-heavy graphics.
Overlays versus editing text that is already in the pixels
There are two quite different jobs hidden behind the phrase text editing on images. The first is adding new text on top of a picture: a caption on a holiday photograph, a price on a product shot, a label pointing at part of a diagram. This is an overlay, and it is exactly what a browser-based editor does well. The second is changing words that already appear in the image, such as correcting a misspelt word on a photographed sign or altering a figure in a screenshot of a table. That is a much harder problem, and no honest tool can promise to do it by simply letting you click on the letters and type.
The reason is structural. A JPEG file, as defined by ITU-T Recommendation T.81 in 1992 and published as ISO/IEC 10918-1 in 1994, stores an image as compressed blocks of colour information. It has no concept of characters, fonts or text boxes. Once words have been rendered into the pixels and saved, they are simply shapes of light and dark, indistinguishable in kind from the edge of a building or the pattern on a shirt. A text layer that you could reopen and edit exists only inside the project files of layered design software, never inside an exported JPG.
What you can realistically do with existing text
- Cover it. Place a new overlay over the old words, ideally on a plain area or in a colour that hides the original. This works when the background behind the old text is simple.
- Redraw it in a raster editor. Desktop and advanced online image editors offer clone, healing or content-aware fill tools that rebuild the background where old text sat, after which new text can be added. ilovejpg does not include these tools.
- Recover the words as text. Optical character recognition (OCR) software reads letter shapes and produces editable text, which you can then retype elsewhere. ilovejpg does not perform OCR.
- Start again from the source. If you made the graphic yourself, the original design file or document is always the cleanest place to change wording before exporting a fresh image.
Keep an untouched copy of every photograph before adding text. Once the overlay is merged into a JPG, removing it later means repairing pixels rather than deleting a layer.
How the text overlay works in the browser
In ilovejpg you open a JPG, PNG, WebP, GIF or BMP file, and the editor draws it onto a canvas element in the page. When you enable the text overlay you type your words, set the font size, pick a colour and decide whether the text should be bold. The text appears on the live preview, and you drag it to the position you want. When you download, the browser renders the photograph and the text together into a single new image and encodes it in the format you selected: JPG, PNG or WebP.
Because this happens locally, the photograph never leaves your device, which matters for images containing people, documents or private locations. Re-encoding through the canvas also discards EXIF metadata, the block of camera information that can include the date, the device model and GPS coordinates. If you are adding a caption to a photo that will be posted publicly, that removal is a useful side effect, since many people do not realise their phone has stamped the location into the file.
Set the final size before you place the text
Text size only makes sense relative to the final dimensions of the image. A 40-pixel caption looks generous on a 1,000-pixel-wide picture and tiny on a 4,000-pixel original straight from a phone camera. If you intend to resize, do it before positioning the text, so that what you see on the preview corresponds to what the reader will see. Resizing after text has been rasterised also resamples the letters themselves, which softens their edges.
Typography for images: size, weight and legibility
Text on a photograph competes with everything else in the frame, so it needs more help than text on a plain page. Three factors matter most: how large the letters are relative to the image, how thick their strokes are, and how strongly they contrast with what lies behind them. Font size is the factor people most often get wrong, usually by choosing something that looks fine on a large monitor and becomes unreadable as a thumbnail on a phone.
A useful way to think about size is as a proportion of image height rather than as an absolute number of pixels. For a headline that must be read at a glance, letters whose height is somewhere around a fifteenth to a tenth of the image height are generally comfortable. Secondary information such as a date, a credit or a small label can be smaller, but if it falls much below a fortieth of the image height it is likely to vanish when the picture is displayed in a feed or a messaging app preview. These are working guidelines rather than rules, and the only reliable test is to view the exported file at the size your audience will see it.
| Image height | Headline text size | Secondary text size |
|---|---|---|
| 600 px | about 40–60 px | at least 16–18 px |
| 1,080 px | about 70–110 px | at least 28–32 px |
| 1,600 px | about 110–160 px | at least 40–45 px |
| 2,400 px | about 160–240 px | at least 60–65 px |
When to use bold
Bold weight thickens each stroke, which helps in two ways. It increases the area of each letter that contrasts with the background, and it gives the letters more resistance to JPEG compression and downscaling, both of which erode thin lines first. Bold is therefore the sensible default for short headlines, prices and warnings. For longer captions of a sentence or more, regular weight can be easier to read, provided the background is calm and the contrast is strong.
- Keep overlays short. A phrase of a few words is read instantly; a paragraph on a photograph is usually skipped.
- Use one size for the main message and, at most, one smaller size for supporting detail.
- Avoid placing text across strong edges such as a horizon line or the boundary between a face and the sky; the change in background makes letters appear to flicker.
- Check the preview at a reduced zoom level to simulate a thumbnail before downloading.
Contrast and colour choice
Legibility depends far more on luminance contrast, the difference in lightness between text and background, than on hue. Yellow text on a white wall is nearly invisible even though yellow and white look different in a colour picker, while dark blue on pale grey reads perfectly. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio based on relative luminance and recommend at least 4.5:1 for normal text and 3:1 for large text. Those figures were written for text on web pages, but they are a sensible benchmark for text on images too.
Photographs complicate matters because the background is rarely a single colour. A white caption may sit perfectly against a dark tree on the left of the frame and disappear against a bright cloud on the right. The practical answer is to find a region of the photo with relatively even lightness, such as sky, a wall, a road surface or an out-of-focus background, and place the text there. Then choose white or a very light colour if that region is dark, and black or a very dark colour if it is light.
Colour pitfalls specific to JPEG
JPEG encoders usually convert RGB pixels into the YCbCr colour space, separating brightness (Y) from two colour-difference channels. Most then apply chroma subsampling, commonly in the 4:2:0 pattern, which stores colour at half the horizontal and half the vertical resolution of brightness. The eye is far less sensitive to fine colour detail than to fine brightness detail, so photographs survive this well. Saturated coloured text does not. Thin red letters on a blue background, for example, have edges defined mostly by colour rather than brightness, and after subsampling those edges smear into a muddy fringe.
- Prefer text whose colour differs from the background in lightness, not only in hue.
- Avoid pure red text on dark or saturated backgrounds when exporting as JPG.
- Avoid relying on a red and green contrast to carry meaning, since red–green colour vision deficiency is the most common form of colour blindness.
- If you must use saturated colour, make the text larger and bold, or export as PNG.
A quick legibility test is to switch the preview to grayscale. If the text is still clearly readable without colour, its luminance contrast is sufficient; if it fades, choose a lighter or darker colour.
Placing text: safe margins and composition
Where text sits in the frame determines whether it survives the journey to the viewer. Many platforms crop images automatically for previews, thumbnails, profile frames or story formats, and those crops nearly always remove the edges first. Text placed tight against a border is the first casualty. A safe working margin is to keep important words inside the central area of the image, leaving roughly a twentieth to a tenth of the width and height clear on every side.
Composition matters as well. Text placed over a person's face, or over the product you are trying to sell, works against the photograph. Look for negative space: the empty sky above a landscape, the plain table beside a dish, the blurred background behind a portrait. Aligning the text to an edge of that space, rather than floating it in the middle, usually looks more deliberate. Because the ilovejpg overlay is positioned by dragging on the preview, you can try several placements in seconds before committing to one.
Captions, labels, memes and notices
Each use has its own conventions. Captions usually sit along the lower edge, inside the safe margin, in a modest size. Labels on product or diagram images should be close to the thing they identify, short, and consistent in size across a set of images. Memes traditionally use large bold text at the top and bottom of the frame; the familiar look includes a dark outline around white letters, which ilovejpg does not draw, so choose a background area that is dark enough for plain white bold text to stand out. Notices such as opening hours or a change of venue should put the single most important fact in the largest text and keep everything else secondary.
One caution applies to memes and to any image you did not create. Adding text does not change who owns the photograph, so reuse of other people's pictures is subject to copyright and to the rules of the platform you are posting on. Your own photographs, or images licensed for reuse, avoid that question entirely.
Exporting without degrading the text
The way JPEG compresses an image explains why text sometimes looks fuzzy after saving. The encoder divides each channel into 8×8 pixel blocks and transforms every block with the discrete cosine transform (DCT), which expresses the block as a combination of smooth and increasingly fine patterns. Quantisation then divides those coefficients by values from a table and rounds them, and the fine, high-frequency patterns are rounded most heavily. Finally the results are entropy-coded, usually with Huffman coding. Photographs contain mostly gradual changes, so little visible information is lost. Text is the opposite: crisp edges between solid colours are made of exactly the high-frequency detail that quantisation discards.
The visible result is ringing, sometimes called mosquito noise, a speckled halo around letters, together with faint block boundaries in flat areas near the text. The lower the quality setting, the stronger the effect. For a photograph with a short caption, a JPG quality somewhere between 85 and 92 usually keeps letters clean while still producing a reasonable file size. For graphics that consist mostly of text, flat colour and sharp lines, PNG is the better choice: it compresses losslessly using DEFLATE, so every edge is preserved exactly.
| Image type | Recommended format | Why |
|---|---|---|
| Photograph with a short caption | JPG at quality 85–92 | Small file; photo detail dominates and the caption survives well at high quality |
| Poster, notice or infographic with flat colours | PNG | Lossless; no ringing around letters, and flat areas compress efficiently |
| Screenshot with annotations | PNG | Interface text and thin lines stay pixel-sharp |
| Photo with text for a site that accepts WebP | WebP at high quality | Usually smaller than an equivalent JPG with similar visual quality |
| Image that must fit a strict upload limit | JPG with a target size in KB | The editor searches for the highest quality that fits the limit |
ilovejpg shows a live estimate of the output file size as you change format and quality, so you can see the cost of each choice before downloading. If a website or form imposes a maximum size, the optional target size in KB finds the highest JPG or WebP quality that stays under it. When that target forces a very low quality, consider reducing the pixel dimensions instead, then enlarging the text proportionally; text at moderate quality on a smaller image usually looks better than text at very low quality on a large one.
Never add text to a JPG, save it, reopen it and save it again at a lower quality. Each lossy save compresses the already damaged edges again. Work from the original each time and export once.
Accessibility for text in images
Text that exists only inside a picture is invisible to screen readers, to search engines reading the page and to anyone viewing the image on a slow connection that fails to load it. WCAG addresses this directly: its success criterion on images of text advises using real text rather than images of text where possible, and its criterion on non-text content requires a text alternative for every meaningful image. A caption on a photograph is perfectly reasonable, but the information it carries should also be available in plain text wherever the image is published.
- Write alt text that includes the words in the overlay when they convey meaning, for example the date and time on an event notice.
- Repeat critical information such as prices, deadlines or addresses in the body of the post or page, not only inside the image.
- Maintain strong luminance contrast, which helps readers with low vision as well as everyone viewing on a phone in sunlight.
- Avoid conveying meaning by colour alone; a red label meaning closed and a green label meaning open should also say closed and open.
- Keep line length short and avoid all-capital text for anything longer than a few words, since capitals are slower to read.
These measures cost very little, and they also tend to make images clearer for every viewer. An overlay that is short, high in contrast and backed up by real text on the page is easier to understand at a glance than an image crowded with small lettering.
A dependable workflow for adding text to a JPG
Putting the preceding advice together gives a routine that works for most images. It keeps the original safe, makes size decisions at the right moment and leaves compression until the very end, which is where it does the least harm.
- Keep the original file untouched and work on a copy.
- Open the image in the editor and rotate or flip it if the orientation is wrong.
- Resize to the final dimensions you need, with the aspect-ratio lock on.
- Make any brightness, contrast or saturation adjustments, because they affect how the text will contrast with the photo.
- Add the text, choose size and bold weight, and pick a colour by checking lightness against the area behind it.
- Drag the text into a calm area inside the safe margin.
- Choose the output format: JPG at high quality for photographs, PNG for text-heavy graphics.
- Check the live size estimate, download, and view the result at the size your audience will see.
Because every adjustment happens in the browser and only the final render is encoded, the text is compressed exactly once. That single encoding is the main reason a carefully exported overlay looks sharper than one that has passed through several apps, each of which saved its own lossy copy.
Frequently Asked Questions
Can I change words that are already printed in my JPG?
Not by retyping them. A JPG stores pixels, not characters, so existing words are just shapes in the image. You can cover them with a new overlay on a plain area, rebuild the background with the clone or healing tools found in fuller raster editors, or extract the wording with OCR software. ilovejpg adds new text overlays but does not perform OCR or repair existing lettering.
Why does my text look blurry or speckled after saving as JPG?
JPEG compression works on 8×8 pixel blocks and discards fine, high-frequency detail during quantisation. Sharp letter edges are exactly that kind of detail, so low quality settings produce ringing halos around text. Raise the quality to roughly 85–92, make thin text bold, avoid saving the same file repeatedly, or export text-heavy graphics as PNG, which is lossless and keeps every edge intact.
Which text colour is easiest to read on a photo?
The colour that differs most in lightness from the area behind it. White or near-white works on dark regions and black or very dark colours on light regions. Hue matters much less than luminance. A useful check is to view the image in grayscale: if the text remains clearly readable without colour, the contrast is good. Avoid saturated red text on dark or busy backgrounds when saving as JPG.
Should I add text before or after resizing the image?
After. Resize to the final dimensions first so that the font size you choose matches what viewers will actually see. If you add text and then shrink the picture, the letters are resampled along with everything else, which thins their strokes and softens their edges. Setting the final size first also lets you judge safe margins accurately before placing the overlay.
Is my photo uploaded when I add text to it?
No. The ilovejpg editor draws the image and the overlay with the HTML5 Canvas inside your browser and encodes the result on your own device, so the file is never sent to a server. Re-encoding through the canvas also strips EXIF metadata, including any GPS coordinates recorded by a phone camera, which is helpful when the captioned photo is going to be shared publicly.
When should I use PNG instead of JPG for an image with text?
Use PNG when text, flat colour and sharp lines make up most of the image, as in posters, notices, infographics and annotated screenshots. PNG compresses losslessly, so letters stay crisp and flat areas often compress very efficiently. Use JPG at a high quality setting when the image is mainly a photograph with a short caption, because JPG produces much smaller files for continuous-tone photographic detail.
Conclusion
Adding text to a JPG online is straightforward once the limits are clear. An overlay is new text drawn on top of a photograph; it is not a way of retyping words that are already part of the pixels, which can only be covered, repaired in a fuller raster editor or recovered with OCR. Within that scope, the quality of the result depends on decisions that have nothing to do with software: a size proportional to the final image, bold weight for short messages, strong lightness contrast, and placement in a calm area well inside the edges.
The export is where good typography is most easily spoiled. JPEG's block-based compression and chroma subsampling are kind to photographs and unkind to sharp letters, so keep quality high for captioned photos, choose PNG for graphics dominated by text, and encode only once from an untouched original. Back the image up with real text and alt text wherever it is published, and the words on your picture will be readable, accessible and as sharp as the moment you placed them.