常用的图片格式

静图

JPEG

1. 有损压缩为主
2. 同等视觉下，文件大小中等
3. 8-bit 色深
4. 兼容新极好

照片、风景、人像等大图

小提示：Mozilla 在 2014 年推出的一个开源项目 Mozilla JPEG Encoder Project，针对 jpeg 做了优化，成为 mozjpeg，但是后缀名仍然是 .jpg、.jpeg

PNG

1. 无损压缩
2. 同等视觉下，文件大小较大
3. 8-bit/16-bit 色深 + alpha
4. 兼容新极好

需要支持透明、Logo

WebP

1. 支持有损压缩、无损压缩
2. 支持静图、动图
3. 8-bit 色深
4. 同等视觉下，文件大小较小
5. 兼容性尚可，现代浏览器支持，但是有的软件可能不支持

网页优化首选、博客

GIF

GIF（Graphics Interchange Format）：一种很老但超级经典的图片文件格式

1. 支持无损压缩
2. 支持静图（单帧）和动图
3. 同等视觉下，文件大小中等
4. 8-bit 色深
5. 支持透明背景，但支持一般
6. 帧率固定
7. 兼容新极好，推广极高

简单循环动画、表情包

AVIF

AVIF（AV1 Image File Format）：使用 AV1 的编码格式的新一代图片格式

1. 支持有损压缩、无损压缩
2. 支持静图、动图
3. 较高的压缩率，文件极小：AVIF 的压缩率比 WebP 高约 20-30%，比 JPEG 高约 50%，能显著减少图片文件大小，提升网页加载速度
4. 编码时间较长，批量转换的话需要较长的时间
5. 支持高动态范围（HDR）和 10 位颜色，色彩丰富
6. 支持 Alpha 通道，透明度平滑
7. 支持自定义帧率和循环播放
8. 开源与免专利
9. 兼容新较差

追求极致压缩的现代网站、未来首选

<picture>
  <source srcset="animation.avif" type="image/avif" />
  <img src="animation.gif" alt="动画" />
</picture>

通过 squoosh.app 可编辑图片，生成多种格式，也可以 https://github.com/lovell/sharp 安装库自行生成