很多人会把 PNG 和 JPG 当成两种“图片后缀”，需要时互相转换。但 PNG 转 JPG、JPG 转 PNG 之后，透明背景、文件大小和画质都会发生变化。
理解这两个格式的差异，可以避免常见问题：为什么透明背景变白了？为什么 JPG 转 PNG 后文件变大了？为什么截图转 JPG 后文字变糊了？
PNG 和 JPG 的核心区别
| 对比项 | PNG | JPG |
|---|---|---|
| 压缩方式 | 无损压缩 | 有损压缩 |
| 透明背景 | 支持 Alpha 透明通道 | 不支持透明 |
| 适合内容 | 截图、图标、文字、透明 logo | 照片、商品图、自然场景 |
| 文件体积 | 照片类图片通常较大 | 照片类图片通常更小 |
| 画质风险 | 基本保留原始像素 | 质量过低会出现模糊和色块 |
PNG 转 JPG 会发生什么？
PNG 转 JPG 时，最重要的变化是透明背景会消失。因为 JPG 没有 Alpha 通道，透明像素必须被填充成某种颜色。ToolGarden 默认会把透明区域填充为白色。
- 透明背景会变成白色背景。
- 文件体积通常会变小，尤其是照片类 PNG。
- 质量参数会影响细节，质量越低体积越小，但越容易糊。
- 截图、二维码、文字图片转 JPG 后，边缘可能出现噪点或压缩块。
JPG 转 PNG 会发生什么？
JPG 转 PNG 不会恢复已经丢失的细节，也不会自动生成透明背景。它只是把当前 JPG 像素重新保存为 PNG。因为 PNG 是无损压缩，照片类 JPG 转 PNG 后文件经常会变大。
- 不会恢复 JPG 压缩时丢失的画质。
- 不会自动抠出透明背景。
- 文件体积可能明显变大。
- 适合需要继续编辑、避免再次有损压缩的场景。
技术实现：ToolGarden 怎么处理 JPG 和 PNG 转换？
ToolGarden 的图片转 JPG 和图片转 PNG 工具都在浏览器本地运行。源图会被解码到 Canvas，再根据目标格式导出。
- 本地读取：图片文件通过浏览器解码，不上传到服务器。
- 格式识别：根据 MIME 类型和扩展名识别 JPG、PNG、WebP、GIF、BMP、SVG、AVIF 等输入。
- Canvas 重绘：源图会被绘制到同尺寸 Canvas，保留原始宽高。
- 转 JPG：透明区域会先填充为白色，工具会先用白色填充画布背景，再绘制图片，避免透明像素变成黑色或不可控颜色。
- JPG 质量：使用 image/jpeg 导出时传入质量参数，控制文件体积和画质。
- 转 PNG：使用 image/png 导出，不使用质量滑块，并尽量保留透明通道。
- 输出校验：导出后检查 JPG 或 PNG 文件签名，确认浏览器实际生成了目标格式。
什么时候 PNG 转 JPG？什么时候 JPG 转 PNG？
| 需求 | 建议 | 原因 |
|---|---|---|
| 照片体积太大 | PNG 转 JPG 或 WebP | 照片适合有损压缩，文件会小很多 |
| 透明 logo | 不要转 JPG | JPG 会丢失透明背景 |
| 截图要保持文字清晰 | 保留 PNG 或高质量 WebP | JPG 容易让文字边缘发糊 |
| JPG 需要继续编辑 | 可转 PNG | 避免多次 JPG 有损保存 |
| 上传平台只接受 JPG | PNG 转 JPG | 接受透明变白或先换背景色 |
总结
PNG 转 JPG 适合压缩照片类图片，但会丢失透明背景；JPG 转 PNG 适合后续编辑和无损保存，但不会让画质变好，也可能让文件变大。
转换前先判断图片内容：照片用 JPG/WebP，截图和透明素材用 PNG/WebP。格式选对，才不会在体积和清晰度之间反复踩坑。