Twitter Header Dimensions, Actually
The current official size for a Twitter header image is 1500 by 500 pixels. That's the canvas you should design on. But the actual rendered size varies depending on whether someone is viewing your profile on desktop or mobile. On desktop, Twitter crops the image to show more width and less height, which means the top and bottom get cut off. On mobile, it's the opposite — the header appears taller and narrower, so content near the edges gets trimmed. I spent months dealing with this before I realized the safe zone is roughly a 1500 by 500 area with critical elements sitting in that middle band between y=150 and y=350. Anything outside that range risks getting clipped on at least one platform. I ran into this problem last year when I was redesigning a client's Twitter profile. They had a perfectly composed header with their logo dead center and some tagline text running along the bottom third. On desktop it looked fine. On mobile, the logo got cropped out entirely because Twitter's mobile crop sits the header higher on the image than the desktop version does. I ended up having to create two separate header images — one optimized for each viewport — and then manually switch between them depending on which device the client wanted to prioritize. It took me about twenty minutes to set up, but it saved us from looking unprofessional on at least one screen. The file type matters too. Twitter supports PNG and JPEG. Use PNG if you need transparency or sharp edges like logos and text. Use JPEG if the image is mostly photographs with gradients. Twitter's compression is aggressive on JPEGs, so you'll notice the quality drop if you upload something with subtle color transitions. I've seen people upload 4K headers and still get compressed down to something that looks muddy on high-DPI displays. Keep your file under 5MB if you can, though Twitter will scale anything larger down to fit.
Here's the part nobody mentions: the actual display size isn't fixed at 1500 by 500. Twitter's CDN serves different resolutions based on the viewer's device pixel ratio. A Retina display might pull a 2x version, while a standard screen gets the base 1500 by 500. This means you should design at 1500 by 500 and export at 2x (3000 by 1000) if you want crisp text on high-DPI screens. The file size doubles, but the visual difference is noticeable on modern phones. One more thing that trips people up. The profile picture overlaps the header on desktop. It sits in the lower-left corner and covers about 164 by 164 pixels of the header area. So don't put anything important — logos, text, faces — in that bottom-left zone. I've seen too many headers where the key message is sitting right under the profile photo, completely invisible to anyone on desktop. Put your critical content in the upper-right or center-right area instead. That's the safest real estate across all viewports. If you're using Canva or Figma, set your canvas to exactly 1500 by 500 pixels. Add a few guide lines at y=150 and y=350 to mark the safe zone. Export as PNG for graphics-heavy headers, JPEG for photos. Upload, then immediately check how it looks on both desktop and mobile by opening your profile in an incognito window on your phone and your computer. Don't skip the mobile check. That's where most people get caught.
