同一张图片，保存成 JPG、PNG、WebP 或 AVIF，文件大小和显示效果可能完全不同。选对格式，网页加载更快；选错格式，可能文件变大、透明背景丢失，或者画质变糊。
图片格式没有绝对好坏，只有适不适合。照片、截图、透明 logo、商品图、首屏大图、缩略图和图标，对压缩、透明通道和兼容性的要求都不一样。
四种格式快速对比
| 格式 | 压缩方式 | 透明背景 | 适合场景 |
|---|---|---|---|
| JPG | 有损压缩 | 不支持 | 照片、商品图、社交分享图 |
| PNG | 无损压缩 | 支持 | 截图、图标、透明 logo、文字图片 |
| WebP | 有损或无损 | 支持 | 网页图片、缩略图、需要兼顾体积和质量的图片 |
| AVIF | 高效率有损或无损 | 支持 | 追求更小体积的网页大图、封面图和图片资产 |
什么时候用 JPG？
JPG 适合照片类图片，因为自然纹理和渐变对少量有损压缩不敏感。它的兼容性非常好，几乎所有浏览器、系统和平台都能打开。
- 适合：摄影照片、商品图、文章配图、社交分享图。
- 不适合：透明背景 logo、截图、二维码、文字很多的图片。
- 注意：JPG 不支持透明通道，透明区域在转换时通常会被填充为白色背景。
什么时候用 PNG？
PNG 使用无损压缩，能保留清晰边缘和透明背景。它非常适合截图、UI 图、图标和需要透明通道的素材，但照片类图片往往会比 JPG 或 WebP 大很多。
- 适合：截图、透明 logo、图标、二维码、文字说明图。
- 不适合：大尺寸照片、背景图、需要极致压缩的网页图片。
- 注意：PNG 转 JPG 会丢失透明背景，PNG 转 WebP 通常可以保留透明。
什么时候用 WebP？
WebP 是现代网页图片的常见选择。它通常能在比 JPG 更小的体积下保持不错画质，也支持透明背景。对大多数网站图片来说，WebP 是很均衡的默认选择。
- 适合：网页图片、缩略图、商品图、博客配图、透明素材。
- 优点：体积通常小于 JPG/PNG，同时兼顾画质和透明通道。
- 注意：如果目标平台很老，仍然需要 JPG 或 PNG 作为备用格式。
什么时候用 AVIF？
AVIF 的压缩效率通常比 WebP 更强，适合想进一步减少网页图片体积的场景。它对照片、封面图和复杂纹理图片很有价值，但编码更慢，兼容性和平台支持也要确认。
- 适合：网页首图、封面图、图库缩略图、需要强压缩的图片资产。
- 优点：同等视觉质量下通常能比 JPG 和 WebP 更小。
- 注意：AVIF 编码依赖浏览器支持，不支持时需要回退到 WebP 或 JPG。
技术实现：浏览器里格式转换是怎么做的？
ToolGarden 的图片格式转换工具在浏览器本地完成：先读取并解码图片，再绘制到 Canvas，最后按目标 MIME 类型导出为 JPG、PNG、WebP 或 AVIF。这个过程不需要把图片上传到服务器。
- 输入识别：根据文件 MIME 和扩展名识别 JPG、PNG、WebP、GIF、BMP、SVG、AVIF 等常见格式。
- 本地解码：通过浏览器图片解码能力读取真实宽高，并限制过大的文件和像素数量。
- Canvas 重绘：把图片绘制到同尺寸 Canvas，并开启高质量平滑，减少重绘时的边缘问题。
- JPG 输出：使用 image/jpeg 导出，质量参数可调，透明区域会先填充为白色。
- PNG 输出：使用 image/png 导出，保留透明通道，但文件可能比有损格式更大。
- WebP 输出：使用 image/webp 导出，质量参数控制体积和画质平衡。
- AVIF 输出：使用浏览器端 AVIF 编码器从 Canvas 像素数据生成 image/avif，并校验输出文件签名。
用 toolgarden.xyz 转换图片格式
推荐选择
| 场景 | 推荐格式 | 原因 |
|---|---|---|
| 普通照片 | JPG 或 WebP | 兼容性好，体积和画质容易平衡 |
| 网页图片 | WebP，必要时 AVIF | 现代浏览器加载更快 |
| 透明 logo | PNG 或 WebP | 保留 Alpha 透明通道 |
| 截图和文字图片 | PNG 或高质量 WebP | 保护文字边缘和界面线条 |
| 极致压缩 | AVIF | 适合对文件大小敏感的图片资产 |
总结
JPG、PNG、WebP、AVIF 的选择，本质上是在兼容性、文件体积、透明背景和画质之间做平衡。照片优先 JPG/WebP，透明和截图优先 PNG/WebP，追求更小体积可以尝试 AVIF。
如果不确定，先把图片转成 WebP 做对比，再根据透明背景、兼容性和体积要求决定是否保留 PNG/JPG 或进一步尝试 AVIF。