在线图片压缩工具：缩小 JPEG、PNG、WebP 体积
什么是图片压缩
图片压缩是减小图片文件大小的技术，常见两类：
- 无损压缩：像素可完全还原（如 PNG）；体积下降有限
- 有损压缩：牺牲部分细节换更小体积（JPEG、有损 WebP）
本站 图片压缩工具 在浏览器里用 Canvas 重编码——可调质量与最大宽度、支持 JPEG/PNG/WebP 互转，原图不上传。Canvas 路径本质是「解码 → 可选缩放 → 再编码」，因此输出是新文件，不是对原容器做无损改包。
为什么需要图片压缩
- 网页性能：图片常占页面体积的大半，压缩直接缩短 LCP 相关等待
- 带宽成本：CDN 与流量按字节计费，配图体积下降立竿见影
- 上传限额：表单、简历、报名系统常有 100KB–2MB 硬顶
- 移动网络：弱网下小图比「原图 + 前端缩放」更稳
- 打包体积：把图再转 Base64 前先压缩，可抵消约 33% 的编码膨胀
主流图片格式对比
| 格式 | 压缩方式 | 透明度 | 动画 | 浏览器支持 | 常见场景 |
|---|---|---|---|---|---|
| JPEG | 有损 | ❌ | ❌ | 全部 | 照片、复杂图像 |
| PNG | 无损 | ✅ | ❌ | 全部 | 图标、截图、需透明 |
| WebP | 两者 | ✅ | ✅ | 97%+ | 现代网页配图 |
| AVIF | 两者 | ✅ | ✅ | 90%+ | 极致体积（工具链支持不一） |
| SVG | 矢量 | ✅ | ✅ | 全部 | 图标、Logo、插图 |
格式怎么选
- 照片：优先 WebP（同等观感下通常比 JPEG 小 25–35%），需要最大兼容时用 JPEG
- 截图/图标：需要透明用 PNG 或 WebP；不透明截图转 JPEG/WebP 体积往往骤降
- Logo/图标：能矢量就 SVG；栅格再交给压缩器
- 本工具输出：JPEG / PNG / WebP（浏览器 Canvas 原生支持）；AVIF 编码不在此工具范围内
工具里怎么压一张图
打开 图片压缩：
- 拖入或点击选择图片（JPEG / PNG / WebP 等浏览器可解码格式）
- 用质量预设（网页 70% / 均衡 80% / 高清 90%）或拖动滑块；选 PNG 时质量滑块会禁用——PNG 走无损重编码
- 用宽度预设（原始 / 1920 / 1280 / 800）或填写最大宽度；
0表示不缩放。先缩尺寸再压质量，通常比只拧质量更有效 - 选择输出格式；透明 PNG 转 JPEG 时透明区域会填白（JPEG 无 Alpha）
- 点击压缩，对照原图体积 / 压缩后体积 / 节省百分比 / 节省字节与宽高，满意后下载
结果区会同时显示原图与压缩图预览，方便肉眼核对文字边缘与色块伪影。
质量、宽度与体积：怎么取舍
| 质量设置 | 文件大小 | 视觉观感 | 常见用途 |
|---|---|---|---|
| 60–70 | 最小 | 可能可见损失 | 缩略图、装饰背景 |
| 75–85 | 较小 | 多数照片几乎无感 | 网页正文图、列表图 |
| 85–95 | 中等 | 接近原图 | 产品图、摄影展示 |
| 95–100 | 接近原图 | 边际收益很小 | 印刷/存档前再评估是否需要栅格 |
经验法则：照片从「均衡 80%」起步；有硬性体积上限时，先把最大宽度降到展示尺寸的 2×（视网膜），再略降质量。反复「压过的再压」会叠加伪影——始终从原图重新导出。
Canvas 路径的边界（实现说明）
这些不是缺陷隐藏，而是浏览器重编码的固有边界，工具页也有简短提示：
- EXIF / GPS / ICC 会被剥离：
drawImage+toBlob只带走像素，不保留容器元数据。分享前脱敏是副作用收益；若你依赖镜头参数或色彩配置文件，请先备份原图或走专业管线。 - 不是「无损改 JPEG」：即使输入已是 JPEG，输出也是重新量化后的新文件；质量设很高仍可能与原文件字节不同。
- PNG「压缩」常不缩小：输出 PNG 时质量无效；若原图已是优化过的 PNG，体积可能持平或略增——不透明图请改 JPEG/WebP。
- 动画帧会丢：GIF/动图 WebP 经 Canvas 通常只保留一帧；动画请用专用工具。
- 解码失败：个别 HEIC/冷门编码依赖系统编解码器；加载失败时先确认浏览器是否能预览该文件。
网页侧配套（压缩之外）
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="描述" loading="lazy" width="800" height="600">
</picture>
首屏外图用 loading="lazy"；不要把 4000px 原图塞进 400px 布局槽——先用本工具缩到合适宽度再部署。需要把图嵌进 CSS/HTML 时，压完再走 图片转 Base64；还原预览用 Base64 转图片。
FAQ
压缩一定会降低画质吗？
有损格式在质量约 80 时，多数照片肉眼难辨；无损 PNG 重编码不牺牲像素精度，但体积未必下降。以结果区的预览和体积数字为准。
在线压缩安全吗？
本工具在浏览器本地完成，图片不上传服务器。适合处理含个人信息的证件照、截图（元数据会被剥离，见上文）。
WebP 比 JPEG 小多少？
同等观感下常见约 25–35%。若目标环境 Canvas/toBlob 支持 WebP，可直接选 WebP 输出；老旧客户端再保留 JPEG 回退。
为什么压缩后反而更大？
常见原因：把已优化的 JPEG 转成 PNG；或质量设得过高且未缩小尺寸；或原图本身已是强压缩。换格式、降宽度后再比一次。
排查注记
经验法则把顺序写死：先缩尺寸再压质量——通常比只拧质量更有效；有硬性体积上限时先把最大宽度降到展示尺寸的 2×（视网膜），再略降质量。「Canvas 路径的边界」开头一句定调：这些不是缺陷隐藏，而是浏览器重编码的固有边界——EXIF/GPS/ICC 剥离对分享是脱敏收益，依赖镜头参数和色彩配置的人则要先备份原图。两条反直觉结论都给了原因：PNG「压缩」常不缩小（无损重编码，不透明图该换 JPEG/WebP），反复「压过的再压」会叠加伪影，所以要始终从原图重新导出。
感谢阅读这篇 ToolVault 工具匣 技术文章。相关工具：图片压缩、图片转 Base64、Base64 转图片。更多免费本地工具见 首页。