跳到正文
FunCoding

animated-content

Use when auditing slow page loads, heavy assets, or rendering delays related to Convert animated GIFs to video. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Star
74,442
许可证
MIT
最近提交
2026年10月6日

skills/animated-content/SKILL.md

在 GitHub 上查看

Convert animated GIFs to video

Large animated GIFs can significantly increase page weight and consume excessive CPU/memory, leading to slower page loads and poor scrolling performance.

Quick Reference

  • Use <video> instead of large GIFs for animations
  • GIFs are significantly larger than MP4/WebM
  • Videos allow for better control and performance

Check

Check for large animated GIFs that could be replaced with more efficient video formats like MP4 or WebM.

Fix

Convert animated GIFs to MP4 or WebM and use the <video> tag with autoplay, loop, muted, and playsinline attributes.

Explain

Explain why video formats are more efficient than GIFs for animated content and how they improve performance.

Code Review

Review the routes, assets, and loading behavior that affect Convert animated GIFs to video. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.


For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/performance/animated-content

相似的 Skill

blender-motion-state-inspection

AFaffaan-m/ECC278k近 7 天新增 4,046 个 star

官方

slack-gif-creator

ANanthropics/skills181k近 7 天新增 1,119 个 star

精选

algorithmic-art

用 p5.js 生成流场和粒子系统,通过种子随机性创作原创算法艺术。

ANanthropics/skills181k近 7 天新增 1,119 个 star

thinking-out-loud

SHShubhamsaboo/awesome-llm-apps141k近 7 天新增 808 个 star

moneyprinterturbo-video

HAharry0703/MoneyPrinterTurbo130k近 7 天新增 1,722 个 star

complain

PApaperclipai/paperclip101k近 7 天新增 2,948 个 star