What Size Should a Blog Cover Image Be?
Two sizes carry almost every cover - one to share, one for the hero.
Make your cover 1200×630 if it mostly travels as a link preview, and 1280×720 if it mostly lives as the hero at the top of the post. 1200×630 for the social card, 1280×720 for the in-article image - those two featured image dimensions cover almost everything a blog throws at you. That is the whole answer; the rest is why, and what to do when one file has to be both.
A cover does two different jobs, and they want two slightly different shapes. One render is the link card that gets pasted into Slack and posted to LinkedIn. The other is the big image readers see when they actually open the post. They are close but not identical, and picking the wrong shape for the wrong job is what leaves you with a cropped logo or a letterboxed band of gray.
1200×630: the size that travels
When someone shares your post, the platform does not load your hero. It reads the og:image you declared in the page head and renders that into a card. The size every platform optimizes for is 1200×630, an aspect ratio of 1.91:1. Facebook recommended it first; LinkedIn, Slack, Discord, and X’s large card all settled on the same shape.
This is the size with the strict rule, because you do not control the crop - the platform does. Get the ratio wrong and you get letterboxing or a trimmed edge. A few specifics worth knowing:
- Facebook recommends a 200×200 floor, and the Open Graph protocol sets no minimum at all. In practice, anything under about 600×315 renders as a small thumbnail instead of a full card.
- X reads your
og:imageand center-crops it to its own card, accepts up to 4096×4096, and rejects anything over 5MB - so keep the subject centered. - Keep your title and any faces inside the centered 1080×600 safe zone. Mobile clients shave the top and bottom, and that is exactly where edge text dies.
One file at 1200×630 satisfies all of them. If you make only one cover and never think about it again, make it this one.
1280×720: the in-article hero
The image at the top of your post answers to a different boss: your own layout. Most blog themes run a full-width content column and place the hero in a 16:9 slot, and the clean, even size for that is 1280×720. It scales without fractional pixels, and it is the same shape as a video thumbnail, so it reads as “primary image” to the eye.
You have far more freedom here than with the link card. Nobody else is cropping it. If your theme runs a taller hero, a 3:2 or 2:1 frame is fine; the only real rule is that it fills the slot edge to edge without the browser stretching it. 1280×720 is the safe default because it fits the most common case and never looks odd.
The two sizes, side by side
Here is the whole decision in one place:
| Job | Size | Ratio | Who decides the crop |
|---|---|---|---|
| Link / social preview | 1200×630 | 1.91:1 | the platform |
| In-article hero | 1280×720 | 16:9 | your theme |
Read it top-down: if the image’s main life is being shared, design at 1200×630 and let the hero scale. If it mostly sits inside the post, design at 1280×720 and supply a separate og:image for the preview. When you genuinely want one file for both, the 1200×630 card is the one to commit to - a 1.91:1 image dropped into a 16:9 hero loses a sliver top and bottom and still looks deliberate, while the reverse leaves gray bars on every link you share.
The detail almost everyone gets wrong: export at 2x
People pick the right size, export at exactly that size, and the cover still ships soft and a little smeared. Then they assume the size was wrong and bump it to 1920×1080, which does not fix it either.
It is almost always a retina problem, not a sizing one. High-DPI screens - every recent phone, most laptops - run a devicePixelRatio of 2 or more, which means two physical pixels for every CSS pixel. Hand that screen an image sized for exactly its slot and the browser stretches one source pixel across four, and the result is the soft, slightly-melted look you have seen on a hundred blogs.
The fix is one rule: export at 2x the slot the image fills. A hero that displays 1280 wide should leave the editor at 2560 wide. A 1200×630 card exports at 2400×1260. You design at the logical size and ship at double, and the browser scales it back down to something crisp. The dimensions in the table are display sizes; the file you upload should be twice as many pixels on each side.
Format: reach for WebP
Size is half the story. The other half is which format carries those pixels, and the answer is WebP first. Google’s own study puts WebP at 25-34% smaller than JPEG at the same visual quality, and 26% smaller than PNG for lossless images. That is a real cut to your page weight for no visible loss, and every browser that matters has supported it since 2020.
Keep PNG only when you truly need a transparent background or a screenshot with crisp UI text, and keep JPEG as the universal fallback. For a photographic cover with type over it, WebP at a quality around 80-86 lands a sharp 1200×630 card comfortably under 150 KB. That is small enough that the social scraper grabs it fast and your hero does not drag down your page-load score.
A quick checklist
- Make the link-preview cover 1200×630 at 1.91:1, and point
og:imageat it. - Make the in-article hero 1280×720 (16:9), or whatever shape your theme’s slot is.
- Keep the title and faces inside the centered 1080×600 safe zone so mobile cropping does not clip them.
- Export at 2x - a 1280-wide hero leaves at 2560 - so it stays sharp on retina screens.
- Save as WebP first, with PNG or JPEG only as a fallback.
- Keep the file under ~150 KB for the card, well under the 5MB platform ceiling.
None of this needs a calculator. Two sizes carry the work - 1200×630 to travel, 1280×720 to anchor the post - and the only trick is exporting at double so retina screens stay honest. If you want the why behind the picture inside those frames, what makes a good blog featured image covers the design, and if the words “cover,” “featured,” and “OG” still blur together, the difference between them sorts it out. And if your cover has to live on a platform with its own shape - Notion’s wide, responsive page banner is the common one - sizing a Notion cover handles that case.
I made the cover for this post in Lede at 1200×630, then exported it as a 2x WebP in one click. When you want to make your own cover step by step, open Lede - it has a preset for every size, a gallery of templates to start from, and the 2x export built in. Pick the size for the job, ship it at double, and it stays sharp wherever it lands.