Wrong image dimensions mean cropped code, blurry text, and wasted engagement. This cheat sheet lists the sizes that matter when you share code screenshots, browser mockups, and dev content in 2026.

Quick Reference Table

| Platform | Feed post | Profile | Cover / header | Stories | | --- | --- | --- | --- | --- | | X (Twitter) | 1200×675 (16:9) | 400×400 | 1500×500 | — | | LinkedIn | 1200×627 | 400×400 | 1584×396 | — | | Instagram | 1080×1080 (square) | 320×320 | — | 1080×1920 | | Threads | 1080×1080 | 320×320 | — | — | | GitHub README | ~820 px wide (auto) | — | 1280×650 (social preview) | — | | Product Hunt | 1270×760 (gallery) | 240×240 (logo) | — | — |

X (Twitter)

| Type | Size | Aspect ratio | | --- | --- | --- | | In-stream image | 1200×675 px | 16:9 | | Square post | 1200×1200 px | 1:1 | | Header | 1500×500 px | 3:1 |

Code screenshot tips:

Landscape 16:9 avoids feed cropping.
Export at 2× — X compresses uploads.
Test in dark mode; many devs use it.
Up to 4 images per post in a grid layout.

Full X workflow →

| Type | Size | Aspect ratio | | --- | --- | --- | | Feed image | 1200×627 px | ~1.91:1 | | Carousel slide | 1080×1080 px | 1:1 | | Cover photo | 1584×396 px | 4:1 |

Code screenshot tips:

Light themes (GitHub Light) work well on LinkedIn's bright feed.
Add a headline overlay — learning posts perform best with context in the image.
Carousels work for step-by-step tutorials (export square slides).

Full LinkedIn workflow →

Instagram

| Type | Size | Aspect ratio | | --- | --- | --- | | Square feed | 1080×1080 px | 1:1 | | Portrait feed | 1080×1350 px | 4:5 | | Stories / Reels | 1080×1920 px | 9:16 |

Code screenshot tips:

Keep snippets 5–10 lines — Instagram scroll is faster than X.
Square format is native; design short snippets that produce roughly square exports.
Consistent theme + background = recognizable dev-education brand.

Full Instagram workflow →

GitHub

| Type | Size | Notes | | --- | --- | --- | | README display width | ~820 px | Auto-scaled by GitHub | | Social preview (OG) | 1280×650 px | Repo settings → Social preview | | Badge | Variable | Use shields.io |

Export code screenshots at 2× (~1600 px wide) so they stay sharp when GitHub scales down.

Full README workflow →

Product Hunt

| Type | Size | Notes | | --- | --- | --- | | Gallery image | 1270×760 px | Up to 8 images | | Thumbnail (image 1) | ~240×180 px | Squint-test every hero | | Logo | 240×240 px | Square |

Full Product Hunt workflow →

Universal Export Rules

These apply regardless of platform:

Export at 2× minimum — platforms compress; start sharp.
Keep snippets short — 8–15 lines for landscape, 5–10 for square.
Font size 16–18 px at base export scale.
High-contrast themes — Dracula, Tokyo Night, One Dark for dark feeds; GitHub Light for bright feeds.
Alt text everywhere — accessibility and SEO.
Test at thumbnail size before posting.

One Tool, Every Size

KromaStudio exports at 1×, 2×, 3×, and 4× resolution from a single workspace:

Code screenshots for X, LinkedIn, and README
Browser mockups for Product Hunt and landing pages
Content post cards with platform-sized templates
Animated .webm loops for Reels and launch threads

Pick your platform, export at the right scale, and post.