-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsizes.html
More file actions
151 lines (145 loc) · 8.17 KB
/
Copy pathsizes.html
File metadata and controls
151 lines (145 loc) · 8.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0a0a0c">
<title>Social & App Screenshot Sizes (2026) — X, OG, App Store & more | Moonshot</title>
<meta name="description" content="A clean reference of image and screenshot sizes for 2026: X/Twitter posts, OG link previews, Product Hunt, Instagram, Stories, YouTube thumbnails and App Store screenshots. One click opens a matching, ready-to-export canvas.">
<link rel="canonical" href="https://ameeramer.github.io/sizes.html">
<meta property="og:title" content="Social & App Screenshot Sizes (2026 reference)">
<meta property="og:description" content="Every common social and app image size, with a one-click editor for each.">
<meta property="og:url" content="https://ameeramer.github.io/sizes.html">
<meta property="og:image" content="https://ameeramer.github.io/og.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='%23f5b841'/><circle cx='66' cy='42' r='34' fill='%230a0a0c'/></svg>">
<link rel="apple-touch-icon" href="/logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Schibsted+Grotesk:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/landing.css">
<style>
.sz-wrap { max-width: 860px; margin: 0 auto; padding: 40px 24px 90px; position: relative; z-index: 1; }
.sz-head { text-align: center; margin-bottom: 48px; }
.sz-head h1 { font-family: var(--font-disp); font-weight: 400; font-size: clamp(34px, 6vw, 56px); margin: 0 0 14px; line-height: 1.08; }
.sz-head h1 em { font-style: italic; color: var(--gold); }
.sz-head p { color: var(--ink-dim); max-width: 560px; margin: 0 auto; }
.sz-table { border: 1px solid var(--seam); border-radius: 14px; overflow: hidden;
background: linear-gradient(165deg, #131218, #0e0d12); }
.sz-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; align-items: center;
gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--seam-soft); }
.sz-row:last-child { border-bottom: 0; }
.sz-head-row { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-faint); }
.sz-plat { font-weight: 600; color: var(--ink); }
.sz-dim { font-family: var(--font-mono); font-size: 13px; color: var(--gold); }
.sz-use { color: var(--ink-dim); font-size: 13.5px; }
.sz-open { font-size: 13px; font-weight: 600; color: var(--gold); text-decoration: none; white-space: nowrap; }
.sz-open:hover { text-decoration: underline; }
.sz-cta { text-align: center; margin-top: 34px; }
.sz-note { text-align: center; color: var(--ink-faint); font-size: 12.5px; margin-top: 18px; }
@media (max-width: 640px) {
.sz-row { grid-template-columns: 1fr auto; row-gap: 4px; }
.sz-use { display: none; }
.sz-head-row { display: none; }
}
</style>
</head>
<body>
<div class="stars" aria-hidden="true"></div>
<header class="nav">
<a class="brand" href="./">
<svg class="brand-moon" viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="50" r="42" fill="#f5b841"/><circle cx="66" cy="42" r="34" fill="#0a0a0c"/></svg>
<span class="brand-name">Moonshot</span>
</a>
<nav class="nav-links">
<a href="./#features">Features</a>
<a href="./#pricing">Pricing</a>
<a class="btn small primary" href="app/">Open the studio</a>
</nav>
</header>
<main class="sz-wrap">
<div class="sz-head">
<h1>Social & app<br><em>screenshot sizes</em></h1>
<p>The image dimensions that actually matter in 2026 — and a one-click canvas
for each. Pick a size, drop in a screenshot, export. Free, in your browser.</p>
</div>
<div class="sz-table">
<div class="sz-row sz-head-row">
<span>Platform</span><span>Size (px)</span><span>Best for</span><span></span>
</div>
<div class="sz-row">
<span class="sz-plat">X / Twitter post</span><span class="sz-dim">1600 × 900</span>
<span class="sz-use">In-feed images (16:9)</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyeC1wb3N0JTIyJTdEJTdE">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">OG / link preview</span><span class="sz-dim">1200 × 630</span>
<span class="sz-use">og:image on any site</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyb2clMjIlN0QlN0Q=">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">Product Hunt</span><span class="sz-dim">1270 × 760</span>
<span class="sz-use">Gallery images</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIycGglMjIlN0QlN0Q=">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">Instagram square</span><span class="sz-dim">1080 × 1080</span>
<span class="sz-use">Feed post (1:1)</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyaWctc3F1YXJlJTIyJTdEJTdE">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">Instagram portrait</span><span class="sz-dim">1080 × 1350</span>
<span class="sz-use">Feed post (4:5)</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyaWctcG9zdCUyMiU3RCU3RA==">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">Story / Reel / Short</span><span class="sz-dim">1080 × 1920</span>
<span class="sz-use">Full-screen vertical (9:16)</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyc3RvcnklMjIlN0QlN0Q=">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">Dribbble shot</span><span class="sz-dim">1600 × 1200</span>
<span class="sz-use">Portfolio (4:3)</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyZHJpYmJibGUlMjIlN0QlN0Q=">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">YouTube thumbnail</span><span class="sz-dim">1280 × 720</span>
<span class="sz-use">Video thumbnail (16:9)</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyeXQlMjIlN0QlN0Q=">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">GitHub social preview</span><span class="sz-dim">1280 × 640</span>
<span class="sz-use">Repo social card (2:1)</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyZ2gtc29jaWFsJTIyJTdEJTdE">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">LinkedIn post</span><span class="sz-dim">1200 × 627</span>
<span class="sz-use">Shared link image</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIybGlua2VkaW4lMjIlN0QlN0Q=">Open →</a>
</div>
<div class="sz-row">
<span class="sz-plat">App Store 6.7″</span><span class="sz-dim">1290 × 2796</span>
<span class="sz-use">iPhone screenshots</span>
<a class="sz-open" href="app/#look=JTdCJTIyY2FudmFzJTIyJTNBJTdCJTIycHJlc2V0JTIyJTNBJTIyYXBwc3RvcmUlMjIlN0QlN0Q=">Open →</a>
</div>
</div>
<p class="sz-note">Sizes are the current recommended dimensions for each platform.
Moonshot also supports any custom size up to 4096 px.</p>
<div class="sz-cta">
<a class="btn big primary" href="app/">Open Moonshot Studio</a>
</div>
</main>
<footer class="footer">
<div class="footer-left">
<svg class="brand-moon" viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="50" r="42" fill="#f5b841"/><circle cx="66" cy="42" r="34" fill="#0a0a0c"/></svg>
<span>Moonshot · Beautiful screenshots, locally.</span>
</div>
<div class="footer-right">
<a href="app/">Studio</a>
<a href="./#pricing">Pricing</a>
<a href="changelog.html">Changelog</a>
</div>
</footer>
</body>
</html>