How to Size and Place Photos in a Text-and-Image Article
For a readable article, size each photo according to the job it does: give an image that carries key evidence or context enough room to be seen, and keep a supporting image smaller when the surrounding text already explains the point. Place it beside the passage it clarifies, preserve a clear reading order, and check the layout at narrow widths. This guide focuses on arranging photos in a digital article; the same purpose-first choices can inform a print layout, but screen behavior needs its own check.
Start with the photo’s job
Before moving or resizing a photo, decide what a reader should get from it. Is it evidence they need to inspect, an example that makes a passage easier to picture, or decoration? That distinction is more useful than starting with a preset image width.
If the photo carries information the text does not, give it enough space for the relevant detail to be legible. A small image of a document, object, or process may fail at its main task if the reader cannot examine it. If the photo simply illustrates a point already explained in the text, a smaller size may be enough—or the image may not be needed. This is a practical design rule inferred from the photo’s purpose, not a universal size standard. The GOV.UK Design System’s image guidance similarly says images should meet a real user need and serve as visual aids, while required information should remain available in writing. Its recommendations are written for government online services, so treat them as a useful reference rather than a rulebook for every kind of article.
A helpful decision aid is to assign each photo one of three roles: inspect, illustrate, or ornament. “Inspect” usually calls for a larger display and an explanation or caption that directs attention to the relevant detail. “Illustrate” can often sit at a moderate size near the paragraph it supports. “Ornament” has no informational job; consider omitting it or keeping it visually quiet. These categories are a practical editing tool, not terminology prescribed by the sources.
Choose a size by importance and available space
Use the article’s text column as your starting boundary. A photo that spans the column is easy to notice and gives detailed content more room; reserve that treatment for images whose importance justifies the visual pause. A smaller, column-aligned photo can support a nearby point without competing with the heading or text. Avoid choosing a size only because the original file is large: the displayed dimensions should suit the layout and the information readers need to see.
Here is an illustrative decision, not a tested template: suppose a 700-pixel-wide content column contains a photo showing a two-part object whose difference is central to the passage. A display close to the full column width may make comparison easier. If the same photo is only a general scene setter and the paragraph contains the explanation, a narrower display may preserve emphasis for the text. The 700-pixel figure is simply an example of a column width; it is not a recommended standard.
When a photo appears beside text on a wide screen, treat the two as a paired unit. Give the image enough width to show its subject and the text enough room to remain comfortable to read. If either becomes cramped, stack them instead of shrinking the photo and squeezing the copy into a narrow strip. On smaller screens, a single-column sequence is often the clearest arrangement: text, then its related photo, then the next passage. The W3C’s explanation of WCAG 2.2 Reflow describes how many article pages can adapt to a single column and explains the goal of avoiding two-direction scrolling for ordinary reading content. It also notes exceptions for content whose meaning or use requires a two-dimensional layout. The point for an article layout is to make sure an image-text pairing does not force readers to pan sideways to follow the text.
Place each photo where its connection is clear
Put the photo near the sentence or paragraph that explains why it is there. If readers must scroll past several unrelated paragraphs to find the image, its connection may be unclear. Likewise, a large photo inserted in the middle of a sentence’s argument can interrupt the logic. A clean placement is usually after the first passage that introduces the subject, or directly before a step where the image is needed.
Use a caption when it adds something specific: identify the subject, point out a detail, or explain why the image matters. Do not use a caption to repeat the surrounding sentence word for word. If the photo needs close inspection, say what to look at in nearby text as well as in the caption; readers should not have to infer the point from placement alone.
The relationship between a photo and its text also matters for nonvisual reading. W3C’s Images Tutorial says that informative images need text alternatives conveying their essential information, while decorative images can use an empty alternative so assistive technology can skip them. W3C’s informative-image guidance emphasizes that the alternative should express the image’s meaning in context, not merely list visible objects. As a practical check, ask: if someone could not see this photo, what information would they miss? Put essential information in the article text, and provide an appropriate text alternative for the image. If the image adds nothing beyond adjacent text, repeating its description may be unnecessary.
Preserve the photo’s useful shape
A photo’s aspect ratio—the relationship between its width and height—affects the space it occupies and what remains visible. Start by fitting the whole photo inside the chosen area. Crop only when the subject remains clear and the crop does not remove details a reader needs. A landscape crop may suit a wide lead image; a portrait image may work better at a smaller width within the column. These are compositional choices, not fixed prescriptions.
If a crop removes context, changes the apparent meaning, or hides a detail discussed in the article, use a different crop or display the original proportions. For diagrams, labels, or documents, inspect the final display size: text embedded in a photo may become too small to read. The GOV.UK image guidance generally advises against putting text in images because it can be difficult to read, copy, resize, or access with a screen reader; when text is essential to the image, provide the meaning in nearby written content too.
Check the layout at the size readers use
Preview the article at a wide desktop width and a narrow mobile width. Check that the photo does not overflow the text column, cover content, or leave the text squeezed beside it. Follow the reading sequence from heading to paragraph to photo: when the layout stacks, the image should still appear near the passage it explains. Also check captions and any important details in the image at the actual displayed size.
For web pages, displayed size and file size are separate decisions. A large source file may be needed for a large display, but sending unnecessarily large image files to smaller screens can waste data. Google’s web.dev guide to responsive images explains how browsers can select among image sizes for different display conditions, and notes that there is no single correct number of image versions. This is implementation guidance for web publishing; it does not determine where the image belongs in the article.
A quick decision sequence
Name the job. Is the photo meant to be inspected, to illustrate the text, or only to decorate the page?
Find its anchor. Identify the passage that introduces or depends on it, then place the photo beside that passage.
Set the display width. Give key evidence enough room; let a supporting photo take less space if detail is not essential.
Check the crop. Keep the subject and all relevant context visible.
Read the layout aloud in sequence. On a narrow screen, confirm that text and photo still appear in a sensible order and that the text remains readable.
Describe the information. Add a caption when it helps, and provide a text alternative based on the image’s role.
The practical rule is simple: let importance determine prominence, let the related text determine placement, and let the narrow-screen preview reveal whether the arrangement still works. If the photo is hard to understand at the size you chose, enlarge it, simplify the crop, or explain the relevant detail in the text.