Designing a preview image that works small

Design at 1200 × 630 and evaluate at 350 pixels wide, because that’s roughly how a card renders in a phone feed. Text needs to be far larger than feels right, contrast needs to be higher than feels tasteful, and nothing important goes near an edge.

Almost every bad preview image is a good image viewed at the wrong size — and the wrong size is the size you designed it at.

The size mismatch

You design in a window where the image is 1200 pixels wide or larger. Real people see it in a feed on a phone, at maybe 350. That’s under a third, and it means a 24-pixel caption renders at around 7 pixels — not small, illegible.

The fix is a habit: after designing, look at the image at about 30% and make the decisions from there. Everything below follows from that one act.

Rule 1: text much larger than feels right

A working threshold: any text that must be read should be at least 1/15th of the image height. On a 630-pixel-tall canvas that’s about 42 pixels — which at design size looks oversized, and at card size is merely readable.

That constraint also disciplines the copy. At that size you fit three or four words, which is the right amount anyway. The card already has a real title and description as text; the image doesn’t need to duplicate them.

Anything below about 1/25th of the height should be treated as decoration. It won’t be read, so it shouldn’t carry meaning.

Rule 2: high contrast

Light grey on white, white on a pale photo, thin type on a busy background — all fine at full size, all gone at card size. Downscaling reduces effective contrast, and cards render against both light and dark app backgrounds.

Practical version: dark text on a light solid, or light text on a dark solid. If you must use a photograph behind text, put a solid or heavily darkened panel behind the words rather than trusting the image to stay dark where the text sits.

Rule 3: a real margin

Keep everything meaningful at least 5% away from every edge — about 60 pixels horizontally, 30 vertically.

Why: platforms crop slightly differently, some round the card’s corners, and some overlay a small badge or label. Content at the edge is content you’re gambling with. A margin costs nothing; you have more room than you need anyway once the text is only four words.

Rule 4: legible without the words

Someone scrolling gets a fraction of a second before deciding whether to read the title. What lands in that moment is the image’s overall shape: colour, one strong element, maybe a logo.

So give it a recognisable silhouette at a glance. A consistent background colour across your site’s previews does this well — people learn to recognise your links before reading them, which is worth more than any individual clever image.

What actually goes on it

For most pages, in order of usefulness:

The page’s subject, in three or four words. Not the full title — the subject.

Your logo or wordmark, small, in a consistent corner. This is the branding job, and it doesn’t need to be large.

One consistent background treatment. Solid colour, subtle gradient, or a restrained pattern. Consistency is the point.

Nothing else. No decorative fields of small text, no dense illustration, no stock photograph of people at a laptop.

What to leave off: URLs (the card shows the domain), dates (they age badly and are unreadable anyway), long quotes, and screenshots of interfaces — a screenshot at card size is a grey rectangle.

Templates beat bespoke

Unless previews are your product, a template is the right answer: fixed background, fixed logo position, one text slot for the subject.

Advantages beyond speed. Every card is consistent, so your links are recognisable. Nothing is ever illegible, because the type size is baked in. And a new page’s image is a copy-and-edit rather than a design task, which means pages actually get one.

Two or three template variants — by content type, say — is plenty of variety.

A quick evaluation

Before shipping an image:

1. View it at about 30%. Can you read the text without leaning in?
2. View it on a dark background and a light one.
3. Crop 5% off each edge. Did you lose anything?
4. Squint until it blurs. Is there still a recognisable shape?
5. Look at it beside another of your previews. Do they look related?

Five checks, a minute, and they catch the failures that only appear at the size real people see.