Featured images

← Back to assignments

What this deliverable is

Featured images (also called OG images, hero images, or social previews) are the graphics that appear when a blog post or article link is shared on social media. They’re not decorative — they’re conversion tools. A good featured image dramatically increases how many people click through from a feed.

You’ll create two featured images for the final project, sized at 1200×630 pixels.

Why they matter

When someone shares a link on Twitter, LinkedIn, or Facebook, the platform pulls the featured image from the page’s metadata and displays it as a preview. This image is often the only visual element a reader sees before deciding whether to click.

Here’s the gap most content creators miss: the text and the featured image are doing the same job from different angles. The headline tells you what the piece is about. The image makes you want to read it.

A photo of a steaming latte says “coffee.” A close-up of a barista’s hands adjusting a grinder dial, with the text “We dial in every batch by hand” overlaid, says “we take this seriously.” One of those images makes you stop scrolling. The other doesn’t.

Technical requirements

• Dimensions: 1200×630 pixels (standard OG image size)
• Format: PNG or JPEG
• File size: Under 1MB — optimize before exporting
• Safe zone: Keep all important text and visual elements within a 1100×530 center area — edges get cropped by some platforms

Design principles for featured images

Text is optional — but when you use it, make it count

Some effective featured images are purely photographic. Others lead with a bold headline. Both approaches work. What doesn’t work is a small text block in one corner of a complex photo.

If you include text:

• Use it as the primary visual element, not an afterthought
• Limit to 6–10 words maximum — this is a thumbnail, not a paragraph
• Make sure text contrast is high enough to read on a phone screen (check at 25% size)

One clear focal point

The viewer has about half a second before they scroll past. Give them one thing to look at. Complicated compositions with multiple subjects, busy backgrounds, and competing colors lose the scroll battle.

Test: cover the image with your hand, uncover it quickly, and ask “what did I see first?” If the answer is “I’m not sure,” simplify.

Think at thumbnail size

Your image will often appear at roughly 250–300px wide in a feed. Design for that size, not for the full 1200×630 canvas. Open your image at 25% zoom and check that it still reads.

Common problems that only show up at thumbnail size:

• Small text becomes unreadable
• Faces become unrecognizable
• Busy patterns turn into visual noise

Match the tone of the piece

A featured image is a promise about what’s inside. If the article is technical and precise, the image should feel precise. If the piece is warm and community-oriented, the image should match that register.

Example — Grounds for Change:

For an article titled “Why we changed our milk program”:

• Strong approach: a clean, close-up shot of oat milk being poured, with the article title in the brand font
• Weaker approach: a generic coffeehouse vibe shot with a bunch of people laughing

The first image matches the promise of the headline. The second creates a mismatch — the reader expects a cozy lifestyle piece and gets an explanation of sourcing decisions.

Example: two featured images for the same campaign

Image 1 — For the call-out piece (“Your local coffee shop is invisible”)

Visual concept: A phone screen showing a generic latte photo with zero engagement — using a mockup template. Bold text overlaid: “The last post was 7 weeks ago. Just the latte.” Dark, slightly sardonic tone. High contrast. No warmup.

Why it works: It instantly communicates the problem the article addresses. The reader who sees this in a feed thinks “wait, is that us?” — and clicks.

Image 2 — For an educational piece (“How we source our beans”)

Visual concept: A close-up, warm-toned photograph of dried coffee cherries in a wooden crate. The only text: “Ethiopia → Montclair” in the brand’s display font, small, in one corner. Clean, confident.

Why it works: It trusts the image to do most of the work. The destination line adds just enough curiosity to pull a click from the right reader.

Tools

• Canva — has 1200×630 templates, easy to use
• Figma — more control, better for precise layouts
• Adobe Express — good middle ground
• Unsplash / Pexels — free stock photos if you don’t have originals (credit them)

Common mistakes

• Using the same design template for both images. Each piece of content has a different tone and audience. The featured images should reflect that.
• Ignoring the title/description relationship. The image shouldn’t repeat the title — it should extend or complement it.
• Designing only at full size. Always check at 25–30% zoom before exporting.
• Font choices that don’t match the style guide. Your featured images are part of your brand’s visual system — use the fonts and colors you defined in your style guide.