Front-End-Checklist 规则实战将动画 GIF 转换为 WebM/MP4 视频以压缩页面体积【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist本文围绕 Front-End-Checklist 性能类规则「Convert animated GIFs to video」把动画 GIF 转为视频展开先说明 GIF 作为动画载体的性能代价再给出可直接复用的video标签写法与 FFmpeg 转换思路并结合本仓库的 MDX 规则源文件、技能skill生成管线与 MCP 检索工具说明这条规则如何被组织、校验和分发给 AI Agent 使用。规则定位与基本信息在 Front-End-Checklist 中这条规则归属于performance类别下的metrics子类规则 slug 为animated-content。其核心结论一句话概括大块动画 GIF 应当被 MP4 或 WebM 等现代视频格式替代以减少页面体积。规则的完整定义位于 规则源文件frontmatter 中声明了以下元信息元信息取值说明prioritymedium中优先级不属于阻断级问题difficultyintermediate中等难度需要转换工具与video属性配合estimatedTime10 分钟单处替换的预估耗时categoryperformance / metrics与页面指标直接相关的性能规则tldr使用video替代大块 GIFGIF 显著大于 MP4/WebM视频提供更好的控制与性能规则速览三条源文件中还定义了面向 AI Agent 的四段提示词prompts字段这也是本仓库「规则即提示词」设计的一部分check检查是否存在可以用 MP4/WebM 替代的大块动画 GIFfix转换为 MP4 或 WebM并使用带autoplay、loop、muted、playsinline属性的video标签explain解释视频格式为何比 GIF 高效以及它对性能的提升点codeReview审查影响该规则的路由、资源与加载行为指出具体文件、请求或渲染步骤并说明用于确认问题的测量方法。aiContext字段则规定了 Agent 的使用时机在审计慢页面加载、大资源或渲染延迟时启用且必须先在 DevTools、Lighthouse 或真实用户数据中确认实际瓶颈再给出修改建议——这一约束体现了该仓库对「证据先行」审计姿势的一贯要求。为什么 GIF 不适合承载动画规则正文给出的判断依据是大动画 GIF 被广泛用于短动画但相比现代视频格式效率极低转换为 MP4/WebM 通常可以减少 80% 以上的文件体积。具体代价分为四个维度见 rule.md 与 animated-content.mdx 的 Why It Matters 章节页面体积GIF 是无压缩未使用现代视频编码格式单个文件很容易达到数 MB直接拖慢页面加载CPU 占用浏览器解码和渲染大 GIF 时消耗的 CPU/GPU 资源明显多于同等内容的优化视频电池消耗在移动端GIF 的高资源占用会显著加速耗电用户体验大资源延迟页面加载完成并在滚动过程中引发卡顿。这里需要注意一个措辞上的细节规则强调的是「大块」GIF。小尺寸、短时长、低复杂度的 GIF例如 100px 左右的小型图标动画替换收益有限替换决策应结合实际资源尺寸与网络测量数据而不是机械地对所有 GIF 动手。前后对照从img到video规则给出的标准对照示例如下。传统写法把 GIF 当作普通图片加载img srcanimation.gif altDescription of animation推荐写法使用video标签通过一组属性模拟 GIF 的「自动播放 循环 无声」行为并声明poster首帧与双格式回退video autoplay loop muted playsinline posteranimation-frame.jpg source srcanimation.webm typevideo/webm source srcanimation.mp4 typevideo/mp4 Your browser does not support the video tag. /video逐属性解读属性 / 元素作用缺省后果autoplay页面加载后自动播放对齐 GIF 的默认行为需要用户手动点击播放交互体验断裂loop循环播放动画播放一次后停在末帧muted静音。这是自动播放能生效的前提主流浏览器都禁止非静音自动播放自动播放被浏览器静默拦截playsinline内联播放不被 iOS Safari 强制全屏接管移动端可能弹出全屏播放器破坏页面布局poster视频加载完成前显示一张静态首帧保证占位视觉稳定加载期间可能显示黑帧source双源WebM 面向现代浏览器MP4 作为回退单一格式无法覆盖全部浏览器文本回退内容不支持video的环境显示可读说明老环境直接空白规则在 Best Practices 中进一步强调了两点优先遵循浏览器原生视频分发指导来决定一个动画「是否还需要保留 GIF 身份」因为最大的收益往往来自直接消除重型动画资源而不是仅仅把缓存做得更好对首屏以下的视频可结合loadinglazy思路或使用 Intersection Observer 延迟加载。转换与格式选择规则的 Tools Validation 章节把工具分为三类FFmpeg命令行转换 GIF 到视频、Cloudinary/Imgix 一类的自动化媒体优化服务、以及 Lighthouse检查大 GIF 并建议视频替代。本仓库仅把它们列为推荐工具未内置转换脚本因此转换动作发生在项目自身的构建或运维流程中。以 FFmpeg 为例典型的两条转换路径是# 转 MP4H.264yuv420p 保证广泛兼容 ffmpeg -i animation.gif -c:v libx264 -pix_fmt yuv420p animation.mp4 # 转 WebMVP9无损质量下通常体积更小 ffmpeg -i animation.gif -c:v libvpx-vp9 -b:v 0 -crf 30 animation.webm配合上面的 HTML 双source写法现代浏览器优先取 WebM其余环境回退 MP4。如果团队已有 Cloudinary/Imgix 这类服务接入也可以在其自动化管线中直接产出双格式产物省去手工维护 FFmpeg 步骤。规则同时列出了明确反模式❌ 清单不要用 GIF 承载大动画超过几百像素、或时长超过一秒的动画原则上都不应使用 GIF不要忽略可访问性始终为动画提供替代文本或描述这一点与img alt...示例中的做法一致。验证自动检查与手动检查规则正文的 Verification 章节给出了两级验证流程这也是该仓库所有规则通用的「测量闭环」要求自动检查用 Lighthouse、PageSpeed Insights 或 DevTools 测量受影响的页面或流程确认目标指标总传输体积、加载耗时等确实改善检查网络瀑布图或性能时间线确认预期的资源/执行变化真正生效例如 GIF 请求确实被更小的视频请求替换。手动检查在降速的移动端网络画像下验证而不是只看本地桌面环境如果该规则映射到某个性能预算或 Web Vital 阈值确认页面现在稳定落在阈值之内。源文件的resources字段还额外登记了 PageSpeed Insights 作为工具资源sources字段则声明了 web.dev 性能学习指南与 Chrome Developers 的 Lighthouse 概览作为主要参考primary authority其使用原则是以最终生产行为的测量为准而不只是本地合成输出。这条规则在仓库中的组织方式Front-End-Checklist 把规则以「一份 MDX、多种分发形态」的方式组织animated-content是一个完整的观察样本规则源animated-content.mdx 存放 frontmatter 元数据、AI 提示词、来源引用sources与规则正文技能skill生成generate-skills 脚本 读取packages/content/rules/en下的 MDX将正文剥离 MDX 语法后转换为纯 Markdown写入skills/{slug}/。对应本规则产出 SKILL.mdfrontmatter 元数据 Quick Reference Check/Fix/Explain/Code Review 四段指令与 references/rule.md完整规则正文。生成命令为pnpm generate:skills全量或传入具体.mdx路径增量由 lefthook 在提交时触发Agent 安装技能目录可通过npx skills add frontendchecklist/skills安装--skill animated-content可单独安装本规则对应的技能MCP 检索仓库的 MCP 服务packages/mcp提供search_rules、get_rule、fix_rule、explain_rule等工具见 get-rule 工具实现Agent 可按主题检索到这条规则并获取完整内容与修复指引。MCP 质量测试 中就包含一条检索用例查询 reduced motion animation accessibility 时期望命中reduced-motion与animated-content说明该规则被纳入自动化检索质量保障范围目录登记全量规则目录见 rules-catalog.md。小结判断依据GIF 体积大、解码 CPU 开销高、拖慢加载并增加移动端耗电替换为 WebM/MP4 可削减 80% 以上体积落地写法video autoplay loop muted playsinline poster... WebM 与 MP4 双source回退 文本兜底转换工具FFmpeg 命令行或 Cloudinary/Imgix 类自动化服务小尺寸短时长 GIF 不必强换验证闭环Lighthouse/DevTools 自动测量 降速移动端手动确认确保体积与指标真实改善仓库入口规则源 animated-content.mdx、技能 skills/animated-content/SKILL.md、生成管线 generate-skills.ts。【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Front-End-Checklist 规则实战：将动画 GIF 转换为 WebM/MP4 视频以压缩页面体积
Front-End-Checklist 规则实战将动画 GIF 转换为 WebM/MP4 视频以压缩页面体积【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist本文围绕 Front-End-Checklist 性能类规则「Convert animated GIFs to video」把动画 GIF 转为视频展开先说明 GIF 作为动画载体的性能代价再给出可直接复用的video标签写法与 FFmpeg 转换思路并结合本仓库的 MDX 规则源文件、技能skill生成管线与 MCP 检索工具说明这条规则如何被组织、校验和分发给 AI Agent 使用。规则定位与基本信息在 Front-End-Checklist 中这条规则归属于performance类别下的metrics子类规则 slug 为animated-content。其核心结论一句话概括大块动画 GIF 应当被 MP4 或 WebM 等现代视频格式替代以减少页面体积。规则的完整定义位于 规则源文件frontmatter 中声明了以下元信息元信息取值说明prioritymedium中优先级不属于阻断级问题difficultyintermediate中等难度需要转换工具与video属性配合estimatedTime10 分钟单处替换的预估耗时categoryperformance / metrics与页面指标直接相关的性能规则tldr使用video替代大块 GIFGIF 显著大于 MP4/WebM视频提供更好的控制与性能规则速览三条源文件中还定义了面向 AI Agent 的四段提示词prompts字段这也是本仓库「规则即提示词」设计的一部分check检查是否存在可以用 MP4/WebM 替代的大块动画 GIFfix转换为 MP4 或 WebM并使用带autoplay、loop、muted、playsinline属性的video标签explain解释视频格式为何比 GIF 高效以及它对性能的提升点codeReview审查影响该规则的路由、资源与加载行为指出具体文件、请求或渲染步骤并说明用于确认问题的测量方法。aiContext字段则规定了 Agent 的使用时机在审计慢页面加载、大资源或渲染延迟时启用且必须先在 DevTools、Lighthouse 或真实用户数据中确认实际瓶颈再给出修改建议——这一约束体现了该仓库对「证据先行」审计姿势的一贯要求。为什么 GIF 不适合承载动画规则正文给出的判断依据是大动画 GIF 被广泛用于短动画但相比现代视频格式效率极低转换为 MP4/WebM 通常可以减少 80% 以上的文件体积。具体代价分为四个维度见 rule.md 与 animated-content.mdx 的 Why It Matters 章节页面体积GIF 是无压缩未使用现代视频编码格式单个文件很容易达到数 MB直接拖慢页面加载CPU 占用浏览器解码和渲染大 GIF 时消耗的 CPU/GPU 资源明显多于同等内容的优化视频电池消耗在移动端GIF 的高资源占用会显著加速耗电用户体验大资源延迟页面加载完成并在滚动过程中引发卡顿。这里需要注意一个措辞上的细节规则强调的是「大块」GIF。小尺寸、短时长、低复杂度的 GIF例如 100px 左右的小型图标动画替换收益有限替换决策应结合实际资源尺寸与网络测量数据而不是机械地对所有 GIF 动手。前后对照从img到video规则给出的标准对照示例如下。传统写法把 GIF 当作普通图片加载img srcanimation.gif altDescription of animation推荐写法使用video标签通过一组属性模拟 GIF 的「自动播放 循环 无声」行为并声明poster首帧与双格式回退video autoplay loop muted playsinline posteranimation-frame.jpg source srcanimation.webm typevideo/webm source srcanimation.mp4 typevideo/mp4 Your browser does not support the video tag. /video逐属性解读属性 / 元素作用缺省后果autoplay页面加载后自动播放对齐 GIF 的默认行为需要用户手动点击播放交互体验断裂loop循环播放动画播放一次后停在末帧muted静音。这是自动播放能生效的前提主流浏览器都禁止非静音自动播放自动播放被浏览器静默拦截playsinline内联播放不被 iOS Safari 强制全屏接管移动端可能弹出全屏播放器破坏页面布局poster视频加载完成前显示一张静态首帧保证占位视觉稳定加载期间可能显示黑帧source双源WebM 面向现代浏览器MP4 作为回退单一格式无法覆盖全部浏览器文本回退内容不支持video的环境显示可读说明老环境直接空白规则在 Best Practices 中进一步强调了两点优先遵循浏览器原生视频分发指导来决定一个动画「是否还需要保留 GIF 身份」因为最大的收益往往来自直接消除重型动画资源而不是仅仅把缓存做得更好对首屏以下的视频可结合loadinglazy思路或使用 Intersection Observer 延迟加载。转换与格式选择规则的 Tools Validation 章节把工具分为三类FFmpeg命令行转换 GIF 到视频、Cloudinary/Imgix 一类的自动化媒体优化服务、以及 Lighthouse检查大 GIF 并建议视频替代。本仓库仅把它们列为推荐工具未内置转换脚本因此转换动作发生在项目自身的构建或运维流程中。以 FFmpeg 为例典型的两条转换路径是# 转 MP4H.264yuv420p 保证广泛兼容 ffmpeg -i animation.gif -c:v libx264 -pix_fmt yuv420p animation.mp4 # 转 WebMVP9无损质量下通常体积更小 ffmpeg -i animation.gif -c:v libvpx-vp9 -b:v 0 -crf 30 animation.webm配合上面的 HTML 双source写法现代浏览器优先取 WebM其余环境回退 MP4。如果团队已有 Cloudinary/Imgix 这类服务接入也可以在其自动化管线中直接产出双格式产物省去手工维护 FFmpeg 步骤。规则同时列出了明确反模式❌ 清单不要用 GIF 承载大动画超过几百像素、或时长超过一秒的动画原则上都不应使用 GIF不要忽略可访问性始终为动画提供替代文本或描述这一点与img alt...示例中的做法一致。验证自动检查与手动检查规则正文的 Verification 章节给出了两级验证流程这也是该仓库所有规则通用的「测量闭环」要求自动检查用 Lighthouse、PageSpeed Insights 或 DevTools 测量受影响的页面或流程确认目标指标总传输体积、加载耗时等确实改善检查网络瀑布图或性能时间线确认预期的资源/执行变化真正生效例如 GIF 请求确实被更小的视频请求替换。手动检查在降速的移动端网络画像下验证而不是只看本地桌面环境如果该规则映射到某个性能预算或 Web Vital 阈值确认页面现在稳定落在阈值之内。源文件的resources字段还额外登记了 PageSpeed Insights 作为工具资源sources字段则声明了 web.dev 性能学习指南与 Chrome Developers 的 Lighthouse 概览作为主要参考primary authority其使用原则是以最终生产行为的测量为准而不只是本地合成输出。这条规则在仓库中的组织方式Front-End-Checklist 把规则以「一份 MDX、多种分发形态」的方式组织animated-content是一个完整的观察样本规则源animated-content.mdx 存放 frontmatter 元数据、AI 提示词、来源引用sources与规则正文技能skill生成generate-skills 脚本 读取packages/content/rules/en下的 MDX将正文剥离 MDX 语法后转换为纯 Markdown写入skills/{slug}/。对应本规则产出 SKILL.mdfrontmatter 元数据 Quick Reference Check/Fix/Explain/Code Review 四段指令与 references/rule.md完整规则正文。生成命令为pnpm generate:skills全量或传入具体.mdx路径增量由 lefthook 在提交时触发Agent 安装技能目录可通过npx skills add frontendchecklist/skills安装--skill animated-content可单独安装本规则对应的技能MCP 检索仓库的 MCP 服务packages/mcp提供search_rules、get_rule、fix_rule、explain_rule等工具见 get-rule 工具实现Agent 可按主题检索到这条规则并获取完整内容与修复指引。MCP 质量测试 中就包含一条检索用例查询 reduced motion animation accessibility 时期望命中reduced-motion与animated-content说明该规则被纳入自动化检索质量保障范围目录登记全量规则目录见 rules-catalog.md。小结判断依据GIF 体积大、解码 CPU 开销高、拖慢加载并增加移动端耗电替换为 WebM/MP4 可削减 80% 以上体积落地写法video autoplay loop muted playsinline poster... WebM 与 MP4 双source回退 文本兜底转换工具FFmpeg 命令行或 Cloudinary/Imgix 类自动化服务小尺寸短时长 GIF 不必强换验证闭环Lighthouse/DevTools 自动测量 降速移动端手动确认确保体积与指标真实改善仓库入口规则源 animated-content.mdx、技能 skills/animated-content/SKILL.md、生成管线 generate-skills.ts。【免费下载链接】Front-End-Checklist The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考