一、定义

类型说明
动态图包含动画效果的图像，如 GIF、APNG、WebP 动图等，能展示运动、变换等连续画面。
静态图单帧图像，无动画效果，如 JPG、PNG、BMP、SVG 等。

二、文件格式对比

动态图格式说明优缺点
GIF最早且广泛支持的动图格式256色限制，文件较大，色彩有限
APNGPNG的动画扩展，支持真彩色支持透明度，兼容性比GIF差
Animated WebPGoogle开发，支持压缩率高的动画格式文件小，画质好，兼容性逐步提升
SVG动画基于矢量图形的动画支持缩放无损，适合图标动画
静态图格式说明优缺点
JPG/JPEG有损压缩，适合照片类图像文件小，色彩丰富，不支持透明
PNG无损压缩，支持透明度文件较大，适合图形、文字
BMP无压缩，文件大适合简单图形，但不常用
SVG矢量图，适合图标、图表支持缩放无损，不支持复杂纹理

三、优缺点对比

方面动态图静态图
视觉效果动画能吸引眼球，表达更丰富仅表达单帧静态画面
文件大小通常比同尺寸静态图大，加载慢通常更小，加载快
兼容性GIF兼容性最好，其他格式有限支持广泛，兼容主流设备和浏览器
色彩质量GIF色彩受限，其他格式支持更好支持高色深，高清晰度
用途用于动效演示、表情包、广告动画等用于照片、图标、界面设计等
制作难度制作复杂，需多帧设计和合成简单单帧设计

四、应用场景

类型适用场景
动态图表情包、操作演示（按钮点击、流程展示）、广告动画、微动画设计等
静态图产品展示图片、头像、网页布局元素、图标、照片、LOGO 等

五、性能与用户体验考虑

  • 动态GIF可能导致页面加载速度变慢，影响用户体验，适合短小动画；
  • 静态图文件小且清晰，适合大部分需要快速加载的页面；
  • 现代网页设计中，推荐用 CSS 动画、Canvas 或 SVG 动画替代传统动态图，性能更优，交互更丰富。

六、总结

选择依据动态图静态图
想要表现动效选择动态图不适合
追求高清画质APNG/WebP 动态图优于 GIFJPG/PNG/SVG 静态图优
关注文件大小WebP 动态图小于 GIFPNG、JPG 静态图相对更小
兼容性优先GIF最广泛兼容几乎所有平台支持
制作简易静态图制作简单动态图制作复杂