JPEG、PNG、WebP怎么选？照片和截图的实用保存方法
本文在AI辅助下由原文翻译而成。请结合原文核对专业术语和公式。
图片文件大，并不代表读起来更清楚。博客照片全部保存为PNG，可能增加不必要的体积；文字很多的截图转成JPEG，又可能让小字边缘变脏。先问自己：这张图最重要的是照片细节、清晰文字，还是透明背景？保留原图，用发布副本比较，比不断覆盖同一个文件更可靠。
按关键内容选择候选格式
MDN图片格式指南介绍了JPEG的有损压缩、PNG的无损压缩和透明度，以及WebP的有损、无损和透明度支持。无损表示保留被编码的像素，不代表能恢复原图本来就没有的清晰细节。
| 图片内容 | 先比较 | 重点检查 |
|---|---|---|
| 风景、食物等照片 | JPEG与有损WebP | 天空渐变、暗部、细纹 |
| 截图、菜单、说明图 | PNG与无损WebP | 小字边缘与细线 |
| 透明标志或图标 | PNG或WebP | 曲线边缘和背景交界 |
先统一尺寸，再比较容量
假设文章最多以1,200像素宽度显示图片，两种候选文件都先导出到这个宽度。如果其中一张缩得更小，就会把像素数量的影响误认为格式的优势。给副本起清楚的名称，例如photo-jpeg和photo-webp，并记录实际容量。不同软件中“质量80”的含义可能不同，不能把相同数字当作相同画质。
- 复制原图，确定发布尺寸。
- 导出两种合适的格式，记录文件大小。
- 在100%显示下查看小字、脸部、边界和阴影。
- 在文章实际宽度及手机上再次检查。
- 必要信息变得难读时，即使文件更小也不采用。
这是可以在自己的图片上重复进行的比较。别人的测试节省了多少容量，不代表每张图都能节省同样比例。
格式转换也可能让文件变大
Google WebP常见问题解释了转换后体积增加的情况。已经有损压缩的照片转换为无损格式，可能连现有压缩痕迹一起完整保存，反而更大。把JPEG变成PNG不会找回丢失的细节。最好从质量较好的原图完成编辑，再导出发布文件，减少反复有损保存。
检查透明边缘和真正上传后的文件
JPEG不能保留透明背景。白色页面上看着干净的标志，放到深色主题上可能出现浅色边。因此应在浅、深两种背景上检查。发布平台还可能重新转换或缩小图片，最后要从已发布页面打开图片，确认文字和透明部分，而不是只看电脑中的副本。
一篇文章完全可以混用格式：操作截图用无损图片，配套照片用有损图片。扩展名统一没有信息清晰重要。把原图、发布副本和尺寸记录放在一起，以后更改版式时，就不必拿已经压缩的网页图片当作编辑原稿。
相关实用文章
为帮助理解本文而制作的原创插画。