Aspect-ratio systems for editorial imagery

Open any marketing site built without an image system and you'll meet the same quiet chaos: cards whose heights wobble as images load, a hero letterboxed against a square thumbnail by the social embed, a gallery where every photo is a slightly different rectangle for no reason anyone remembers. Nothing is broken. Everything is a bit off. Visitors can't name it, but they feel it — the way you feel a room where the furniture almost matches.

The fix is not better images. It's fewer shapes. An aspect-ratio system — a small, named set of proportions assigned to contexts, with rules for what each means — turns imagery from a recurring decision into an infrastructure decision, made once. This is how we build them.

Ratios are editorial, not geometric

An aspect ratio is a tone of voice. Choose them the way you'd choose typefaces: for what they say.

16:10 (1.6) — the workhorse. Cinematic without cinema's impractical height cost on mobile. Reads "we do professional work": hero images, case-study leads, anything meant to feel like a frame from a film about competent people.
4:5 (0.8) — the portrait column. Vertical without being phone-screen aggressive; it flatters detail shots, packaging, app screens and people. Reads "editorial": magazine covers are roughly here. This is the ratio that makes card grids feel designed rather than gridded.
1:1 — the index card. Square says "catalogue": products, avatars, logo walls, anything where the reader is comparing many items quickly and consistency matters more than drama.
21:9 or 2:1 — the banner. Used sparingly, almost exclusively for full-bleed interstitial breaks, because on phones a 2:1 image is a photo of a shoebox lid. If you ship it, it needs a mobile alternative ratio (more on that below).
3:2 (1.5) — the honest photo. The native ratio of most cameras; it says "documentary, unposed": behind-the-scenes, studio pages, process shots in case studies.

That's a complete system: five ratios, five jobs. Some studios need fewer (three is fine for sparse portfolios). Nobody needs eight. The failure mode we audit most often isn't ugly ratios; it's unintentional ones — a 1.91:1 card here because Facebook once liked it, a 4:3 there because the camera defaulted. Ratios accrete like legacy CSS unless someone names them and defends the list.

Assign ratios to contexts, not to images

The system works when the ratio attaches to the slot — hero, card, inline-figure, gallery tile — rather than to whichever image happens to fill it. In tokens:

:root {
  --ratio-hero: 16/10;
  --ratio-card: 4/5;
  --ratio-thumb: 1/1;
  --ratio-break: 2/1;
  --ratio-doc: 3/2;
}

Slots never improvise. A case-study card is 4:5 whether the source photo is a sweeping landscape or a tight crop; the art direction problem — what part of this image survives 4:5? — belongs to the CMS craft, not to the frontend. This separation of concerns is the entire game:

The layout system owns geometry. Every slot declares its ratio; the page skeleton is fully determined before a single pixel of image arrives.
The content team owns fit: cropping or re-shooting so subjects survive their slots.
The pipeline owns delivery: generating the renditions each slot needs at each breakpoint, in modern formats. We treat that as an engineering layer in its own right — this article is about the design contract that pipeline serves.

Declared ratios are also a performance feature

The CSS aspect-ratio property means a slot reserves its shape before the image downloads. No layout shift, no CLS, no content jumping as the page fills in — the layout is calm before the media arrives. (It pairs with explicit width/height attributes on <img> as a belt-and-braces for older engines and for the image's intrinsic-dimension hints.)

A skeleton or blur-up placeholder inside the reserved box is a nice garnish; the box itself is the meal. This is the same principle as skeleton screens that don't lie: the placeholder must promise the same geometry the content will deliver. A 1:1 shimmer that resolves into a 16:10 hero is a broken promise at 90 milliseconds.

object-fit: the discipline inside the box

With ratios fixed, object-fit becomes the load-bearing property:

cover fills the slot and crops the overflow — the default for photography. Its companion is object-position, which is a per-image, art-directed decision, not a default. A face near the top of frame needs object-position: 50% 20%, not the centre-crop assumption that decapitates someone on every narrow viewport.
contain shows the whole image with letterboxing — right for product shots on neutral backgrounds, screenshots with UI you can't crop, and diagrams. In a contain slot, the background behind the letterbox is a design decision: match the image's background or your page surface, never a third colour chosen by background: #eee amnesia.

The craft rule we enforce in content reviews: no critical content in the crop margin. If cropping away 20% on each side would remove a subject, a face, or UI chrome the reader needs to see, the image belongs in a contain slot or needs a re-shoot. This one rule, checked at upload, eliminates the entire genre of "portrait photo that becomes armpits on mobile."

Art direction: one ratio per breakpoint, not one ratio everywhere

A 16:10 hero on desktop, served as-is to a 375px phone, becomes a letterbox the size of a playing card. The mature version of a ratio system defines slot behaviour per breakpoint:

Hero: 16:10 desktop → 4:5 portrait on mobile (recomposed from a taller source crop).
Break/banner: 2:1 desktop → either dropped on mobile or replaced with 4:5; a 2:1 strip on a phone is decorative static.
Cards and thumbs: usually stable across breakpoints — consistency is their job.

This is what the <picture> element's media-based srcset was invented for: not just resolution switching, but shape switching — different crops with different ratios per viewport. Two source renditions per meaningful slot (wide and tall) is the working minimum; the art-directing images workflow describes how we brief and name those crops so they survive the CMS. Budget the editorial cost honestly: two crops per image means someone actually makes two crops per image. Ratios fail silently when the pipeline assumes the tall crop will derive itself from the wide one by centre-crop. Sometimes it will. Usually it will find the least flattering possible centre.

For most imagery, one discipline covers 90% of cases: shoot for the tightest crop. Photograph wide, but compose so the subject holds inside the 4:5 central zone. Then a single asset serves both slots legitimately, and the second "crop" is just object-position doing its job.

Ratios as layout rhythm

Here's where ratio systems pay back beyond images: because images share a small set of proportions, whole layouts gain rhythm. A grid of 4:5 cards, a 16:10 hero, 1:1 avatars — the page starts reading in a consistent metre, the way an editorial grid gives text its cadence. Mixed-ratio collages and breakout figures (flights of deliberate tension) then work because the baseline is regular: a 3:2 documentary shot breaking out of a column of 4:5 cards is an event. Without the system, it's just more noise.

A note on video: video slots get ratios from the same system, per context — 16:9 or 16:10 for hero loops, 1:1 for social-format embeds — and declared so the player doesn't shift layout when metadata loads. The ratio is a property of the slot, whatever medium eventually fills it.

Case notes from the field

On a recent retail rebuild (think the kind of headless storefront work we show in our case studies), the pre-redesign catalogue used four different card ratios inherited from four eras of the theme. Grid rows mis-aligned by 4–11px at every breakpoint; developers had shipped media queries to fix alignment symptoms rather than the ratio cause. We collapsed the catalogue to two ratios — 1:1 for the grid, 4:5 for featured slots — reshot nothing, and simply re-cropped the 12 hero SKUs with deliberate object-position. Layout shift on the category page dropped to zero, and the "redesign" the client kept complimenting was, measurably, eighty percent rectangle discipline.

A hospitality client presented the opposite problem: gorgeous documentaries photography, every image a different native ratio, art-directed by an agency that delivered flat JPGs with no crop guidance. The system we shipped gave them three slots (16:10 hero, 3:2 inline, 2:1 break) plus a one-page "crop constitution": faces never cropped below the chin, plate shots contain on a paper-toned background, break images recomposed for mobile or dropped. Their content team now self-serves imagery without a designer in the loop — which is the actual definition of a design system working.

Auditing an existing site

If you inherit a site with ratio chaos:

Inventory. Crawl the rendered DOM for <img> and video slots; record offsetWidth/offsetHeight at two breakpoints. You'll find 6–12 distinct ratios where you assumed 3.
Cluster. Group near-neighbours (1.77, 1.78, 1.6…) — most are drift, not intent.
Tokenise. Pick the smallest set that covers the real contexts; write the ratio tokens into the design system and the CMS's image fields together so editors see named slots ("Card — portrait 4:5"), not raw numbers.
Migrate by slot, not by page. Fix the card component once and fix five hundred cards; page-by-page fixes re-fragment within a quarter.

Key takeaways

Aspect ratios are editorial voice. Choose three to five, name them, and defend the list against drift.
Ratios attach to slots, not images; the layout owns geometry, content owns fit, the pipeline owns renditions.
Declared aspect-ratio reserves geometry before media loads — a calm layout is a performance feature.
object-fit: cover with art-directed object-position is the default; contain with a considered background serves uncroppable content. Rule of thumb: no critical content inside the crop margin.
Art direction switches shape per breakpoint with <picture>; the cheapest way to feed it is to shoot for the tightest crop.
Ratio consistency is layout rhythm — which is what makes deliberate breakouts read as design instead of accident.

FAQ

Isn't 16:9 more standard than 16:10?

16:9 is video's native ratio; if a slot hosts video, use it. For stills on the web, 16:10 buys back a little vertical space that reads better on short laptop viewports. Either is fine — the sin is having both by accident.

How do we handle user-generated content, where we don't control crops?

Constrain at the slot, with the discipline flipped: UGC tiles are almost always 1:1 or 4:5 cover with a safe-centre rule, and the product copies Instagram's learned wisdom — a square grid forgives almost any source. Reserve contain presentations for UGC you mustn't crop (reviews with screenshots), and design the letterbox background to look intentional.

Does a ratio system constrain photography art direction?

It liberates it, the way a type scale liberates composition: the photographer(or generator) composes for known frames instead of delivering an ambiguous infinity. Brief slots by name — "we need a hero and a card" — and you'll get better source material than "send some shots."

What about mixed-ratio masonry galleries?

Masonry is a legitimate choice for genuinely heterogeneous archives (a photographer's portfolio). Two cautions: it still needs per-item aspect-ratio reservation to avoid layout shift, and it doesn't belong beside reading flow — masonry's irregularity fights text rhythm. A grid with two alternating ratios gives most of the liveliness with none of the turbulence.

How many breakpoints really need distinct crops?

Two (wide, tall) covers nearly everything; three (adding a square mid-slot for tablet) is the ceiling before editorial cost outruns return. If analytics show your traffic is 85% phone, invert the default: compose for 4:5 and treat the wide crop as the derivative.