浏览器端图片压缩的工作原理
每次压缩都完全在 JavaScript 中运行。无需下载任何编解码器库，也不涉及任何服务器。浏览器内置的 Canvas API 对图片进行解码，以较低画质重新编码，并将 Blob 交给页面用于预览、下载或打包为 ZIP。由于每个步骤都在标签页的沙盒内进行，原始文件永不接触网络。
- 将每个上传的文件读取为 Blob，并创建对象 URL，使浏览器可以在本地解码，无需将字节复制到服务器或写入磁盘。
- 以原始像素尺寸将解码后的图片绘制到离屏 Canvas 元素上，准备重新编码。
- 调用
canvas.toBlob(callback, mimeType, quality)重新编码像素。在画质模式下，滑块值直接映射到编码器的量化设置；在目标大小模式下，页面对画质值进行二分查找，直到输出 Blob 符合您的字节预算。 - 显示包含原始大小、压缩后大小和节省百分比的前后对比，然后提供每张图片的单独下载或整批次的单个 ZIP 下载。ZIP 使用 fflate（一个首次使用时加载的 8 KB 库）在内存中构建。
为什么要压缩图片？
- 更小的图片加载更快。将 4 MB 的主图压缩到 600 KB 可直接改善最大内容绘制（LCP），这是 Google 用于排名的 Core Web Vitals 指标之一。一个页面上有多张照片时，节省效果叠加，带来更快的首屏渲染。
- 上传和附件大小限制无处不在。许多 CMS 平台、工单工具和电子邮件系统会拒绝超过 1 或 2 MB 的文件。快速压缩一次就能将照片控制在限制以内，无需打开完整的图片编辑器。
- 带宽和存储在规模化时需要花钱。以画质 0.8 的 WebP 代替全尺寸 PNG，可将图片体积减少三分之一甚至更多，从而降低 CDN 出口费用并减少访客的移动流量消耗。
- 敏感图片的隐私不容忽视。因为一切都在您的浏览器中运行，身份证扫描件、医疗图像和内部截图都留在您的设备上——无需担心上传到 TinyPNG 这样的第三方服务器。
常见应用场景
当图片比目标位置所能容纳的更大时，就需要压缩。以下是我们反复见到的三种模式。
- 为在线商店准备产品照片。JPEG 原图被压缩至画质 0.8（或 200 KB 目标），使店铺保持快速并在移动端通过 Core Web Vitals 检测。
- 将截图附加到 Bug 跟踪器或 Wiki 之前先缩小。一批 PNG 截图转换为画质 0.85 的 JPEG，体积往往从数十兆字节降到几兆字节。
- 让照片低于上传限制——拒绝 1 MB 以上文件的求职申请门户、附件限制严格的电子邮件系统，或必须符合字节预算的论坛头像。
实战演示：4 MB JPEG 压缩到 400 KB
手机相机直出的 4 MB JPEG 是常见的大文件，会触发上传限制并拖慢页面速度。这是衡量压缩效果的合理基准。
将 JPEG 拖入上传区，格式保持 JPEG，然后将画质滑块拖低到 0.7，或切换到目标大小模式并输入 400 KB。在画质模式下，Canvas 流水线重新编码一次并显示结果，通常在 500 到 700 KB 之间，具体取决于照片内容。在目标大小模式下，页面尝试几个画质值，选定仍能低于 400 KB 的最高值，并报告节省百分比。点击卡片上的下载可获取单个文件，或点击下载 .zip一次性下载所有压缩图片。整个过程对于这个大小的图片来说不到一秒，且在页面本身加载完成后不消耗任何带宽。
画质模式和目标大小模式有什么区别？
画质模式提供一个从 0.1 到 1.0 的滑块，对应 JPEG 或 WebP 编码器的量化设置——数值越低，文件越小，但瑕疵越明显。目标大小模式则反过来：您指定一个以千字节为单位的大小，页面对画质值进行二分查找，编码几次直到找到仍能符合预算的最高画质。当硬性限制很重要时（比如 1 MB 的上传限制），目标大小模式很方便；当您只想要可预期的视觉效果时，画质模式更快、更合适。PNG 是无损格式，因此两种模式均不适用。
处理是在我的设备上进行的吗？
是的，完全是。页面使用浏览器的原生 Canvas API 和 Web File API 在内存中对每张图片进行解码和重新编码。没有图片数据发送到服务器，没有临时上传，也没有云端往返。您可以自行验证：打开开发者工具，切换到网络面板，然后运行一次压缩。您看到的唯一出站请求是初始页面加载和广告调用。没有任何图片相关的数据离开标签页。
为什么压缩 PNG 有时几乎缩不了多少？
PNG 是无损格式，因此 Canvas API 无法通过丢弃细节来缩小文件——它只能重新打包相同的像素。对于照片而言，PNG 本身就很大，无损重新编码节省甚微。真正的收益来自将输出格式切换为 JPEG 或 WebP，这两种格式使用适合照片的有损压缩，通常能缩小 4 到 10 倍。只有在需要无损质量或透明度时才保留 PNG；否则请选择 JPEG（照片）或 WebP（最佳大小与画质平衡）。
我应该选择哪种格式？
对于照片，画质 0.8 的 WebP 提供最佳的大小与画质平衡，且自 2021 年以来发布的每款浏览器都支持；当目标环境较旧或限制较严时，JPEG 是安全的通用备选。只有在需要无损质量或 Alpha 通道时才选择 PNG——线条艺术、UI 截图、带透明度的标志。如果您在为页面速度优化且受众使用现代浏览器，WebP 几乎总是正确选择；如果您的 CMS 较旧或打印流水线拒绝 WebP，则使用 JPEG。
拖入图片，选择画质级别或目标大小，压缩。一切都在您的标签页中运行。无需上传，无需账户，无需等待服务器队列。