Altrove

Chapter 20

Images in editorial design

An image sometimes carries information and sometimes is only breath, and almost all the work is in not confusing the two: where the photo says something you annotate it and open it, where it just lets the page breathe you leave it silent.

11 min read

The last chapters worked on text and the rhythm of the page; this one stops on the thing that, in editorial design, takes up more room than anything and gets talked about least as an interaction: the image. The starting question is just one, and it cuts through the rest: when is an image information and when is it breath? They look like the same object — a rectangle with something inside — but they ask for opposite treatments. A diagram, a document-photo, a detail to be read: there the image says something, and it should be annotated, enlarged, captioned. A chapter opener, a backdrop, a pause between two blocks of text: there the image doesn’t say, it lets you take a breath, and every label we stick on it is noise.

Confusing the two is the most common editorial mistake. You see breath treated as information — mandatory captions under every decoration, alt-text describing a texture — and information treated as breath — the photo that should have been read left mute, with no handle. The difference isn’t in the image: it’s in the promise we make it keep. The five demos below are five ways of keeping that promise: where to put the voice, how to give focus to a single photo, how to enlarge one without making the eye change page, how to hide the story without really hiding it, and how to annotate a specific detail.

And as always, no image files: every “photo” here is a gradient or a small SVG with the aspect-ratio fixed. It keeps the discussion on behaviour — the frame, the caption, the motion — and off the subject. The pattern is identical with real images: just swap the source.

Where to put the voice

The first decision about an information-image isn’t which filter to give it: it’s where to put the caption. The same photo changes meaning depending on whether the voice sits below, beside or over it — and each of the three positions promises something different.

20.a
Abstract view of hills at sunset, in warm tones.
Hills at dusk, study no.4 — the raking light tells more than the subject. Altrove Archive

Positioned caption · below, beside, overlay

Three positions, three relationships. Below, the caption is a distinct note: the image stays intact, the voice is clearly separate, the classic editorial case for a document-photo. Beside, it becomes a margin that talks as an equal — good when the note is as long as the image is important. Overlay, the voice merges with the scene, and is the riskiest: you have to guarantee contrast over any pixel beneath, because a bright sky eats white text. That’s why it isn’t just the text colour, there’s the gradient scrim: the contrast is designed, not hoped for.

The structure underneath never changes: it’s always a <figure> with a real <figcaption>, whatever the position. That’s the difference between a caption and writing-over-the-image: the first is semantically tied to the figure, a screen reader reads it as its own, it survives copy-paste; the second is orphan text propped up there. Moving the voice is a matter of layout, not markup — and the honest markup stays the same, constant, under all three guises.

Giving focus to a single one

A gallery isn’t a neutral grid. When you look at one photo, the others should step aside — not vanish, but dim, because they remain context. It’s the photographer’s gesture of focusing: the subject becomes sharp, the background blurs. A gallery that keeps all thumbnails at the same intensity leaves you with nowhere to rest the eye.

20.b
Gallery · use the arrows to focus

Gallery with focus mode · one sharp, the others dimmed

The focused thumbnail enlarges, recovers saturation and takes a marked border; the neighbours dim but don’t disappear — they stay there, legible, as peripheral context. The honest point is that focus isn’t declared by colour alone: there’s the size, the border, and a word — “in focus” — plus aria-current that a screen reader announces. Someone who can’t tell the saturation apart still reads where the attention is. Three channels for the same signal, never just one.

And the keyboard is first-class, not an afterthought: the arrows move the focus, a roving tabindex keeps exactly one element tabbable at a time, so the gallery is a single stop in Tab, not five. The dimming of the neighbours uses opacity and filter, never display:none: they stay in the flow, stay clickable, stay read. Under prefers-reduced-motion the enlargement doesn’t travel — the focus is simply already there. Same final state, no slide.

Enlarging without changing page

When a detail needs a close look you need a lightbox. But an honest lightbox doesn’t make a box appear from nowhere: it takes the same image you touched and makes it grow until it fills the screen. The continuity is the care — the eye follows the object, it doesn’t “change page”.

20.c
Abstract seascape: low horizon, wide sky in lavender tones.
Seascape, 7pm — ninety per cent is sky. The empty space is the subject.

Esc to close · focus returns to the button

Lightbox with morph · the thumbnail becomes the window

On click, the thumbnail isn’t replaced by a modal: it becomes the large image. We do it with the View Transitions API — the same view-transition-name on the thumbnail and on the full-screen image, and the browser interpolates the morph between the two positions. The box it lands in is a native <dialog>, which hands over the focus trap and Esc to close for free. On closing, the morph runs backwards: the window becomes a thumbnail again, the eye walks it back to where it was.

The morph is a progressive enhancement, not a requirement: where the API is missing, or under reduced motion, the dialog opens anyway — only without the growth, with a measured fade (entrance ~280ms, a faster exit, because things leave more quickly than they enter). Same final state, with or without the journey. And above it all is the detail that’s always forgotten: on closing, the focus returns to the button that opened the lightbox, it isn’t lost at the top of the document. Opening something is half the work; putting attention back when you close is the other half.

Hiding the story without hiding it

Sometimes the caption is a story, not a note: the why behind the shot, nice to discover on hover rather than read up front. Revealing the voice on hover is elegant — the image breathes on its own and speaks only when you look for it. But it’s also the most frequent accessibility trap: a hover-only caption is mute to the keyboard, to the screen reader, to touch.

20.d
Abstract portrait: a figure seen from behind facing a warm window.
Backlight, interior The figure faces away on purpose — anonymity leaves room for the viewer to step into their shoes.

Caption that reveals · on hover and on focus, never hover-only

The distinction that saves everything is between “hidden from the eyes” and “hidden from accessibility”. Here the caption is hidden visually — opacity and transform, never display:none or visibility:hidden — so it stays in the DOM and the screen reader always reads it, hover or not. It reappears in three ways, not one: on mouse-over, on :focus-within (you enter the figure with the keyboard and the story shows), and with an explicit button that opens it and keeps it open — the only way that truly works on touch, where hover doesn’t exist.

That button isn’t redundancy: it’s the accessible way, with hover and focus as extra conveniences for those who can use them. It carries aria-expanded saying whether the story is open, and the label switches between “show” and “hide” so the state is legible even without seeing the animation. The rule, identical to the rest of the playground: a graceful effect can’t take information away from anyone. If the story lives only in hover, for half the people it simply doesn’t exist.

Annotating a detail

The last case is the information-image taken to its pointed extreme: not a caption for the whole photo, but a note here, on this precise detail. Hot-spots are the honest way to do it — small points on the image that, when touched, open a localized explanation.

20.e
Annotated image · clickable points
Abstract still life: a jug, a fruit and a cloth on a warm table.
Open a point for the note · Esc closes

Annotated hot-spots · points that open a note, by keyboard

Each point is a real <button>, numbered and labelled, not a <div> with a hover tooltip. The difference is all in what survives: the button is reachable with Tab, activates with Enter or Space, works on the first tap on mobile, and announces its own name to the screen reader. The tooltip-on-div dies in all three cases. The note that opens is a small popover anchored to the point, and aria-expanded says whether it’s open or closed: the state information isn’t entrusted to the animation alone.

One point open at a time — attention is dosed, you don’t open a chorus of overlapping notes. It closes by clicking outside or with Esc, and Esc returns the focus to the point you had opened, it doesn’t throw it away. The points are positioned in percentages over the image, so they stay where they belong at any size, and the number inside the dot is in tabular-nums because a pointed label must never flinch. It’s the image that, instead of one voice for the whole scene, offers many small ones — each anchored to what it explains.

Five ways, one single question beneath: does this image say or does it let you breathe? If it says, we give it handles — a well-placed caption, a focus that lifts it from the others, an enlargement that doesn’t disorient, a pointed note where it’s needed. If it lets you breathe, we leave it in peace: no mandatory labels, no annotations on a texture. The whole editorial craft of the image is in not swapping the two cases — in not making what should stay silent speak, and in not silencing what had something to say. And when we do make it speak, we give it a voice reachable by everyone: the caption the screen reader reads, the point the keyboard opens, the focus that comes home.

With this, Phase C closes — the one on editorial design and the breath of the page. The next chapter changes register again: from the image you look at to the object you grab. Drag and drop — how you hold a thing in your hand while you move it, and how you tell the user, while it’s still in flight, where they’ll be able to set it down.