Text baked into images cannot scale with page text

What it is

A poster-style banner that paints its slogan into the bitmap will not grow that line, no matter how the page type size is raised. Only real text nodes follow the user’s text zoom. Text in images is therefore a separate magnification failure: surrounding paragraphs have grown, while titles, button labels and data callouts on the image stay at their original pixels — or, under page zoom, become a larger smear of the same bitmap.

This is not “the image needs alternative text.” Alternative text answers what to read when the image cannot be seen. This answers whether, when the image can be seen but the type is too small or too soft, those glyphs can grow with the body.

Why it happens

A bitmap bakes glyph shapes into a pixel grid. Text-only resize changes font metrics; the grid does not move, so in-image type does not respond at all. Page zoom enlarges the grid, but it enlarges samples, not outlines: small type at 200% or 400% becomes a soft colour patch, and the stroke resolution needed to read it does not return. SVG <text> can stay sharp under a viewport transform; once the glyphs are outlined or exported to PNG, they fall back to a bitmap.

In-image type is often used for titles, promotions, infographic labels, button chrome — exactly the words a low-vision user is trying to read first while magnifying. Body copy has already grown in relative units; visual hierarchy then breaks on the image: an 18 px paragraph nearby becomes large, while a 14 px slogan in the banner remains a thin strip of the original file.

Studying it

Inventory every image that contains type (raster, outlined vector, canvas-drawn labels). Under text-only resize and under page zoom, observe whether those glyphs grow and whether they stay sharp.

Independent variables: type as a text node, as SVG text, or baked into pixels; zoom kind and factor. Dependent variables: size ratio of in-image type to body copy, recognisability after blur, whether users abandon the image and hunt for a duplicate elsewhere.

Code “the image has type” separately from “the type carries information.” A decorative watermark failing is cheap; the only price or the only deadline painted into a bitmap is information loss. Compare an HTML text version of the same content and see which side remains readable after magnification.

Where it stops holding

Shop signs caught in a photograph, UI type inside a screenshot, cannot and should not reflow with this page’s font size; their channel is a long description or nearby prose, not treating the photo as live type. Lettering inside a logo usually lives as a graphic object; sharpness depends on a vector asset, and it is not required to become a reflowable paragraph. Map and diagram labels that grow without bound with page type will collide; they need their own label layer, not a naive conversion to HTML. Mail and some content platforms strip web fonts, so authors paint type into images to keep a brand — that is a publishing constraint, not evidence that the user-side type already scales.

Applying it

• Set titles, button labels, prices, deadlines and key infographic callouts in real text (HTML or SVG text). Do not bake those words into a PNG.
• When a bitmap is unavoidable, repeat the critical sentence in visible text beside the image, so magnification users read the sentence, not the softened pixels.
• Where the look must stay on the image, prefer SVG text or a large enough source, and check under text-only resize that in-image type is completely still.
• How to check: raise the browser default font to about 200% and compare body copy with every typed image. In-image type that does not move, or that smears past recognition under page zoom, with no nearby duplicate of the sentence, is an in-image-type fail.

Related

• Same group: J2.11.1 Browser zoom and text-only resize are different magnification paths and must be tested separately · J2.11.2 High magnification requires content to reflow into a single column rather than relying on horizontal scrolling · J2.11.3 After zoom, interactive elements must not be squeezed into accidental activation
• Nearby: J2.02 Text Resize · J2.04 Alternative Text · J2.12 Long Descriptions for Complex Graphics
• Search terms: text in images · image text scaling · rasterized type