Aspect Ratio Guide for Twitter / X

Design strategy

Multi-photo post design rule:

Single-image post  -> 16:9 (1200 x 675px)
Multi-photo post   -> 1:1 (1080 x 1080px) for every image

Mixing ratio warning:
  Do not mix 16:9, 1:1, and 9:16 inside the same post.
  X applies the layout crop to the whole image set.
  A 16:9 image inside a multi-photo post can lose important top and bottom content.

Header safe-zone system

Header Safe Zone System:

Full canvas:              1500 x 500px (3:1)
Desktop display:          1500 x 500px, full canvas
Mobile display:           About 600 x 200px, center-cropped

Profile Photo overlap:    Bottom-left corner, about 140 x 140px circle
                          Avoid placing key content here.

Recommended content zone: x=200 to x=1300, y=50 to y=450
                          1100 x 400px centered, shifted away
                          from the bottom-left profile overlap.

Background:               Can extend to the full 1500 x 500px canvas

Content-first decision logic

What are you publishing?

Image post:
  Single image:
    Landscape / product / chart:
      Use 16:9 (1200 x 675px)
      Feed displays the full preview.

    Square product / portrait:
      Use 1:1 (1080 x 1080px)
      Keep key content near the vertical center.

    Vertical immersive image:
      Use 9:16 (1080 x 1920px)
      Feed preview is heavily cropped; click-to-open must be the goal.

  Multi-photo post:
    Use 1:1 (1080 x 1080px) for every image.
    Keep key content in the center of each image.
    Do not mix ratios inside one post.

Video post:
  Desktop-first: 16:9 (1920 x 1080px)
  Mobile-first:  1:1 (1080 x 1080px)
  Vertical full-screen: 9:16 (1080 x 1920px)

Paid ad:
  Brand awareness: 1:1 Promoted Image
  Link clicks:     Website Card, 1200 x 628px
  Video ad:        16:9 or 1:1, based on device
  Multi-product:   Carousel, 1:1 cards

X layout CSS

/* X Single Image Post - 16:9 (recommended) */
.x-post-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  background: #000;
  border-radius: 16px;
}

/* X Multi-Image Post - 1:1 */
.x-post-image-multi {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 1080px;
  overflow: hidden;
  border-radius: 8px;
}

/* X 2-image grid layout */
.x-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 100%;
  max-width: 600px;
}

/* X 3-image grid layout */
.x-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 100%;
  max-width: 600px;
}

.x-grid-3 .x-grid-item:first-child {
  grid-row: 1 / 3;
}

/* X 4-image grid layout */
.x-grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 100%;
  max-width: 600px;
}

/* X Video Post */
.x-post-video {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1920px;
  overflow: hidden;
  background: #000;
  border-radius: 16px;
}

/* X Video Post - Square */
.x-post-video-square {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 1080px;
  overflow: hidden;
  background: #000;
  border-radius: 16px;
}

/* X Header - 3:1 */
.x-header {
  aspect-ratio: 3 / 1;
  width: 100%;
  max-width: 1500px;
  overflow: hidden;
  position: relative;
}

/* X Header - Both-device safe zone */
.x-header-safe-zone {
  position: absolute;
  top: 50px;
  left: 200px;
  right: 200px;
  bottom: 50px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* X Website Card - 1.91:1 */
.x-website-card {
  aspect-ratio: 1.91 / 1;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}