图片压缩

什么是图片压缩工具？#

本工具通过浏览器的 Canvas 流水线，用更低质量、不同格式或更小像素尺寸重新编码图片，从而缩小文件体积——三者可任意组合。输出是一个可下载的新文件，并附上压缩前后的体积对比，让取舍一目了然。它解决的是日常「这张图太大没法发」的痛点，全程本地，不上传。

三根可调的杠杆，且可叠加：

• 格式——JPEG（有损、不透明）、WebP（有损、现代，同画质下比 JPEG 小约 25–35%）、或 PNG（无损，只能靠缩尺寸减小体积，不能靠降画质）。
• 画质——5–100 的滑块，映射到编码器的质量设置。仅作用于 JPEG 与 WebP；选 PNG 时滑块会隐藏，因为 PNG 按设计就不该有损。
• 最大宽 / 最大高——可选上限，编码前先把图片按比例缩小（保持宽高比、绝不放大）。对照片来说，缩尺寸是减体积最猛的一招。

工作发生在 <canvas> 上（createImageBitmap + canvas.toBlob），图片在内存里被解码、变换、重新编码；源文件分毫未动。

怎么使用#

1. 把图片拖到虚线框里。
2. 在控制行里选择：
   • Format（格式）——PNG/WebP 源默认保持原格式，其余默认 JPEG。
   • Max width / Max height（最大宽/高）——留空表示「auto」（不缩放），或填入像素上限。图片会按比例塞进这个框，不变形。
   • Quality（画质）——拖动滑块（5–100），当前值显示在旁边。PNG 忽略此项。
3. 点 Compress（压缩）。统计条显示 Original（原始）、Compressed（压缩后）、Saved（节省）的字节数与百分比；若结果反而变大，会有提示。
4. Download（下载）压缩后的文件。预览展示结果，便于你判断视觉质量。

核心特性#

• 按格式给默认值。 PNG 保持 PNG（透明度和锐利边缘得以保留）；照片默认 JPEG；工具绝不会悄悄毁掉 alpha 通道。
• 保比例缩放。 最大宽/高定义的是一个边界框，图片按原比例塞进去，绝不放大。
• 诚实的体积报告。 当重编码反而变大（PNG 转 PNG 或本来就极小的 JPEG 常见），工具会直说，而不是假装省了空间。
• WebP 输出。 现代浏览器在同等视觉质量下比 JPEG 再省 25–35%，做网页素材很顺手。
• 本地流水线。 Canvas API 负责编码，不上传任何东西。

实例演示#

一张 4.5 MiB、4032×3024 的手机照片太大，发不出邮件。拖进来，Format 选 WebP，Max width 填 1920（高度自动按比例到 1440），Quality 设 80。点 Compress，统计条报告：

缩尺寸干了大部分活（像素少了约 4 倍），WebP 在画质 80 收尾。结果不到半兆，在屏幕上肉眼难辨差别。

把同一张图用 PNG、画质 100、不缩放去压，通常反而更大——PNG 无损，没法像 JPEG 或 WebP 那样丢掉照片里的噪点。工具会用「larger」提示标出，而不是谎报省了多少。

常见问题#

画质滑块是灰的，为什么？#

PNG 是无损格式，没有画质这根弦。选 PNG 时滑块会隐藏，因为它不起作用。切到 JPEG 或 WebP 才能调画质。

我「压缩」完反而比原图大，怎么回事？#

两种常见原因：把本来已压缩的 JPEG 转成了 PNG（PNG 在照片上拼不过 JPEG 的有损压缩），或源图本就很小、高度压缩，PNG 重编码反而加了开销。换成有损格式（JPEG 或 WebP），或打开缩尺寸。

我填一个特别大的最大宽度，会把图放大吗？#

不会。最大宽/高只限制上限；源图已经更小的话，会按原尺寸直通。放大只会让文件变大，画质毫无收益。

WebP 到处都能用吗？#

现代浏览器（Chrome、Edge、Firefox、Safari 14 及以后）都支持 WebP。若要兼容很老的浏览器或某些图片处理流水线，退回 JPEG。