一句话答案
PNG 大，是因为它想把像素保留得一模一样。JPG 小，是因为它被允许对照片做一些简化，而这些简化在最终显示尺寸下通常察觉不出来。
这种取舍是有意义的。PNG 大不代表「不好」，JPG 小也不代表「低画质」。它们解决的是不同的问题：
- PNG 适合像素必须保持精确的场景：截图、UI 录制、示意图、Logo、图标、透明图形，以及可能还要再编辑的源文件。
- JPG 适合照片类内容，需要上传、发邮件或者要求加载够快的时候。
- WebP 常常是更好的网页替代品，可以保留 PNG 那种透明，但文件更小。
一个常见的错误是「为了看起来更高级」什么都存 PNG。相机拍出的照片如果保存成 PNG，可能比 JPG 大好几倍，但在网页上看起来毫无区别。
为什么照片一存成 PNG 就爆炸
先来点粗略的像素账。一张 4000 × 3000 的图有 1200 万个像素。如果压缩前按 8 位 RGBA 存放，每个像素都要记录红、绿、蓝、Alpha 四个通道，大约就是 48 MB 的像素数据。
PNG 当然会压缩这些数据。W3C 的 PNG 规范把 PNG 描述为一种无损栅格格式，并定义了保持图像信息的过滤和压缩步骤。说人话就是：编码器会尝试预测或简化每一行像素，然后再压缩剩下的字节模式。
如果图里有重复模式，这一套跑得非常漂亮：
- 软件截图里的白色背景；
- UI 中反复出现的一个纯色蓝色按钮；
- 浅色页面上的黑色文字；
- 只有几种颜色的简单图表；
- 边上留着一圈透明的 Logo。
照片就是另一回事。人脸、街道、森林、商品面料、餐盘的照片里，相邻的像素虽然相似，但很少完全相同。总会有传感器噪点、纹理、阴影、镜头模糊、颗粒感、色彩变化和微小的边缘过渡。PNG 不能把这些细节丢掉，只能一个个地描述。
JPG 就是为了处理这种「照片式的杂乱」而生的。它可以简化细腻的颜色和纹理细节，尤其是那些观众不太会注意的地方。所以同一张照片可能是 12 MB 的 PNG，也可能是 1.5 MB 的 JPG，而放在博客里看起来完全一样。
按真实图像类型看 PNG vs JPG
按图像内容来选格式，而不是看文件后缀。
| 图像类型 | 更合适的格式 | 原因 |
|---|---|---|
| 用 PNG 导出的相机照片 | JPG 或 WebP | 照片细节让 PNG 变得很大，却几乎没有可见收益 |
| 商品市场用的商品照 | JPG | 兼容性好，也能满足上传限制 |
| 带菜单文字的截图 | PNG 或无损 WebP | 文字边缘保持锐利 |
| 带透明的 Logo | PNG、WebP 或 SVG | JPG 无法保留 alpha 透明 |
| 简单的图表或示意图 | PNG 或 SVG | 纯色和硬边缘容易压缩 |
| 网站的头图/主视觉 | WebP/JPG，有时用 AVIF | 现代有损格式能在显示尺寸下大幅减小体积 |
| 可编辑的源图 | PNG 或原始设计/RAW 格式 | 避免反复有损导出 |
| 严格的表单上传 | JPG 或 PNG | 用接收方真正接受的格式 |
很多文章在这一点上给了坏建议。「PNG 转 JPG」对于「照片型 PNG」没错，但并不适用于每一张 PNG。仪表盘截图、透明水印、App 图标、条形码——转成 JPG 后往往更差。
「无损」意味着精确，而不是自动小
无损压缩指的是解码出来的图像可以还原原始像素，但并不意味着文件就一定小。
可以把 PNG 想象成一个很认真的行李员。如果箱子里是十件一模一样的白衬衫，他能收得非常紧凑。可是如果里面是 1200 万件略有不同的物品，他就得一件一件地记账。
所以 PNG 擅长处理：
- 单色背景；
- 平涂色的插画；
- 反复出现的界面颜色；
- 锐利的文字；
- 色彩范围有限的调色板；
- 简单的透明蒙版。
而不擅长处理：
- 相机噪点；
- 皮肤纹理；
- 头发、织物、草地、树叶、云和食物；
- 里面嵌了照片的截图；
- 存成 PNG 的 AI 生成图；
- 带大量柔和阴影的商品抠图。
关键点是：PNG 的大小取决于内容。小的纯色图标存成 PNG 可以非常小；一张原分辨率的手机照片存成 PNG 就会变得很吓人。
为什么照片上 JPG 更小
JPEG 1 是围绕照片图像编码设计的。JPEG 官方概述里把最初的 JPEG 标准描述为一种带有照片图像编码选项的核心编码技术。MDN 也把 JPEG 归纳为静态图片有损压缩的合适选择。
实际原因很简单：JPG 被允许丢信息。
它不是随便乱丢像素。JPG 编码器会在设定的质量下寻找对人眼感知不太重要的细节，然后把它们去掉。所以 JPG 特别适合：
- 人像；
- 风景；
- 美食照；
- 房产照；
- 不带极小文字的商品照；
- 旅行照；
- 背景图。
而当图像里存在「精确的边缘」时，JPG 就不适合了：
- 小号的 UI 文字；
- 示意图；
- 线稿；
- Logo；
- 二维码；
- 带透明的阴影；
- 代码截图。
在这些图上，JPG 的瑕疵会以光晕、蚊状噪点、笔画发糊、硬边缘附近的颜色脏污等形式出现。要把这些瑕疵盖住，往往得把 JPG 质量拉得非常高，体积优势也就没了。
为什么截图往往更适合 PNG
这一点最容易把人绕晕：在很多照片上 PNG 比 JPG 大，但在截图里 PNG 反而可能更小、更干净。
一张设置页面的截图里可能有成千上万个像素是同一个背景色。它可能反复用同样的文字色、边框色、按钮色。PNG 的压缩最爱这种重复。结果就是又精确、又锐利，而且通常体积也不算大。
同一张截图存成 JPG，编码器就得处理到处都是的硬边缘。字母和图标周围要决定丢哪个细节。质量低时截图会显得脏；质量高时文件可能和 PNG 差不多大，有时甚至更大。
一个快速判断方法：
- 图里如果有可读文字，先试 PNG 或无损 WebP。
- 图里基本都是照片内容，先试 JPG 或 WebP。
- 图里既有截图又有照片，就同时导出 PNG 和 WebP/JPG，在人们实际看到的尺寸下对比。
透明是真功能，不是装饰
PNG 支持 alpha 透明。也就是说，每个像素可以完全不透明、完全透明或者部分透明。这对 Logo、图标、贴纸、抠图商品、水印、叠层、UI 素材来说都非常重要。
JPG 完全没有 alpha 通道。把透明 PNG 转成 JPG 时，透明的像素必须变成某种普通颜色。有的工具会压到白底，有的允许你自选背景，有的浏览器编码器会用自己的合成规则。不管哪种，结果都不再是一个「透明素材」。
所以不要因为 JPG 更小就把 PNG Logo 转成 JPG。字节可能省下来了，但排版可能就坏了。
更好的选择：
- 素材本身是矢量的话，Logo 和图标用 SVG。
- 需要最大兼容性的透明素材，用 PNG。
- 网站接受 WebP，又想在保留透明的同时把文件做小，用 WebP。
- 流程支持并且你能验证兼容性时，用 AVIF。
Google 的 WebP 文档也指出 WebP 同时支持有损、无损和透明。在现代网站上，它成为许多透明 PNG 的实用替代品的原因就在这里。
那张照片一开始为什么会变成 PNG
大部分体积过大的 PNG 照片并不是有意选的格式。往往是别的工具把它导成 PNG 的。
常见情形：
- 设计工具因为整个画布带有透明，就把照片图层导出成了 PNG。
- 截图工具拍下了一整个包含大图的浏览器页面。
- AI 生图工具默认下载 PNG。
- CMS 或编辑器把粘贴进来的图片转成了 PNG。
- 手机或桌面应用为了避免代际损耗，把编辑后的照片存成了 PNG。
- 商品抠图存成了透明 PNG，尽管最终摆放场景其实是纯色背景。
在转换前，先问两个问题：
- 它到底是一张照片吗？ 是的话，JPG 或 WebP 通常合适。
- 透明还重要吗？ 重要的话，就选 WebP、AVIF、PNG 或 SVG，而不是 JPG。
这两个问题过一遍，就能避开大部分错误的转换。
JPG 能小多少？
老实说没有一个固定的百分比。省下来的体积取决于尺寸、内容、导出质量、编码器行为，以及原 PNG 是不是已经用了受限调色板。
一些实用的预期：
| 原始 PNG | JPG 大概结果 | 需要检查的地方 |
|---|---|---|
| 全分辨率照片 PNG | 通常小 60%~90% | 皮肤、面料、阴影、渐变 |
| 网站头图的 PNG | 缩放 + JPG/WebP 后往往小得多 | 边缘、裁切、DPR 下的锐度 |
| 带文字的截图 | 可能更小，也可能更差 | 字符边缘和 UI 边框 |
| 透明 Logo | JPG 转换不安全 | 透明丢失 |
| 平涂色的图表 | PNG 本身可能已经很紧凑 | 轴上的文字与线条清晰度 |
| 嵌了照片的混合截图 | WebP 可能同时打赢两者 | 文字区和照片区 |
PhotoTools 的 PNG 转 JPG 默认质量是 90%，对于照片型 PNG 是一个不错的起点，通常不会出现明显瑕疵。日常网页照片用 80~88 也可以。商品标签、人脸、暗调图片上，可以调高质量再对比。
什么时候可以把 PNG 转成 JPG
当下面几点都成立时，把 PNG 转成 JPG：
- 图片基本上是照片。
- 不需要透明。
- 需要跟表单、邮件、市场平台或老系统有广泛兼容性。
- 当前的 PNG 造成了上传超限、页面加载慢、附件超大等问题。
- 你还保留着原始 PNG 或源文件。
例子：
- 一张 9 MB 的 AI 生成 PNG，需要上传到博客文章里。
- 一张不小心从设计文件里以 PNG 格式导出的 14 MB 商品照。
- 一张 20 MB 的编辑后手机照片，需要塞进邮件附件限制里。
- 一张 6 MB 的房源照片，正拖慢一个房源页面。
不要仅仅因为「它是 PNG」就转成 JPG，要因为内容和用途让 JPG 成为合适的交付副本才转。
什么时候不要把 PNG 转成 JPG
当图像依赖精确的像素时，保留 PNG，或者用 WebP/AVIF/SVG：
- 带可读文字的软件截图；
- App Store 截图；
- 代码截图；
- UI 文档；
- 示意图和图表；
- 二维码和条形码；
- Logo 与图标；
- 透明叠层；
- 水印图形；
- 会被反复编辑的文件。
如果 PNG 太大但还需要透明，别用 JPG，试试 PNG 转 WebP 或 PNG 转 AVIF。如果是超大截图，改格式之前先把它缩到真实显示宽度。如果是 Logo，看看有没有对应的 SVG。
一个实用的 PhotoTools 工作流
当你手里有一个装满大 PNG 的文件夹，需要更小的交付文件时，可以试试这个流程：
- 按内容分类。 把照片、截图、透明素材、Logo 分成不同组。不能给所有图套同一套导出参数。
- 把照片型 PNG 转成 JPG。 用 PNG 转 JPG，从质量 90 开始，检查结果。只要图在真实显示尺寸下仍然干净，就可以往下调质量。
- 透明的网页素材用 WebP。 Alpha 通道很重要而且你的网站接受 WebP 时，就用 PNG 转 WebP，别压成 JPG。
- 过大的图先缩尺寸。 显示宽 900px 的位置放一张 5000px 宽的图，无论什么格式都是在浪费像素。
- 批处理要小心。 一次转多张没问题，但难处理的情况要单独复核：文字、人脸、渐变、透明边缘、商品标签。
PhotoTools 用浏览器的图像 API 完成转换。转换器用 createImageBitmap 解码源图，把它绘制到 OffscreenCanvas，再用 convertToBlob 按选择的格式和质量导出。页面会显示原图和输出的体积，批量结果也可以打包成 ZIP 下载。
一份快速判断清单
导出前对照看看：
| 问题 | 是 | 否 |
|---|---|---|
| 是相机照片 / 照片型图像吗？ | 试 JPG 或 WebP | 按内容试 PNG、WebP、SVG、AVIF |
| 需要透明吗？ | 避开 JPG | JPG 也可以 |
| 里面有小号可读文字吗？ | 优先 PNG 或无损 WebP | 有损 JPG/WebP 也行 |
| 相对显示尺寸文件是不是太大？ | 先缩尺寸 | 再考虑转换/压缩 |
| 目标网站不接受 WebP/AVIF 吗？ | 用 JPG 或 PNG | 在有意义的地方用现代格式 |
| 之后还要再编辑吗？ | 保留一份无损/源文件 | 只导出一份交付副本 |
最稳妥的习惯是：把 PNG 或者原始源文件作为「母本」保留，再单独导出一份 JPG/WebP 用作交付副本。这样既能拿到上传用的小文件，也不会失去干净的源。
结论
PNG 之所以比 JPG 大，是因为你让它去存不合适的图。PNG 擅长精确地保留像素、透明和重复的图形模式；JPG 擅长把照片压得足够小，能在网上到处跑。
如果文件是照片而且不需要透明，把 PNG 转成 JPG 或 WebP。如果是截图、Logo、示意图或透明素材，就别默认「JPG 是升级」。按像素真正的内容和文件要工作的场景来选格式。