浏览器端图片转换的工作原理
每次转换都是一个在浏览器中运行的四步流水线。对于 JPEG 和 PNG，浏览器自己的 Canvas API 直接处理编码。对于 Safari 上的 WebP 和所有浏览器上的 AVIF，页面按需加载轻量级 WebAssembly 编解码器 — 仍然全部在本地，您的图片绝不会离开设备。
- 将每个上传的文件读取为 Blob，并创建对象 URL，使浏览器无需将字节复制到服务器即可解码。
- 在离屏 Canvas 元素上绘制解码后的图片，应用调整大小约束，同时保持原始宽高比。
- 调用
canvas.toBlob(callback, targetMimeType, quality)为 PNG、JPEG 和 Chrome/Firefox WebP 重新编码像素。对于 Safari WebP 和 AVIF 编码，首次使用时加载 WebAssembly 编解码器工作线程并在后台线程中处理编码。PNG 输出始终无损；JPEG、WebP 和 AVIF 遵循质量滑块，该滑块直接映射到编码器的量化设置。 - 显示带有输出尺寸和文件大小的前/后缩略图，然后提供每张图片的下载按钮或整批的单个 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。AVIF 输出通过按需在所有浏览器中加载的 WebAssembly 编码器支持 — 无需原生 Canvas 编码器。
这是在我的设备上处理的吗？
是的。该页面使用浏览器的原生 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 输出如何工作？
AVIF 编码使用一个按需加载的 WebAssembly 编解码器，在您首次选择 AVIF 格式时加载 — 无需插件，无需浏览器标志，无需等待未来的 Chrome 版本。WASM 二进制文件来自我们自己的源站，在后台线程中完整编码您的图像，并返回一个标准的 image/avif blob 供下载。唯一的网络请求是编解码器本身的一次性获取；任何图像数据都不会离开您的设备。加载后，编码器会在会话期间保持缓存，以便后续转换更快。在同等质量下，AVIF 文件通常比 WebP 小 20-30%，比 JPEG 小 50%，使其成为性能敏感型网站的最佳选择。
拖入图片，选择格式，转换。一切都在您的标签页中运行 — 无上传，无账户，无需等待服务器。