网站上的每一张图片，都是在体积、画质和功能之间做取舍。PNG、JPG 和 WebP 几乎覆盖了所有场景，但它们并不能随意互换。这篇文章讲清楚每种格式擅长什么，以及怎么选。
先给结论
- JPG：照片和复杂图像，体积比像素完美更重要时使用。
- PNG：截图、图表、Logo，以及需要透明或无损细节的场景。
- WebP：希望在同画质下体积最小，同时需要透明通道时使用。
快速对比
| 格式 | 压缩方式 | 透明通道 | 适合用途 |
|---|---|---|---|
| PNG | 无损 | 支持 | 截图、图形、Logo |
| JPG | 有损 | 不支持 | 照片、分享、邮件 |
| WebP | 有损/无损 | 支持 | 现代网站、更小体积 |
PNG：像素清晰，文件更大
PNG 是无损格式，每个像素都会完整保留，因此非常适合截图、界面稿、图表和边缘锐利的 Logo。PNG 还支持透明通道，透明背景不会变成白底。
代价是体积。同一张照片存成 PNG，往往会比 JPG 大五到十倍，因为照片里有大量细微的颜色变化，无损压缩无法丢弃这些信息。所以 PNG 不适合作为照片图库的默认格式。
适合用 PNG 的情况：
- 图片包含文字、细线或锐利边缘；
- 需要透明背景；
- 之后还会继续编辑，希望避免反复有损压缩。
JPG：照片更小，没有透明
JPG 使用有损压缩，会丢弃人眼不太容易察觉的细节，对照片非常有效。高质量的 JPG 往往和原图看起来几乎一样，体积却小很多。
代价也很明确：JPG 没有透明通道，而且每次保存都会再损失一点细节。反复编辑并保存 JPG 不是好主意。文字和锐利边缘在低质量下也容易出现明显瑕疵。
适合用 JPG 的情况：
- 图片是照片；
- 体积比像素级精确更重要；
- 不需要透明背景。
质量设置在 80–90 之间通常是甜点区。低于 70 时，人脸、天空和渐变上的瑕疵会变得明显。
WebP：现代网站的默认选择
WebP 同时支持有损和无损压缩，也支持透明通道。在相近的视觉质量下，它通常比 JPG 小 25%–35%，还可以替代需要透明通道的 PNG。
浏览器支持已经不是问题：当前 Chrome、Firefox、Safari 和 Edge 都能显示 WebP。只有需要兼容非常老的浏览器时才需要 JPG/PNG 回退，大多数网站已经不需要。
适合用 WebP 的情况：
- 希望网页图片体积最小；
- 需要透明背景；
- 目标用户使用现代浏览器。
怎么快速做决定
- 是照片吗？ 优先 JPG 或 WebP。
- 需要透明吗？ 用 PNG 或 WebP。
- 是截图或 Logo 吗？ 用 PNG 或无损 WebP。
- 带宽重要吗？ 优先 WebP，其次 JPG。
- 还会反复编辑吗？ 保留 PNG 母版，导出压缩副本。
可以在浏览器里用 图片格式转换工具 在三种格式之间转换。它会保留原始尺寸，并允许调节 JPG 和 WebP 的质量。
常见错误
- 把截图存成 JPG。 文字边缘会变糊，体积也不一定小多少，应该用 PNG 或 WebP。
- 把照片存成 PNG。 文件大很多，画质却没有可见提升，应该用 JPG 或 WebP。
- 用 4000px 的图片显示在 400px 的位置。 先缩放再压缩，不要让浏览器下载根本不会显示的像素。
- 反复保存 JPG。 每次保存都会叠加压缩瑕疵，保留原图，只导出一次。
- 忘记透明通道。 JPG 会把透明区域压成白色，放在彩色背景上的 Logo 会很难看。
如果上传前需要缩小大图，可以用 图片压缩工具 在本地完成缩放和压缩。如果在准备网站图标，Favicon 生成器 可以从一张图片生成全部尺寸。
一条简单的规则
能用 WebP 就用 WebP；照片用 JPG；截图、图形和透明图用 PNG。有目的地转换，先缩放再压缩，需要反复编辑的文件保留一份无损母版。