每一种图片格式，都是在文件大小、画质，以及透明、动画这些特性之间做取舍。选错了，你就会得到臃肿的文件、模糊的文字，或者根本显示不出来的图形。下面用大白话讲清每一种常见格式，最后附一张你可以随手保存的对比表。
两大家族
在讲各个格式之前，有一个区分能解释它们中的大多数：
- 位图（栅格） 是像素组成的网格。照片就是位图，放大到一定程度你就会看见一个个方块。PNG、JPG、WebP、AVIF、GIF 全是位图。
- 矢量 是数学——由坐标定义的线条、曲线和形状。它们可以缩放到任意大小而不模糊。SVG 就是网页上的矢量格式。
另一个关键概念是有损与无损。有损格式（JPG，通常还有 AVIF/WebP）丢掉一些细节来缩小文件；无损格式（PNG、GIF、无损 WebP）则原封不动保留每一个像素。
逐个来看
JPG（JPEG）——照片的主力。有损、小巧，而且真的到处都能读。不支持透明，也不支持动画。反复重新保存会让它慢慢掉质。用于照片，以及任何需要最大兼容性的地方。
PNG——无损，支持透明。截图、logo、图标、示意图的正确选择——凡是带文字或硬边缘的都用它。照片存 PNG 会很大，所以别拿它存照片。
WebP——一种现代格式，两件活都能干：有损模式在体积上胜过 JPG（小约 25–35%），无损模式支持透明且体积紧凑。它还能做动画。如今浏览器全面支持。网页的理想选择；邮件或老软件则差些。
AVIF——这里最新、压得最狠的格式，同等质量下大约只有 JPEG 一半大，还支持透明和 HDR。浏览器能很好地显示它，却无法可靠地从 canvas 编码它——所以你在浏览器工具里请求 AVIF 时，它会回退到 WebP。真正的 AVIF 编码需要服务器或原生软件。
GIF——老格式，限制在 256 色，但它是简单动画的经典之选。只要超出一小段循环，WebP（或视频）都更小更清晰。做小小的动画图标还行；存照片就很差。
SVG——矢量，所以能无限缩放而不模糊，简单图形的体积极小。logo、图标、插画的完美选择。它是代码而非像素，所以无法表现照片。
对比表
| 格式 | 类型 | 压缩 | 透明 | 动画 | 最适合 |
|---|---|---|---|---|---|
| JPG | 位图 | 有损 | 不支持 | 不支持 | 照片、最大兼容 |
| PNG | 位图 | 无损 | 支持 | 不支持 | 截图、logo、文字 |
| WebP | 位图 | 都支持 | 支持 | 支持 | 网页图片、小且带透明 |
| AVIF | 位图 | 有损/无损 | 支持 | 支持 | 极致压缩（服务器端） |
| GIF | 位图 | 无损 | 仅 1 位 | 支持 | 简单动画 |
| SVG | 矢量 | 不适用 | 支持 | 支持（配 CSS/JS） | logo、图标、插画 |
如何快速选择
- 照片？ 要兼容用 JPG，给网页用 WebP。
- 截图、logo 或文字？ PNG（位图）或 SVG（如果是真正的矢量图）。
- 需要透明？ PNG、WebP、AVIF 或 SVG——绝不用 JPG。
- 动画？ 要质量和体积用 WebP，只有为兼容老平台才用 GIF。
- 发布到网站？ WebP 通常是聪明的默认选择。
在它们之间转换
拿到了不合适的格式，你不用上传任何东西就能解决。图片格式转换工具在你的浏览器里用 Canvas 在 PNG、JPG、WebP 之间切换——无需注册、什么都不传输，首次访问后离线也能用。它支持批量处理，而如果你请求 AVIF，它会回退到 WebP（比 JPG/PNG 小、到处都支持），因为浏览器无法可靠地编码 AVIF。
把上面这张表记在心里，选格式就不再靠猜：先按内容匹配格式（照片还是图形），再按去处匹配（网页、邮件、打印），你几乎每次都能选对。