术语
宽高比
宽高比是图片宽度与高度之间的比例关系,通常写成 16:9 或 4:3 等两个数字,它决定了图片的整体形状。
常见宽高比
同样是矩形,不同宽高比适合的使用场景并不一样。
- 16:9——大多数桌面显示器、笔记本电脑和视频内容采用的标准宽屏比例。1920x1080 图片就是 16:9,也是现代电脑截图最常见的默认形状。
- 4:3——传统屏幕比例,如今在平板电脑和较旧的显示器上仍很常见。1024x768 图片就是 4:3。文档和演示文稿有时更适合这一比例,因为周围能留出更多文字空间。
- 1:1——正方形,常用于社交媒体、头像和缩略图网格。截图原本很少是 1:1,但为了适配特定发布位置,经常会裁剪成这一比例。
- 9:16——竖向比例,与 16:9 相反,是手机截图、竖屏视频和社交平台限时动态的常用规格。
- 3:2——许多数码单反相机和部分笔记本电脑屏幕(包括近年的 MacBook)采用这一比例。它的宽度介于 16:9 与 4:3 之间,整体较为均衡。
哪些场景需要注意宽高比
只要图片需要放进预先规定的区域,宽高比就很重要。社交媒体平台、应用商店、幻灯片模板和网站布局都有各自的常用比例。不匹配的图片会被裁剪、拉伸或填充空白,都会影响最终效果。
社交媒体平台的要求尤其明确。Instagram 信息流帖子通常使用 1:1 或 4:5,YouTube 缩略图为 16:9,LinkedIn 文章图片约为 1.91:1。若不先按这些比例处理截图,平台会自行决定裁掉哪些内容,结果往往不符合预期。
应用商店会为不同设备类型规定固定宽高比。提交错误比例的截图,可能无法通过审核,也可能被自动裁剪,导致重要内容缺失。
内部工具同样会受宽高比影响。为 16:9 缩略图设计的仪表盘组件可能会拉伸或切掉 4:3 截图;采用固定宽度图片容器的文档系统,也可能裁掉超出预期高度的部分。
宽高比与截图
截图会沿用截取对象的宽高比,例如屏幕、窗口或选区的比例。在 16:9 显示器上截取全屏,会得到 16:9 图片;竖屏手机模拟器的截图则是 9:16。
当截图要放进另一种比例的空间时,这一点就很关键。用于 1:1 社交媒体帖子的 16:9 桌面截图需要裁剪;放进 16:9 幻灯片的 9:16 手机截图,则需要留白或采用适合竖图的版式。
截图前先确认目标比例,可以节省后续处理时间。支持自定义视口尺寸的截图工具允许一开始就按目标比例设置宽度和高度,省去之后单独裁剪的步骤。批量制作素材时尤其如此:只需在截图配置中设置一次正确比例,整批图片都会沿用。
在实际素材流程中,宽高比应当是最先确定的事项之一,而不是最后补救的问题。从一开始就按目标比例截图,比后续逐张临时裁剪更省时间。
常见问题
- 忽略目标位置的比例。 直接按当前屏幕比例截图,并默认它适合所有地方。截图或裁剪前,应先查看目标平台的规格要求。
- 拉伸图片来填满空间。 强行拉伸到另一种比例会使内容变形:圆形变成椭圆,文字也可能难以辨认。应使用裁剪或留白,不要拉伸。
- 混淆宽高比与分辨率。 1920x1080 和 1280x720 都是 16:9,形状相同,但细节量不同。只要宽度和高度按同一倍数缩放,改变分辨率并不会改变宽高比。
- 忘记移动设备的方向。 只按桌面端考虑时,人们往往默认使用横向比例。但手机截图通常为竖向,而且许多平台越来越重视竖屏内容。受众横跨多种设备时,应同时准备横向和竖向素材。
常见问题
截图最常见的宽高比是多少?
16:9 最常见,因为大多数现代桌面显示器和笔记本电脑屏幕都采用这一比例。手机截图通常为 9:16,也就是同一比例的竖向版本;平板电脑则常见 4:3 或 3:2。
把图片强行放进错误的宽高比会怎样?
图片会被拉伸或压扁。把 16:9 图片强行放进 1:1 容器时,只能选择扭曲、裁剪或用空白填充,效果通常都不理想。应尽量让原图比例与目标容器一致。
如何计算图片的宽高比?
用宽度和高度分别除以两者的最大公约数。例如,1920x1080 的宽度和高度都除以 120,结果就是 16:9。许多图片编辑器和截图工具也会自动显示这一比例。
宽高比会影响文件大小吗?
不会直接影响。文件大小取决于总像素数(宽度乘以高度)和压缩方式。不过,在高度相同的情况下,较宽的比例比窄比例包含更多像素,因此文件也会更大。
应该按固定宽高比裁剪,还是自由裁剪?
图片要放进固定容器时,例如社交媒体帖子、幻灯片模板或缩略图,应按规定宽高比裁剪。如果只是移除多余区域,而目标位置没有固定形状,自由裁剪即可。
参考资料
- 响应式图片 — MDN