X 图片尺寸：数字，以及为什么你的头图还是被裁了
X 图片尺寸：数字，以及为什么你的头图还是被裁了
尺寸很好找，而且照样容易做错 —— 因为★上传了正确的尺寸，并不能阻止 X 裁切它★。
数字在下面。更有用的是它们底下的裁切行为，那才是"一张尺寸完美的头图在手机上仍然丢掉边缘"的原因。
数字
| 元素 | 尺寸 | 比例 |
|---|---|---|
| 头图 / banner | 1500 × 500 | 3:1 |
| 头像 | 400 × 400 | 1:1 |
| 推文配图(横) | 1600 × 900 | 16:9 |
| 推文配图(方) | 1200 × 1200 | 1:1 |
| 推文配图(竖) | 1080 × 1350 | 4:5 |
文件上限： 图片 5MB,GIF 15MB。支持 JPEG、PNG、GIF 和 WebP。
⚠️ 要按这个尺寸或更大上传，绝不要更小。 ★X 缩小得很干净，放大得很糟。★ 一张 750×250 的头图被拉伸到 1500×500，那种糊是事后无法补救的。
★为什么尺寸正确还是被裁★
这部分是大多数尺寸指南跳过的，也是人们反复重传的原因。
头图在每个宽度下的裁切都不一样
一张 1500×500 的头图是 3:1。而它被显示的那块空间不是 3:1 —— 它随视口宽度变化。在窄的手机上，可见的那条带按比例更矮，所以 X 会裁掉上下；在宽屏桌面上，你看到的更接近完整图。
★要为「安全区」设计，而不是为画布设计。★ 把重要的东西 —— 文字、标志、人脸 —— 放在垂直方向中间约 60% 的范围里。上下两条应该是丢了也无所谓的背景。
四角也要放弃： 头像会盖住头图的左下方，而在手机上头图还压在界面元素后面。⚠️ 你 banner 的左下角实际上是不可用的。
头像被裁成圆形
你上传的是方形，而 ★X 显示的是圆形★。四个角永远被切掉。
这意味着： 一个铺满方形画布的标志会丢掉四角。把图形居中，四周留出约 10% 的内边距，才能在圆形遮罩下幸存。
推文配图在时间线里会被裁
时间线里的图片会被裁到一个预览比例，完整图只有点开才看得到。★一张长图在预览里只显示窄窄一条★，直到有人点开。
实用规则： 把钩子放在图片中间。 最顶部或最底部的东西，可能根本不出现在那个"决定别人点不点"的预览里。
与其相信一份列表，不如自己验证
★尺寸会变，而网上每一份尺寸指南都是它写作时的快照 —— 包括这一篇。★
可靠的检查只要两分钟：
- 上传你的图
- 分别在满宽的桌面端、窄屏手机、以及时间线预览里看你的资料页
- 记下每种情况丢了什么
要在真实界面上做，不要在模板稿里做。模板固化的是某个人对裁切的假设，而那个假设会过期。
常见错误
做成出血满版。 最常见的一个。头图里贴边的文字一定会在某处被切掉。
上传小于目标尺寸。 放大带来的糊是不可逆的。
头像用透明 PNG。 透明区域会渲染成观看者主题提供的背景色 —— 通常不是你想要的。
上传前重度压缩。 X 无论如何都会再压一次。 上传一张已经压过的 JPEG 会让噪点叠加。
文字太小。 一张在手机宽度下渲染的头图，你那 24px 的字只剩一个零头。如果它在缩略图尺寸下不可读，那它就是不可读。
大家会问的问题
推特 banner 是多大？ 1500 × 500 像素，3:1。按这个尺寸或更大上传。
推特头图尺寸是多少？ 同一件事 —— 头图和 banner 是同一张图的两个叫法。1500 × 500。
推特头像是多大？ 400 × 400，显示为圆形。把重要部分放中间。
我的头图为什么被裁了？ 显示区域并不是在所有屏幕宽度下都是 3:1，所以 X 裁掉上下。为中间约 60% 设计。
为什么 banner 在手机上看起来不一样？ 视口更窄、可见条带按比例更矮、裁切更狠。
头图的安全区是哪里？ 垂直方向中间约 60%，并避开左下角(头像会盖住那里)。
我头像的四角为什么被切了？ 它被裁成圆形。 在方形里留出约 10% 的内边距。
推文配图该多大？ 横图 1600 × 900，方图 1200 × 1200，竖图 1080 × 1350。
推文配图最佳比例是什么？ 16:9 在时间线里预览效果好。 竖图占的垂直空间更多，但在预览里裁得更狠。
图片文件最大能多大？ 图片 5MB,GIF 15MB。
X 支持哪些图片格式？ JPEG、PNG、GIF 和 WebP。
该用 PNG 还是 JPEG？ 图形和文字用 PNG，照片用 JPEG。 反正 X 都会再压缩。
上传后画质为什么下降了？ X 会重新压缩上传的图。 从你手上画质最高的原图开始。
能上传透明 PNG 吗？ 能，但透明部分会渲染成观看者主题的背景色，而那是会变的。
一条推文能放几张图？ 最多四张，而且布局会随张数变化。
多张图是怎么裁的？ 两张并排，三张和四张用网格。每张都被裁到它的格子里，所以方形图幸存得最好。
推特视频缩略图该多大？ 它是从视频里抽的，所以由视频自身的比例决定 —— 见处理视频。
图片尺寸影响触达吗？ 不直接影响。 真正重要的是那个预览够不够吸引人让别人停下来。
我的长图在时间线里为什么那么小？ 长图被裁成窄窄一条预览。 把钩子放中间，或者拆成几张图。
社区(Community)的 banner 多大？ 比例与资料页头图相近，但要在真实界面上验证 —— 社区的布局不一样。
X 和 Twitter 需要不同尺寸吗？ 不需要。改名换的是品牌，不是图片规格。
怎么检查被裁掉了什么？ 上传后，分别在桌面端、手机端和时间线预览里看。三个视图，两分钟。
有官方模板吗？ 各种设计工具都有发布。⚠️ 它们固化的裁切假设会过期 —— 要在真实界面上验证。
该用什么分辨率做图？ 按列出的尺寸，或 2 倍以适应高密度屏幕。绝不要更低。
我的头图为什么模糊？ 几乎总是因为上传时小于 1500 × 500 然后被放大了。
头图能做成动图吗？ 不能。头图是静态图；GIF 在推文里可以，但不能作为头图。
时间线里的头像有多大？ 比 400 × 400 小得多 —— 这就是精细细节会消失的原因。要为缩略图尺寸的可读性做设计。
手机上头像的裁切不一样吗？ 到处都是圆形，只是渲染尺寸不同。
如果我的标志是长方形怎么办？ 在方形画布里居中并留边距。 铺满方形会因圆形遮罩丢掉四角。
怎么让头图在所有设备上都好看？ 内容居中、避开左下角、在最宽和最窄两端各检查一次。
发布前能预览吗？ 没法真正预览。 上传、检查、调整 —— 这就是实际的工作流。
我的图为什么有黑边？ 比例和显示格子不匹配。 按列出的比例来。
图片尺寸会随时间变化吗？ 偶尔会。 ★这正是"验证方法"比"那些数字"更重要的原因。★
最小能用多大的图？ 不要低于列出的尺寸。 更小就会被放大，看起来发糊。
怎么从推文里拿到图片链接？
它们随推文数据在 photos 字段里返回 —— 见媒体处理。
能批量检查多个账号的图吗？ 用代码可以，取资料并比对图片链接 —— 但如果只有一个账号，直接看一眼就行。
关于我们为什么写这篇，说句实话
我们做的是 X 的只读数据接口。★这个话题和我们的产品基本没有关系 —— 它是个设计问题，而没有任何接口能帮你挑 banner 尺寸。★
它在这里，是因为这个词的搜索结果里全是过时的数字和固化了旧裁切假设的模板，也因为★裁切行为比尺寸数字更重要 —— 而几乎没人讲这个★。
我们的工作唯一沾边的地方： 如果你在审计很多账号 —— 检查一批资料页有没有头图、或者批量取图片链接 —— 含图片链接的资料数据来自一次接口调用。如果只是你自己一个账号，打开资料页看一眼就行。
延伸阅读：X 上的图片和视频搜索 · 正确下载媒体 · 资料数据包含什么。