步骤一：确定素材和验收目标
场景是一张健身房开业活动页，首屏需要展示教练挥动战绳的动作。源素材为手机拍摄的1080p视频，原片12秒。页面开发前先定三项验收标准：移动网络下首帧尽快出现、动作循环不突兀、素材本身不挤压标题和报名按钮。
为保证激情动态图对比公平，三个版本都截取同一段4秒动作，统一裁成横向画面，宽度960像素，不添加文字。这样对比的是格式和播放方式，而不是剪辑内容差异。
激情动态图对比：健身活动案例复盘
激情动态图对比只有放进真实项目才看得出差距。一次健身房开业活动中，同一段战绳训练分别做成高清GIF、动态WebP和MP4，结果在体积、打开速度与平台兼容上差别明显。下面按制作到上线的顺序复盘。
步骤二：分别制作三个版本
A版导出GIF，设置15帧每秒，并减少颜色数量；优势是上传简单、自动循环，问题是地面阴影和红色灯光出现轻微色带。B版导出动态WebP，尺寸和帧率不变，渐变明显更平滑，文件也更容易控制。
C版使用MP4，保留24帧每秒，并单独生成一张静态封面。视频动作最顺，细节最好，但页面必须设置自动播放、静音、循环和内联播放；任一属性遗漏，部分手机就会显示播放按钮，首屏表现不一致。
步骤三：放到真实页面逐项对比
测试没有只看本地文件，而是把三个版本放进相同页面模板，在移动网络下分别打开。GIF兼容最稳，但体积最大，快速滚动时偶尔延迟播放；动态WebP加载更轻，视觉差异很小；MP4传输效率最好，却多了一层播放器和封面处理。
随后又测试内容管理后台。GIF可以直接上传，动态WebP在旧版后台中预览为静态图，但前台实际能播放；MP4则需要走视频组件。这个细节改变了选择：性能不是唯一成本，编辑人员能否稳定发布同样重要。
步骤四：上线取舍和复盘结论
最终首屏采用动态WebP，同时保留静态封面作为加载占位；社群转发版另存GIF，确保聊天软件内直接播放；完整训练片段使用MP4放在详情区。没有强迫一种格式覆盖所有渠道，反而减少了兼容问题。
这次激情动态图对比得到的结论很明确：首屏短循环优先考虑动态WebP，跨平台分享准备GIF，长动作交给MP4。复盘时最值得保留的不是某个固定参数，而是“同源、同尺寸、同场景”的测试方法，否则漂亮的实验数据无法指导上线。
常见问题
- 激情动态图对比时应该记录哪些数据？
- 至少记录尺寸、时长、帧率、文件大小、首帧出现时间、循环效果和目标平台兼容情况，并使用同一段源素材。
- 活动页首屏适合直接放GIF吗？
- 可以，但应严格控制尺寸和体积。颜色丰富或动作复杂时，动态WebP或静音循环MP4通常更省流量。
- 为什么同一个项目要准备多个动画版本？
- 网页、内容后台和聊天软件的格式支持不同。按渠道分别准备WebP、GIF或MP4，往往比强行使用单一格式更稳定。