同一张图，放到网站、发给客户、上传电商后台，合适的格式可能完全不同。照片存成 PNG 往往太大，带透明背景的 Logo 存成 JPG 又会丢掉透明区域。先看图片要去哪里，再选格式，比背一套“最佳格式”有用。
这里不比较理论上的最高压缩率。把候选图片缩到相同尺寸，调到看起来差不多，再比较体积和目标平台能否正常打开，结论才有用。
格式怎么选
没有特殊要求时，照片从 JPG 或 WebP 开始，透明素材从 PNG 或 WebP 开始。AVIF 先在自己的 CMS、浏览器和交付流程里试过再用。源文件另外保存，不要拿发布版当母版。
四种格式分别解决什么问题
JPG 使用有损压缩，擅长处理照片中的连续色调，兼容性也最稳定，但不支持透明通道。PNG 采用无损压缩，适合界面截图、线条图、图标和需要透明背景的素材；把高分辨率照片直接保存为 PNG，体积通常不会理想。
WebP 同时支持有损、无损和透明通道，适合作为网页交付格式。AVIF 在许多照片场景中能以更小体积保持细节，但编码耗时、旧软件兼容和工作流支持需要单独确认。
| 格式 | 适合内容 | 透明背景 | 主要优点 | 需要留意 |
|---|---|---|---|---|
| JPG | 照片、商品实拍、文章头图 | 不支持 | 兼容广、导出快 | 反复保存会累积损失 |
| PNG | 截图、图标、文字、透明素材 | 支持 | 无损、边缘清晰 | 照片文件往往较大 |
| WebP | 网页照片、透明网页素材 | 支持 | 用途均衡、网页支持成熟 | 部分旧编辑软件支持有限 |
| AVIF | 对体积敏感的现代网页照片 | 支持 | 高压缩潜力 | 编码较慢，需验证目标环境 |
按真实内容选择，而不是只看扩展名
相机照片、人物照和带自然纹理的商品图包含大量颜色渐变，通常从 JPG 或有损 WebP 开始。后台截图、二维码、带小字号文字的教程图更在意边缘清楚，PNG 往往比低质量 JPG 更可靠。Logo 若需要叠在不同背景上，应保留透明 PNG 或透明 WebP。
一张图也可能需要多个版本。例如商品主图可以保留高质量 JPG 作为归档，网站使用 WebP，第三方平台上传符合其要求的 JPG。格式选择是交付策略，不是对原始素材的一次性替换。
- 要在聊天软件、办公软件和老旧后台之间传递：优先 JPG 或 PNG。
- 只用于自己可控的网站：比较 WebP 与 AVIF，并提供必要的回退。
- 素材需要继续抠图、排版或修改：保留 PNG、PSD 等编辑源文件。
用同一组条件做有效比较
比较格式时最常见的错误，是拿不同尺寸、不同裁切或不同画质的文件直接比较体积。先固定宽高，例如统一为 1600×1200，再从较高质量逐步下调。每次同时观察文件大小、人物皮肤、发丝、文字边缘、天空渐变与阴影区域。
网页图片还要放进真实页面检查。独立看图时不明显的色带、白边和模糊，在深色背景、高密度屏幕或放大商品图时可能立刻暴露。
- 复制一份源文件，确定目标页面实际需要的最大像素尺寸。
- 分别输出 JPG、WebP；需要透明时再加入 PNG 或透明 WebP。
- 在相同显示尺寸下比较细节，排除视觉上不合格的版本。
- 记录合格文件的体积和目标平台兼容性，再决定最终格式。
兼容性与回退方案
浏览器支持并不等于整个工作流都支持。内容管理系统可能重新压缩图片，邮件客户端可能不显示新格式，设计软件也可能在导入时丢失色彩或透明信息。交付给别人之前，应在对方真正使用的软件中打开一次。
网站可以通过图片元素提供多种来源，让支持 AVIF 或 WebP 的浏览器使用新格式，同时保留 JPG 或 PNG 回退。社交平台和电商后台则应遵守其上传说明；平台会二次处理时，没有必要为了极小的体积差异牺牲稳定性。
常见问题
WebP 一定比 JPG 小吗？
不一定。结果取决于编码器、质量、尺寸和图片内容。应在相同尺寸、相近视觉质量下比较，而不是只比较默认导出结果。
AVIF 可以直接作为所有网站图片吗？
可以用于已验证的现代环境，但仍要检查内容管理系统、图片 CDN、社交分享抓取和旧版软件。无法控制这些环节时，保留 WebP 或 JPG 回退更稳妥。
为什么截图转 JPG 后文字发虚？
JPG 的有损压缩会在高对比边缘产生模糊和杂点。包含小字、线条或界面的截图通常更适合 PNG，或使用较高质量的 WebP。