Twitter Header Size: 1500×500 & the Safe Area Explained

You found the perfect banner image, resized it in your editor, uploaded it to X — and the result is a mess. The sides are gone, your tagline is hidden behind the profile photo, and text that looked razor-sharp on your screen now looks like it was compressed in 2009. The infuriating part: you did exactly what some guide told you to do. The problem is the guides contradict each other — 1500×500, 1600×900, 2048×1024, even 1500×1500 — and a major design tool officially printed a wrong spec for a while. No wonder creators on Reddit treat header sizing like a lottery: every other thread is someone asking why their banner is blurry, cropped, or both.

This guide settles it. It is based on X's official help pages and hands-on testing of free tools, and it covers the three things most tutorials skip: the exact pixel spec, the avatar's overlap zone, and how to export without the mush. By the end you will know precisely what to hand to any tool — or skip the fight entirely and generate at the exact size from the start.

The official Twitter header size: 1500×500 at a 3:1 ratio

X's own Help Center is unambiguous on the profile and cover photo specs. The header you upload should be 1500×500 pixels, which works out to a 3:1 aspect ratio — three units wide for every one unit tall. That is the number every credible source converges on, and it is the target you should set in any editor, template, or generator before you touch a single pixel.

Two details in that table trip people up constantly.

First, the ratio. A lot of tutorials tell you to work at 16:9, because that is the ratio every video site made famous. But 16:9 is 1.78:1 — nearly twice as tall as the banner's 3:1. Build your header at 16:9 and X has to crop off a huge strip of your design just to fit it. Aspect ratio and pixel count are two separate things, and for this job the ratio matters more than the resolution: 1500×500 keeps the exact 3:1 shape, while a 3000×1000 file (same ratio, double size) will be downscaled cleanly and still fit.

Second, the file-size limit. The current spec allows up to 5 MB, but you will still find old articles quoting 2 MB — that limit was updated, and the stale number keeps circulating. If a tool refuses your 6 MB banner, that is the cap biting, not your image being wrong. Export under 5 MB and you are fine.

The 400×400 avatar and the safe area you must respect

Size alone is only half the story. X displays your profile photo — a 400×400 image, rendered as a circle — overlapping the bottom-left corner of your banner. It is not a watermark you can design around; it is a fixed part of the layout on every profile.

Here is what the overlap looks like in practice:

• Bottom-left quarter. The avatar sits at roughly the left 25% of the banner, vertically centered near the bottom edge. Anything important in that zone — your logo, your face, your handle — gets partially or fully covered.
• Center band. The area in the middle of the banner is the most reliably visible strip on desktop, where X shows the header at full width. Your tagline, product name, or announcement belongs here, safely above the bottom edge.
• Bottom-right. The Edit Profile button and stats live along the bottom on desktop; keep important elements out of the very bottom row and the very left block and you are visible on almost every screen size.

A quick way to visualize it: imagine your banner divided into four columns. Column one (left) is the avatar zone — keep it visually busy but not critical. Columns two and three are prime real estate — center them with your message. The top strip is safe everywhere; the bottom strip is not.

This is the single biggest reason well-designed banners "break" after upload: the designer placed the headline where the avatar now sits. The fix is not a cleverer image — it is a safe area for the content that must survive. X crops and rescales banners on different devices too: on mobile the header is shown much narrower, so the left and right thirds of your design can vanish entirely. Content that must always be read belongs in the center band, full stop.

Why X crops and compresses your upload

Understanding the mechanics kills most of the frustration. When you upload a header, X does not display your file pixel-for-pixel. It rescales the image to fit the current layout — wide on desktop, narrow on mobile — and it recompresses the result. Two consequences follow.

Cropping. Because the layout ratio changes per device, X has to cut or squeeze your image. Your carefully composed 3:1 design will be displayed closer to a very wide strip on large screens and a tallish card on small ones. Anything outside the center area is living on borrowed time.

Compression. The upload pipeline downscales large files and re-encodes them, which is exactly where "my header went blurry" comes from. You cannot see it in your editor — the compression happens server-side after upload. What you can do is make sure the source image is already at the display size, so X has nothing to shrink and the quality loss is minimal. Exporting at exactly 1500×500 is the practical way to do this: the platform does not need to do heavy math, and an exact-size export meaningfully reduces blur risk compared to a huge upscaled file being crushed down.

That is also why upscaling a small image to 3000 px "to be safe" backfires. You are not adding detail; you are creating a larger file that will be compressed harder on upload. Start at the right size and let the platform display it as-is.

How to export a header that does not look blurry

The export step decides everything, so here is the checklist that actually works:

1. Build at exactly 1500×500. Not "about that size," not a ratio you think is close — exactly 1500×500. If your tool can export at a custom size, this is the number.
2. Export as JPG or PNG. Both are accepted. JPG at quality 90 keeps most files well under the 5 MB cap; PNG is the choice for crisp logos and flat design. A GIF file type is accepted, but X does not animate it on the header — so there is no reason to use one.
3. Check your text at 50% zoom. Text is the first thing to look soft after compression. If the headline is barely legible at half size on your screen, it will be illegible after upload. This is the fastest blur detector that exists.
4. Keep the file under 5 MB. Compress once if you are over; a header that hits the limit gets rejected or re-encoded harder.

And if you would rather not babysit pixel settings at all: Vogoo's AI Twitter header generator builds the image at the exact 1500×500 spec for you, so the file that comes out is already the size X wants — no manual canvas math, no ratio guesswork.

Why so many guides get this wrong

This is the part worth being skeptical about. The "standard" answer to "what size is a Twitter header" has been mangled across the internet, and even trusted brands have shipped bad numbers:

• The 1500×1500 error. A well-known design platform's own help page printed 1500×1500 — a square — as the header size for a period. Square is exactly the shape X's layout does not want, and it remains one of the most-cited wrong answers on the web because the error got copied everywhere. The current X Help Center spec is 1500×500, and it has been for a long time.
• The 2 MB vs 5 MB confusion. Older articles still repeat a 2 MB limit that has since been raised. If your export is 3 MB and a guide says "too big," the guide is outdated.
• 16:9 everywhere. Because 16:9 is the default for video and most templates, guides paste it onto headers without checking. 16:9 and 3:1 are different shapes, and using the wrong one is the reason banners come out visibly cropped.

How do you tell who is right? Go to the source. X's Help Center page for profile and cover photos states the 1500×500 recommendation directly, and it is the one spec that has not changed in years. If a blog contradicts it, the blog is wrong — no matter how polished the site looks. The same logic applies to every platform you design for: official docs beat aggregated guides, always.

FAQ

What is the exact Twitter header size in pixels?

1500×500 pixels at a 3:1 ratio. This is the official recommendation in X's Help Center, and it is the size you should export, generate, or crop to before uploading.

What is the Twitter banner aspect ratio?

3:1 — three units wide for every one unit tall. It is not 16:9, which is a common misconception; 16:9 (1.78:1) is nearly twice as tall and forces X to crop your design.

Why does my Twitter header look blurry after uploading?

X recompresses every upload, and large files get downscaled hardest. Exporting at exactly 1500×500 removes most of that blur risk, because the platform does not have to rescale your image much.

Does Twitter crop my header image?

On some devices, yes — the header displays at different widths on desktop and mobile, and content outside the center band can be cut off. Keeping your important text and logos in the middle of the design, and out of the bottom-left avatar zone, is the reliable fix.

Can I use a GIF as my header?

A GIF file is accepted as a format, but X does not animate it on the banner — you get a static image either way. JPG or PNG is the safer export, and it keeps the file smaller too.

What happens if my header is over 5 MB?

The upload is rejected. Re-export with lower JPG quality or switch to JPG from PNG — 5 MB is generous, and a 1500×500 export rarely gets close to it.

The takeaway

The Twitter header size question has one correct answer — 1500×500 at 3:1, under 5 MB, with your essential content in the center band and out of the avatar's corner. Trust the official spec over viral guides, export at the exact size to dodge the blur, and you will never again upload a banner and watch it come apart.

Want to skip the settings entirely? Start with Vogoo's AI Twitter header generator — it outputs at the exact 1500×500 spec, and if you need help wording the prompt, our guide on writing AI picture generator prompts covers the formula in five slots. If you are still comparing tools before committing, the roundup of best free AI picture generators is a good place to look.

Sources

• X Help Center — Profile and cover photos — official spec for header size (1500×500, 3:1), file limits, and formats; the definitive reference for the numbers in this guide.
• Wikipedia — Aspect ratio (image) — explains how image aspect ratio is defined and how it relates to display dimensions.
• Wikipedia — 16:9 — background on the 16:9 standard, useful for understanding why 16:9 and 3:1 are different shapes.