用 <img alt="HTML中如何插入GIF动图_HTML插入GIF动图方法介绍【动图展示】" > 标签直接加载 GIF，和静态图没区别
HTML 里插入 GIF 动图，本质上就是把它当普通图片用——<img alt="HTML中如何插入GIF动图_HTML插入GIF动图方法介绍【动图展示】" > 标签完全支持，不需要额外 JS 或 CSS。浏览器原生解码并自动播放，只要 GIF 文件本身是合法的动图（含多帧、非静帧优化版）。
常见错误现象：<img src="loading.gif" alt="HTML中如何插入GIF动图_HTML插入GIF动图方法介绍【动图展示】" > 页面上只显示第一帧，或者压根不显示。
- 检查文件是否真为动图：用系统预览/Photoshop 打开确认能动；上传前被工具“压缩”成单帧 PNG 的情况很常见
- 路径必须正确：
src值区分大小写，./images/loading.gif和./Images/loading.gif在 Linux 服务器上就是两个路径 - 不要加
type="image/gif"属性——<img alt="HTML中如何插入GIF动图_HTML插入GIF动图方法介绍【动图展示】" >不认这个，纯属无效代码
GIF 不动？大概率是被 CSS animation 或 will-change 干扰了
现代项目常全局设置 img { animation: none; } 或对图片容器加 will-change: transform，这会触发浏览器的合成层优化，反而让某些 GIF 停播（尤其 Chrome 90+）。
使用场景：SPA 项目里用 GIF 做加载提示，突然不动了，但换浏览器或无样式时又正常。
立即学习“前端免费学习笔记（深入）”；
- 临时修复：给动图加
style="animation: inherit;"或style="will-change: auto;" - 更稳妥做法：用
class="gif-inline"单独控制，CSS 中写.gif-inline { animation: none !important; will-change: auto; } - 注意：Firefox 对这类干扰更宽容，所以问题常只在 Chrome / Edge 复现
移动端 Safari 播放 GIF 有兼容性坑
iOS 15.4 之前，Safari 对大尺寸或高帧率 GIF 支持不稳定，容易卡在第一帧、跳帧、甚至触发内存警告后白屏。
参数差异：width/height 属性值过大（比如原始尺寸 800×600）、GIF 总帧数 > 50、单帧延迟
- 压缩优先选
gifsicle --optimize=3 --delay=20 --resize-width=320，别只靠 UI 工具点“压缩” - 避免用
background-image: url(...)加载 GIF——Safari 对 background GIF 的播放控制更弱 - 如果必须高清，考虑用
<video></video>替代：<video autoplay loop muted playsinline src="loading.mp4"></video>，兼容性和性能更好
为什么有时候 GIF 明明能动，但看起来“卡顿”或“掉帧”
这不是 HTML 或浏览器 bug，而是 GIF 格式本身的限制：它没有统一帧率概念，每帧可设独立延迟（单位是 1/100 秒），且浏览器解析时可能四舍五入或强制对齐刷新率。
性能影响：一个 2MB、100 帧的 GIF，在低端 Android 上解码可能占满单核 CPU 100ms，导致页面卡顿。
- 用
identify -format "%T %n\n" anim.gif（ImageMagick）查各帧延迟，看是否存在异常小值（如1= 0.01s） - 统一帧延迟更稳：
gifsicle --delay=10 --no-optimize input.gif -o output.gif - 别迷信“体积小就一定快”——有些超小 GIF 是靠丢帧实现的，动效反而更断续
动图不是贴图，它有帧、有延迟、有解码成本。传之前多看一眼实际播放效果，比调十遍 HTML 标签有用得多。
