如何在HTML网页中添加GIF动图？

别想复杂，GIF和JPG、PNG一样是浏览器原生支持的图片格式，不需要加任何第三方插件、不用写复杂逻辑，用标准的图片标签就能正常加载播放，具体操作如下：

• 先把资源放对位置
  把你准备好的GIF文件丢到项目存静态图片的目录就行，比如大家常用的assets/images、static/imgs这类文件夹，和你放普通网站配图的规则保持一致，后续部署网站的时候记得把GIF文件跟着其他静态资源一起传到服务器对应路径。
• 写标签直接引入
  用HTML原生的<img>标签就可以，src属性填GIF文件的对应路径，alt属性写清楚动图的内容，方便屏幕阅读器识别，也能在图片加载失败的时候给用户提示。
  最基础的写法示例：

<!-- 如果你的HTML文件和GIF文件在同一个目录，直接写文件名就行 -->
<img src="dog-wagging-tail.gif" alt="摇尾巴的小金毛动图" width="480">

• 按需调整显示效果
  你给普通静态图片加的所有样式都能直接用在GIF上：比如用width、height属性控制显示尺寸，加class绑定自定义CSS调圆角、阴影、边距、对齐方式，完全不用特殊处理。

几个实操里容易踩的坑，提前给你提个醒：

1. 路径别写错：本地测试如果是直接双击HTML用file://协议打开，src里的相对路径一定要和GIF的实际存放位置对应，不然会出裂图；如果是部署到Linux系统的服务器，一定要注意文件名大小写，很多服务器对路径大小写敏感，差一个字母都加载不出来。
2. 别用太大的GIF：同尺寸下GIF体积比静态图大很多，动不动就好几MB的GIF会直接拖慢页面加载速度，建议先压缩到1MB以内再用。
3. 想做「默认显示静帧、鼠标放上去才播放动效」的效果根本不用找插件：默认给<img>的src设成提前截好的GIF第一帧静态图，监听鼠标移入事件把src换成GIF地址，鼠标移走再切回静态图就能实现，几行原生JS就搞定。
4. 别用<video>或者其他自定义标签加载GIF，兼容性差还得多写一堆播放控制逻辑，<img>是全浏览器兼容最好的方案，引入之后浏览器会自动识别格式、循环播放动效，啥额外代码都不用写。

内容的提问来源于stack exchange，提问作者CodingDude