PNG·JPEG·WebP 的区别与选用｜图片格式转换基础

三种格式的特点

区别的核心在于“无损还是有损”和“是否支持透明”这两点。PNG 压缩时不丢弃任何信息，画质完美，但照片的体积会因此变大。JPEG 通过丢弃人眼不易察觉的信息来缩小体积，对照片非常高效，但在轮廓清晰的图表或文字上，噪点（蚊式噪声）会很明显。

拿不准时怎么选

• 需要透明 → PNG 或 WebP（不能选 JPEG）
• 照片，只想尽量小 → WebP，其次 JPEG
• 带文字的标志·图表·截图 → PNG 或 WebP 无损
• 对方的环境较旧或不确定（交给印刷厂、公司内部老旧的业务系统等）→ PNG 或 JPEG
• 放在网站上的图片 → 首选 WebP

主流浏览器都已支持 WebP，所以用于网页展示时基本可以首选。另一方面，要导入对方的应用或系统时，仍有不支持的情况。记住“放网页用 WebP，作为文件交给别人用 PNG／JPEG”就不会犹豫了。

画质设置多少合适

JPEG 和 WebP 有画质（quality）设置。越接近 100 劣化越少，越低文件越小。实用的参考如下。

在浏览器中转换的步骤

1. 1

   选择图片

   选择手边的 PNG、JPEG、WebP 等图片文件。手机拍的照片也可以直接使用。

2. 2

   选择转换后的格式

   从 PNG·JPEG·WebP 中选择，可参考上面的选用方法。

3. 3

   调整画质

   JPEG 和 WebP 可以使用画质滑块。PNG 是无损压缩，没有画质设置。

4. 4

   比较转换前后的大小再下载

   会显示转换后的文件大小和减少的量。如果没有达到预期效果，就换一种格式或画质再试一次。

转换处理全部在浏览器内完成，图片不会上传到服务器。

转换时需要注意的事项

• 转换成 JPEG 会失去透明。原本透明的部分会被填成白色，想保留透明请选择 PNG 或 WebP。
• 有损压缩无法还原。即使把 JPEG 转成 PNG，已丢失的信息也不会恢复，只会让体积变大。
• 反复重新压缩会让劣化累积。编辑过程中的中间文件用 PNG 等无损格式保存，在最后导出时再转成有损格式，是基本做法。
• 一定要保留原图。这样以后还能用别的格式·别的画质重新导出。

“转成 PNG 就会变高清”是很常见的误解。PNG 是不让画质劣化的格式，而不是让已经劣化的图片恢复的格式。想提高画质，需要回到原始数据，而不是转换格式。

AVIF·HEIC·GIF·SVG 该怎么定位

收到的图片不只有 PNG·JPEG·WebP。用 iPhone 拍的是 HEIC，从网页上保存的是 AVIF，这样的情况越来越多。了解每种格式“是为了什么而设计的”，就能更快地判断是否需要转换。

AVIF 打不开时的转换步骤见AVIF 格式的处理方法，让 iPhone 的 HEIC 照片能在 Windows 上打开的步骤见HEIC 转 JPEG 的方法，WebP 打不开时的排查见WebP 打不开时的解决方法。标志用的 SVG 原理完全不同，单独在SVG 与 PNG·JPEG 的区别中介绍。

转换后体积没有变小时要检查的地方

“换了格式却几乎没变小”是很常见的问题。原因大多不在格式，而在于图片本身的尺寸或内容。

• 像素数太大：4000px 宽的照片直接使用。缩小到显示所需的宽度，效果要大得多
• 照片保存成了 PNG：照片信息量大，无损压缩减不下来。改成 JPEG 或 WebP
• 图表或截图保存成了 JPEG：平坦区域多的图片，用 PNG 有时反而更小
• 对已经压缩过的图片再次压缩：已经没有可以削减的余地了

常见问题

PNG 和 JPEG 应该用哪个？

照片适合 JPEG；标志、图表、截图等轮廓清晰的图片，或需要透明的图片适合 PNG。JPEG 是有损压缩，有文字或细线时噪点会很明显。

转换成 WebP 能小多少？

取决于图片内容，但很多报告显示，在效果相近的情况下比 JPEG 小两到三成左右。不过效果因图片而差异很大，实际转换并比较体积是最可靠的。

转换后画质会下降吗？

转换成 PNG 是无损压缩，这一步不会劣化。JPEG 或 WebP 的有损设置会根据画质数值而劣化。画质在 85 左右的话，正常浏览时几乎感觉不到差别。

图片格式转换工具会上传图片吗？

不会。转换处理全部在浏览器内进行，图片文件不会发送到服务器。

想保留透明又想让文件变小怎么办？

请选择 WebP。WebP 支持透明，同时还能进行有损压缩，有时比透明 PNG 小很多。如果对方不支持 WebP，比较现实的做法是保持透明 PNG，同时减少像素数。

要不要转换成 AVIF？

如果是放在自己网站上的图片，是很有力的选择。但如果是作为文件交给别人，仍有打不开的环境，最好避免。不确定对方是谁时，选 JPEG 或 PNG 最稳妥。