浏览器端图片转换的工作原理
每次转换都是完全在 JavaScript 中运行的四步流水线。无需下载编解码器库 — 浏览器内置的 Canvas API 负责解码和重新编码。
- 将每个上传的文件读取为 Blob，并创建对象 URL，使浏览器无需将字节复制到服务器即可解码。
- 在离屏 Canvas 元素上绘制解码后的图片，应用调整大小约束，同时保持原始宽高比。
- 调用
canvas.toBlob(回调, 目标MIME类型, 质量)重新编码像素。PNG 输出始终无损；JPEG 和 WebP 遵循质量滑块设置。 - 显示带有输出尺寸和文件大小的前/后缩略图，然后提供每张图片的下载按钮或整批的单个 ZIP 下载。
为什么要转换图片格式？
- 从 PNG 切换到 WebP 在质量 0.8 时可将典型文件大小减少 25–35%，无可见质量损失，直接降低页面重量并改善 Core Web Vitals LCP 分数。
- PNG 保留 JPEG 会丢弃的透明度，因此 PNG→JPEG 会将透明像素渲染在白色背景上 — 适用于目标（电子邮件、旧 CMS）不接受 PNG 的情况。
- 社交平台和广告网络有严格的格式要求：Facebook 和 LinkedIn 对照片偏好 JPEG；Twitter 的 OG 预览流水线支持 WebP；部分广告服务器拒绝非 JPEG 创意素材。
- 在上传到 CMS 或 DAM 之前，将混合格式图片批次（PNG 截图、JPEG 照片、WebP 导出）标准化为单一格式，可消除摄取流水线中的格式处理复杂性。
常见应用场景
当源格式与目标格式要求不匹配时，就需要格式转换。
- 为 Shopify 或 WooCommerce 商店准备产品图片 — JPEG 原图转换为质量 0.85 的 WebP 用于店面展示，保留 PNG 用于印刷导出。
- 在嵌入 React 或 Next.js 构建之前将设计师提供的 PNG 导出转换为 JPEG 或 WebP，使框架的图片优化器从更小的源文件开始。
- 批量处理 QA 测试运行的截图文件夹 — PNG 转换为质量 0.9 的 JPEG，以减少附加到 Bug 跟踪器工单之前的存档大小。
实际案例：2 MB PNG → 300 KB WebP
一张 2 MB、2400×1600 像素的 PNG 主图是营销落地页上的常见负担。
将 PNG 拖入此处，选择 WebP 作为目标格式，将质量设置为 0.8，并可选择将最大宽度设置为 1200 以将像素尺寸减半。Canvas 流水线以 1200×800（保持比例）绘制图片，重新编码为 WebP，输出卡片显示结果 — 通常为 280–320 KB，减少 85%。点击卡片上的下载，或在转换多张图片后批量下载 ZIP。
支持哪些格式？
源图片：浏览器可以解码的任何格式 — PNG、JPEG、WebP、GIF 和 BMP 都被接受。输出格式：PNG（无损）、JPEG 和 WebP。AVIF 输出目前不受支持，因为 Canvas API 编码器仅在 Chrome 105+ 中可用，在 Safari 和 Firefox 中不存在；计划在未来版本中添加基于 WASM 的 AVIF 路径。
这是在我的设备上处理的吗？
是的。该页面使用浏览器的原生 Canvas API 和 Web File API。不会将任何图片数据发送到服务器；转换流水线完全在您的浏览器标签页中运行。您可以打开 DevTools 并查看 Network 面板来验证 — 页面加载后没有任何出站请求。
PNG 和 JPEG 的质量差异是什么？
PNG 是无损格式 — 每个像素在编码周期中完整保留。JPEG 使用 DCT 压缩，丢弃眼睛很少注意到的细节；质量 0.8 是常见的最佳平衡点，大多数观看者察觉不到与原始图片的视觉差异，但文件比 PNG 小 4–6 倍。WebP 可以无损和有损两种模式运行；这里的质量滑块驱动有损编码器，质量 0.85 在自然照片上通常比 JPEG 0.85 好 25–30%。
AVIF 支持何时到来？
通过 canvas.toBlob(…, 'image/avif') 进行 AVIF 编码目前仅在 Chrome 105+ 中有效；Safari 和 Firefox 不支持。未来版本将使用轻量级 WebAssembly 编码器添加可选的 AVIF 路径，使该功能在所有浏览器中都能使用。在此之前，AVIF 选项显示为「即将推出」，WebP 编码器（在现代浏览器中得到普遍支持）是推荐的下一代替代方案。
拖入图片，选择格式，转换。一切都在您的标签页中运行 — 无上传，无账户，无需等待服务器。