图片格式与压缩入门：JPG、PNG、WebP 怎么选
同一张照片，存成 JPG 只有几百 KB，存成 PNG 却可能有几 MB。这不是 PNG 更差，是两种格式的压缩思路不同。搞懂有损和无损、透明通道、浏览器兼容性这几件事，选格式就不用再猜。
位图基础：像素、位深与颜色
照片和截图都是位图。画面被切成网格，每个格子就是一个像素，记录一种颜色。颜色由红绿蓝三个通道描述，每通道 8 位，合计 24 位真彩。再加上 8 位透明度（Alpha），就是 32 位图像。分辨率决定像素总量，位深决定每个像素能表达多少种颜色。压缩格式要做的只有一件事：用更少的字节描述同样的像素。各种格式之争，争的其实是省字节的策略。
JPG：为照片而生的有损压缩
JPG（严格说叫 JPEG）用有损压缩。图像被切成 8×8 小块做离散余弦变换（DCT），丢掉人眼不敏感的高频细节，再用色度抽样进一步省空间。这套流程对照片效率很高，质量 80 左右几乎看不出损失。它有两个弱点。第一，不支持透明，透明区会被填成白底或黑底。第二，文字、图标、线稿这类硬边缘内容会被 8×8 分块切割，边缘发毛、颜色溢出，也就是振铃伪影。所以 JPG 适合照片，不适合图标和截图。
PNG：无损与透明通道
PNG 走另一条路：无损压缩。它用 DEFLATE 算法（与 ZIP 同源）压缩重复数据，解压后和原图逐像素一致。截图、UI 界面、图标、二维码，凡是不许糊的内容都适合它。PNG 还原生支持 8 位 Alpha 透明通道，做 Logo 和贴图素材离不开它。纯色图标可以用 PNG-8 调色板模式进一步减小体积。代价是这套思路对付不了噪点丰富的照片，同一张照片存成 PNG 往往比 JPG 大好几倍。
WebP 与 AVIF：新一代格式的优势与兼容性
WebP 由 Google 在 2010 年推出，同时提供有损与无损两种模式。同等观感下它通常比 JPG 小 25%–35%，还支持透明和动画。AVIF 基于 AV1 视频编码的帧内压缩，压缩率更高，但编码慢，软件支持也还在补齐。兼容性方面，主流浏览器从 2020 年的 Safari 14 起全部支持 WebP，网页可以放心用。AVIF 在各家最新浏览器里可用，但旧系统和不少本机软件可能打不开。务实的分界线是：给浏览器看的图用新格式，要打印或长期保存的图用 JPG。
怎么选：一张决策表
| 内容类型 | 推荐格式 | 理由 |
|---|---|---|
| 照片、摄影作品 | JPG / WebP | 有损压缩对渐变色效率最高。 |
| 截图、软件界面 | PNG | 无损保住文字和线条的锐利。 |
| 图标、Logo（需透明） | PNG / WebP | 需要 Alpha 透明通道。 |
| 网页大图、Banner | WebP / AVIF | 体积最小，浏览器兼容已无障碍。 |
| 二维码、条形码 | PNG | 任何压缩伪影都可能影响识别。 |
| 需打印的照片 | 高质量 JPG | 通用性最好，打印设备都认。 |
压缩策略与常见误区
压缩做得好不好，差别往往在流程，不在参数。
- 先缩尺寸，再压缩。页面显示区域只有 800px 宽，就不要保存 4000px 的原图。只改尺寸这一步就能砍掉九成以上的数据量。用图片缩放工具改尺寸，再用图片压缩工具压体积，顺序不要颠倒。
- 质量 70–85 是甜点区。大部分 JPG/WebP 在这个区间肉眼几乎看不出损失。压到 60 以下开始出现块状伪影和色彩断层，再降就糊了。
- 一次到位，避免反复另存。每把一张 JPG 重新保存一次，就要重新经历一次有损量化，画质单调下降，这叫世代损失。需要反复修改的图，编辑期间用 PNG 这类无损中间格式，发布时再转 JPG。
最后澄清几个常见误区。把 JPG 改名成 PNG 不会变无损，格式由内部数据决定，改名只添乱。PNG 转 JPG 会永久丢失透明通道。已经糊掉的图放大一百倍也不会变清晰，压缩丢掉的细节找不回来。与其事后补救，不如在用图片格式转换工具导出时就选对格式。
常见错误与排查
图片的问题多半在发出去之后才暴露，下面几个错误返工成本最高，导出前逐条对照。
- 把带文字的截图存成 JPG。错在：JPG 的 8×8 分块压缩会切过硬边缘，文字和细线四周发毛，出现振铃伪影。红底白字的截图还会渗出色斑。缩略图上看不出来，对方一放大就露馅。正确做法：截图、界面、文档快照一律存 PNG，无损保住每个像素。确实要控体积，用 WebP 无损模式。
- 把需要透明的 Logo 导出成 JPG。错在：JPG 没有 Alpha 通道，导出时透明区被填成白底。贴到深色页面上就多出一圈白色方块，事后用抠图工具也很难找回原始边缘。正确做法：从设计源文件重新导出为 PNG 或 WebP，保留透明通道，不要拿白底 JPG 硬抠。
- 二维码存成高压缩 JPG，还随手缩小。错在：扫码靠黑白模块的精确几何。压缩伪影和缩放插值会让模块边缘粘连，印刷出来十次有八次扫不出，问题往往到贴上墙才发现。正确做法：二维码用 PNG 按原始像素导出，不做缩放。打印前先在几台手机上实测。
- 用聊天工具传图没勾“原图”，拿压缩图继续编辑。错在：社交和聊天软件默认重压图片，会降分辨率，再压一次质量。你拿到的是二手图，接着编辑再导出就是二次有损，丢掉的细节回不来。正确做法：传输时勾选“原图”，或改用文件方式。编辑期间用 PNG 存中间稿，发布时才转 JPG 或 WebP。
- 把 WebP 或 AVIF 发给打印店。错在：浏览器早就支持新格式，但打印店的修图和排版软件常常打不开，或者颜色对不上，来回沟通浪费一天。正确做法：凡是交给别人打印或长期归档的图，导出高质量 JPG（质量 90 以上）。新格式只用在网页上。
- 网页头图直接丢一张几 MB 的 PNG 原图。错在：相机原图和设计稿导出的 PNG 常有 3–8MB，手机用户要等好几秒，跳出率跟着涨。“原图清晰”不是发大文件的理由。正确做法：先缩到显示宽度，多留一倍给高分屏。再转 WebP，质量 80 左右，体积通常降到两三百 KB。