Where the 3:1 aspect ratio is used
3:1 is three times as wide as it is tall. It suits thin header banners that leave room for content below, including the X profile header.
- X (Twitter) headers: The 1500 × 500 px profile header.
- Website hero banners: Wide panoramic strips in page layouts.
- Email headers: Slim branded strips at the top of newsletters.
- Panoramic prints: Traditional 3:1 panorama formats.
3:1 resolution cheat sheet
| Name | Width × height | Typical use |
|---|---|---|
| Email header | 900 × 300 px | Light website and email banners |
| X (Twitter) header | 1500 × 500 px | Recommended X profile header size |
| High resolution | 3000 × 1000 px | Sharp panoramic assets |
| Print source | 6000 × 2000 px | Large panoramic prints |
Tip: Keep important text in the middle of a 3:1 header: the edges crop on phones and the profile photo covers part of the lower left.
How to calculate 3:1 dimensions
Height = width × 1 ÷ 3. Width = height × 3 ÷ 1. Round to whole pixels; many video encoders also need even numbers.
CSS for a 3:1 box
.media { aspect-ratio: 3 / 1; width: 100%; }