← 返回工具箱
🚪 图片压缩

上传图片进行压缩

📷
点击或拖拽图片到此处
支持 PNG、JPG、WebP，可批量上传多张图片
80
最小体积平衡最高质量

📖 图片压缩相关知识

什么是有损压缩与无损压缩？

图片压缩分为两大类。有损压缩（Lossy）会丢弃部分视觉冗余信息，以换取更小的文件体积，JPEG 和 WebP 均支持有损模式。无损压缩（Lossless）不丢失任何像素数据，PNG 使用 DEFLATE 算法进行无损压缩，WebP 也支持无损模式。

常见图片格式对比

格式压缩类型透明通道最佳使用场景
JPEG有损不支持照片、渐变色彩丰富的图像
PNG无损支持（Alpha）截图、图标、需要透明背景的图像
WebP有损 + 无损支持Web 端图片，兼顾质量与体积
GIF无损（最多256色）支持（1位）简单动画、低色彩图标（已逐渐被替代）
AVIF有损 + 无损支持新一代 Web 图片，体积最小，兼容性仍在完善

质量参数如何影响文件大小？

以 JPEG 为例，质量参数控制量化表的精细程度。质量从 100 降至 80 通常可减少约 60–70% 的文件大小，而肉眼几乎看不出差异。质量低于 60 时，块状压缩伪影（Blocking Artifact）会开始明显。推荐将质量设置在 75–85 之间，可在体积与视觉质量间取得良好平衡。

Canvas API 压缩原理

本工具使用浏览器内置的 Canvas API 进行纯前端压缩，所有数据均在本地处理，不上传至任何服务器。核心步骤如下：

  1. 将原始图片绘制到 <canvas> 元素上（像素解码）
  2. 调用 canvas.toBlob(callback, mimeType, quality)，由浏览器的原生编码器重新编码
  3. 将编码结果转为 Object URL，用于预览和下载

注意：PNG 为无损格式，调整质量参数对 PNG 输出无效；若需缩小 PNG 文件，建议将输出格式切换为 JPEG 或 WebP。

影响压缩效果的因素

💡 最佳实践：Web 端图片推荐使用 WebP 格式，在相同质量下体积比 JPEG 小约 25–35%，同时支持透明通道。如需兼容较旧浏览器，可提供 JPEG 作为回退。