滚动动画需要多少帧？每帧尺寸应多大？

返回所有文章动画性能优化WebP指南 2026年11月6日 滚动动画需要多少帧？（以及每帧应该多大） 滚动图像序列的经验法则：主视觉区约60–150帧，每帧对应15–20px滚动距离，每帧WebP约15–40KB，移动端使用更精简的帧集。更多帧何时有帮助，何时反而有害。 简短回答：对于典型的主视觉滚动动画，60–350帧就足够了。目标是每帧对应约10–20px的滚动距离，按实际显示尺寸导出每一帧，每帧WebP控制在约15–40KB。移动端使用更精简的帧集：更小的尺寸，通常40–100帧。只有当滚动距离足够长、能展示出这些帧时，增加帧数才有意义。 从滚动距离出发，而不是视频长度： 如果你的视频帧数超过这个范围，就每隔一帧或每隔两帧丢弃一帧。 滚动区域长且慢，每一帧都能在屏幕上停留一段时间。 源视频中有快速运动（快速旋转），帧间隔会造成跳跃感。 主体大且对比度高，帧与帧之间的跳变很容易被察觉。 更多帧什么时候反而有害？ 在移动端，如果你使用的是慢速连接，每多一帧都会增加加载时间（见下文）。 滚动区域短，每次滚动步骤本来就会跳过好几帧。 首屏区域，加载数百张图片会拖慢其他所有内容。 每帧应该多大？ 有两个数字很重要： 按实际显示宽度导出。全宽桌面主视觉区很少需要超过1920px；手机端帧集长边很少需要超过约800–1000px。 使用单独的移动端帧集：竖版裁剪、更小的尺寸，如果手机上的滚动区域更短，则使用更少的帧。这是解决手机卡顿和iOS崩溃最有效的一步。完整列表见移动端图像序列卡顿？9个修复方法。 桌面主视觉区移动端帧集帧数60–15040–100每帧滚动距离15–20px15–20px长边最高约1920px约800–1000px格式WebPWebP每帧文件大小约15–90KB约10–25KB 这些只是起点，不是定律。在真机上测试并调整。 按这些设置将视频转换为帧，正是免费的npx scrollsequence vid2ssq转换器的用途；Scrollsequence v2也在wp-admin中内置了该功能，并支持为移动端帧集生成多分辨率序列。 移动端图像序列卡顿？9个修复方法 图像序列用WebP、PNG还是JPG？ iPhone Safari在我的滚动动画上崩溃或重新加载 常见问题 我应该匹配视频的帧率吗？ 不需要。滚动动画不依赖于时间。应该让帧数与滚动距离匹配。 更高的帧数会让动画更流畅吗？ 只有在大约每10–20px滚动距离一帧的范围内才是如此。超过这个范围，帧会被跳过，你只是在内存和带宽上为它们付出代价。 移动端帧应该是什么分辨率？ 宽度约800–1000px是一个好的起点，裁剪以适应手机屏幕。 滚动图像序列应该使用哪种图像格式？我们从文件大小、解码速度、透明度和浏览器支持方面比较了WebP、PNG和JPG，并解释了为什么PNG是滚动动画的陷阱。 你的滚动图像序列在桌面端很流畅，但在手机上卡顿、变空白或重新加载。以下是9个真正有效的修复方法，从帧数和解码内存到移动端帧集和加载策略，附WordPress检查清单。 如果你的滚动图像序列导致iPhone Safari重新加载页面或显示“反复出现问题”，说明标签页内存不足。以下是解码帧导致该问题的原因以及修复方法。