How to Make a Blog Featured Image That Works Everywhere
Last month I lined up eight of our blog covers side by side and shrank them to 15% — roughly the size a link preview gets in a LinkedIn feed or a WhatsApp chat bubble. Three were completely unreadable. One had collapsed into a navy rectangle with a smudge in the middle. And none of the eight looked like they'd come from the same blog.
That's the blog featured image problem in one screenshot. The cover isn't wallpaper for the top of your post. It's the thing that gets shrunk, cropped, and re-cropped into six different feeds before anyone reads a single word you wrote — and most of the time, it's shown at about a fifth of the size you designed it at.
So the job isn't "make a nice 1200×630 graphic." The job is: make a 1200×630 graphic that still says something at 200px, and that looks related to the other forty covers on your blog.
The two ways a blog featured image fails
It dies at preview size. You design at full resolution, zoomed to fit your screen, and the 32px subtitle looks fine. Then Slack renders the card at 360px wide and that subtitle is 9px tall. Gone. Same for thin fonts, low-contrast text on a photo, and any logo smaller than about a tenth of the frame.
It has no family resemblance. Every post gets its own stock photo — a laptop, a coffee cup, a person pointing at a whiteboard. Individually fine. As a set, it reads like forty unrelated blogs. Nobody scrolling your archive gets the "oh, this is them" flash that a consistent cover system gives you for free.
The fix for both is the same, and it's slightly boring: stop designing covers, and design one cover frame you reuse.
The frame: three things stay fixed, two things change
Here's the system. Every cover gets exactly four elements, and only two of them change between posts.
Fixed — the kicker. Two to four uppercase words, top-left, in your brand color. It's a category label: TUTORIAL, PRODUCT NOTES, CASE STUDY. Small, but it's what makes covers scan as a series. Same position, same size, same color, every time.
Variable — the title block. One to three lines, big and heavy. This is the only thing carrying meaning at preview size, so it gets the whole budget. Minimum 60px on a 1200×630 canvas — that survives down to ~10px in a small preview, which is the floor for legibility. If your title needs four lines at 60px, your cover title isn't your post title. Shorten it. "Blog Featured Images That Don't Die at 200px" is not the headline of this post, and that's fine.
Variable — the motif. A small shape composition on the right that hints at the subject: three connected boxes for a process post, four rising bars for a data post, a stack of offset cards for a design post. Not an illustration. Not a stock photo. Four or five rectangles in two shades of your brand color. It takes ninety seconds and it's the difference between a title card and a cover.
Fixed — the domain. Bottom-left, small, muted grey. yoursite.com. When someone screenshots your cover into a group chat, that's the only attribution that travels with it.
Then the frame rules that make it hold together across dozens of posts:
- Text lives in the left 55%. The motif gets the right. Nothing crosses the middle. This also means a center-crop into a square (which some platforms do) never chops a word in half.
- One background family. Rotate between three or four dark tones from the same neighborhood — we use
#0b1f3a,#0a1830,#10243f,#0d1b2a. Enough variation that consecutive posts don't look identical, close enough that the archive page looks designed. - The last title line is the accent color. One line, always the last one. It's a tiny move that gives every cover the same visual signature.
- Two fonts, maximum. A heavy geometric sans for the title, a neutral one for the kicker and domain. If you haven't picked a pair yet, these five combinations all work.
The worked example: the cover on this post
Look at the top of this page. Here's exactly what's in it.
Kicker: RIDVAY · STUDIO, Inter Bold, 28px, brand blue #2960ea, at x=80 y=90. Title: three lines of Poppins ExtraBold at 62px — "Blog Featured" / "Images That Don't" / "Die at 200px" — the first two white, the third #7aa2f7. Domain: ridvay.com, Inter, 30px, #9fb3d1, bottom-left. Motif: three rounded rectangles, 210×268 each, offset 42px right and 22px up from each other, in #16335c → #3f6fe6 → #2960ea. Background #0a1830.
Total: seven elements. The next post on this blog will use the same seven, with a different title, a different motif, and one of the other three background tones. That's the whole system.
And the reason the title is "Blog Featured Images That Don't Die at 200px" rather than the actual post title is the 60px floor. The real title is 54 characters — at 62px it'd need five lines and land at about 38px. Unreadable in a preview. The cover gets a shorter, punchier version of the same idea. Nobody has ever complained that a cover didn't match a headline word-for-word.
Building one in Ridvay Studio
Studio is built for exactly this: you describe the frame once, get back an editable design, and then reuse it. Paste this:
A 1200×630 blog cover on a solid dark navy background. Top left: a small uppercase kicker in blue reading "TUTORIAL". Below it, a three-line headline in a heavy geometric sans — white for the first two lines, light blue for the last. Bottom left: "yoursite.com" in small muted grey. On the right side, a stack of three offset rounded rectangles in two shades of blue. No gradients, lots of empty space.
What comes back is a real design, not a flat image: the kicker, each headline line, the domain, and every rectangle are separate layers you can click and change. That matters here more than usual, because you're going to open this thing forty more times.
Then make these edits, which map straight onto the rules above:
- Click the headline and drag the size up until it breaks to a fourth line, then back off one step. That's your maximum. Whatever number you land on is the size you use forever — write it down.
- Select the last headline line only and set it to your accent color. One line, not the whole block. This is the signature.
- Drag the motif group right until the text block ends around x=740. Now you have the left-55% rule enforced by the layout, not by willpower.
- Swap the background to the next tone in your set before duplicating for the following post — that's the one thing you change per post besides the words.
Save it, and every future cover starts from that design instead of from an empty canvas. If you've already set up a brand kit, your palette and fonts drop in automatically, so the frame inherits your colors rather than you re-typing hex codes each time.
Build your cover frame in Studio →
Check it the only way that counts
Before you publish, shrink the cover to 200px wide and look at it. Not zoomed to fit — actually small, on your phone if you can. If you can't read the title, the cover has failed at the only size most people will ever see it.
The second check: put it next to your last three covers. If a stranger couldn't tell they belong to the same blog, tighten the frame — usually it's the kicker moving position or the title size drifting.
One more thing worth knowing: some chat apps quietly drop link previews for images over roughly 600KB. WhatsApp is the notorious one. A flat-color cover with shapes and text exports tiny, which is a real advantage over photographic covers — but if you do use a photo, export as JPEG rather than PNG and check the file size.
Where this leaves you
A blog featured image isn't a creative exercise per post. It's a template you build once and fill in a hundred times, and the constraint that shapes the whole thing is that it will mostly be seen at a size where only one element survives. Give that element — the title — everything, and let the kicker, the motif, and the domain do the quiet work of making the set look like a set.
If you want the same treatment for the video side of your content, the rules are genuinely different — a YouTube thumbnail competes in a grid against twenty others and wants a face and three words, not a title card. Different medium, different frame.
Start with the frame, though. It's the one design decision on your blog that pays out every single time you publish.