X Header Size
1500 × 500 at 3:1 is the header size X asks for, but that canvas is the most deceptive on any social platform. The profile picture sits over the lower left, the app renders a narrower slice on phones, and the height shrinks as the window narrows — so a header that looks perfect on a desktop browser can lose both ends on a handset.
X Header size calculator
Pre-filled with 1500 × 500, the size X expects for a header.
- Fraction
- —
- Closest common ratio
- —
- Reduced by
- —
Custom Ratio — pick a preset or type your own
- New size
- —
- Total pixels
- —
- CSS
aspect-ratio: —;
The 3:1 ratio is locked in. Edit New Width and the header height recalculates instantly; edit the height and the width follows. Sizes round to whole pixels, because platforms do not accept fractional ones.
Recently used sizes
Saved in this browser only. Click a size to load it back into the calculator.
What size is an X header?
The header, still often called the banner, is 1500 px wide and 500 px tall. That reduces to 3:1, a shape two and a half times wider than it is tall relative to a square — very close to a cinema-style strip and far wider than the 16:9 of a video frame.
The maximum file size is 5 MB, which is generous enough that the cap rarely causes trouble. The real constraint is geometric: at 3:1 there is very little vertical room, so a stacked logo or two lines of strapline from a brand kit will not fit without being reduced to something unreadable.
Every X image placement and its size
The header and the in-stream image are not interchangeable. A header at 3:1 dropped into the timeline gets cropped to about 2:1, which usually takes the outer edges with it.
| Placement | Pixels | Ratio | Notes |
|---|---|---|---|
| Header / banner | 1500 × 500 | 3:1 | Profile picture overlaps the lower-left corner |
| In-stream image | 1200 × 675 | 16:9 | Timeline previews trim towards about 2:1 |
| Square image | 1200 × 1200 | 1:1 | Safest shape for the timeline on mobile |
| Profile picture | 400 × 400 | 1:1 | Uploaded square, displayed as a circle |
| Card image | 1200 × 628 | 1.91:1 | What a shared link renders as |
| Maximum header size | 5 MB | — | JPG, PNG or GIF; GIF animates in the header |
How to work out a 3:1 header from a photograph
A 3:1 strip is unusually demanding of source material. Knowing the required height before you start saves you from cropping a portrait photo into an unreadable sliver.
- Choose the width. 1500 px is the recommended size and is plenty; going wider does not add sharpness on any current display.
- Divide the width by 3 to get one unit: 1500 ÷ 3 = 500 px.
- The height is that unit once over, so the crop is 1500 × 500.
- Check the source: you need a 3:1 region with the subject inside its middle third, otherwise the avatar and the side crop will eat it.
- Shift the composition towards the centre 1200 × 400 band before exporting.
Worked example
A 3000 × 2000 photograph is 3:2 — far too tall for a header. One unit of the target is 3000 ÷ 3 = 1000 px, so the 3:1 crop of the full width is only 1000 px tall. You keep the middle 1000 px and discard 500 px from the top and 500 px from the bottom, which is why a header almost always needs a differently framed shot rather than a crop of the hero image.
Two things eat your header: the avatar and the crop
The profile picture is pinned to the lower-left corner of the header and overlaps it by roughly its own height. Anything you position there — a logo, an email address, a phone number — disappears behind the avatar circle.
The second problem is the viewport. On a narrow window or a phone the header is drawn shorter, and the app trims from the left and right rather than squashing the image. The visible width therefore changes with the device, and the ends of your canvas are the first casualties.
- Anchor important content to the centre-left, above the avatar's reach rather than beside it.
- Assume the outer 150 px on each side may be trimmed on a narrow screen and keep nothing essential there.
- Give a dark or busy header room to breathe: the avatar and the follow button both sit on top of it as solid shapes.
- Test by narrowing your browser window rather than by trusting the desktop preview, which shows the most generous crop you will ever see.
Header limits at a glance
Design against the crop, not against the canvas. If the header works with both ends removed, it will survive every device.
| Item | Value |
|---|---|
| Recommended size | 1500 × 500 px |
| Aspect ratio | 3:1 |
| Maximum file size | 5 MB |
| Accepted formats | JPG, PNG, GIF |
| Profile picture overlap | Lower left, about 120 px tall |
| Safe working band | Centre 1200 × 400 px |
X Header size FAQ
Why does my header look different on my phone?
Because X trims the ends of the canvas rather than scaling the whole strip down. A narrow viewport shows a narrower slice of the same 1500 px width, so anything close to the left or right edge falls outside the visible area.
Does the profile picture really cover the header?
It does. The avatar is drawn over the lower-left corner, roughly the height of the circle. Logos and straplines placed in that corner are hidden on every device, not only on mobile.
Should I use a GIF header?
GIF is accepted and does animate. Bear in mind that an animated header competes with the content below it and that a 3:1 animation loop is hard to read; most accounts get better results from a still image.
Is 1500 × 500 enough resolution for a retina screen?
Yes. X downscales to fit the viewport rather than upscaling, so 1500 px is already more than the widest header slot on a standard display. Uploading 3000 × 1000 only increases the file size.