最后更新：2026 年 9 月 · 阅读时长：约 7 分钟 · 适用：站长、自媒体、电商、设计师
图片文件太大，网页加载慢、占用空间、传输慢：
图片压缩就能解决。
但压缩有陷阱：
这篇教程教你：
✅ 完全免费 · ✅ 本地处理 · ✅ 批量压缩
1000万像素照片：~30 MB（未压缩）
JPEG（高画质）：~5 MB
JPEG（中画质）：~2 MB
WebP（高画质）：~1.5 MB
AVIF（高画质）：~800 KB关键概念：
| 参数 | 作用 |
|---|---|
| 分辨率 | 长 × 宽（像素） |
| 质量（Q 值） | 1-100，数字越小压缩越狠 |
| 格式 | JPEG/PNG/WebP/AVIF |
| 色深 | 8-bit / 16-bit（一般不用） |
| 格式 | 压缩类型 | 透明度 | 动画 | 兼容性 | 体积 |
|---|---|---|---|---|---|
| JPEG | 有损 | ❌ | ❌ | 100% | 基准 |
| PNG | 无损 | ✅ | ❌ | 100% | 大 |
| WebP | 都有 | ✅ | ✅ | 95% | 小 30% |
| AVIF | 都有 | ✅ | ✅ | 80% | 小 50% |
| HEIC | 有损 | ✅ | ❌ | Apple | 小 30% |
| 场景 | 推荐格式 |
|---|---|
| 照片 | WebP（或 JPEG 兼容） |
| Logo / 图标 | PNG 或 WebP |
| 透明背景 | WebP（或 PNG） |
| 动图 | WebP 动图 |
| 网页图片 | AVIF / WebP |
| 苹果设备 | HEIC |
目标：网页加载速度 < 2 秒
所有图片转 WebP / AVIF
宽度 ≤ 1920px（多数屏幕够用）
质量 80-85简盒图片工具箱 → 批量压缩 → 一键优化 100 张。
效果：
问题：朋友圈 9 张图限制 25MB，原图可能 100MB+。
方案：
目标：9 张图 ≤ 25 MB（平均 2.7 MB/张）
宽度 ≤ 2000px
质量 75-80
格式 JPEG简盒图片工具箱 → 选「朋友圈」预设。
目标：保留细节（商品图必须看清）
宽度：原尺寸（不缩）
质量 90-95
格式：保持原格式（JPEG/WebP）简盒图片工具箱 → 选「电商」预设。
问题：截图原图通常很大（4K 显示器截屏）。
方案：
保持 PNG（无损）或转 WebP
质量 90+（文字要清晰）
批注/标注：在原图基础上加问题：RAW 文件 30MB+，分享给客户太慢。
方案：
目标：高质量 JPEG/WebP
宽度 2400px（专业展示）
质量 90+
保留 EXIF 信息（相机参数）| Q 值 | 画质 | 文件大小（1000万像素照片）|
|---|---|---|
| 100 | 无损（视觉） | 5 MB |
| 85 | 肉眼无差异（推荐） | 2 MB |
| 80 | 高质量 | 1.5 MB |
| 70 | 良好 | 1 MB |
| 60 | 一般 | 700 KB |
| 50 | 明显失真 | 500 KB |
经验法则：Q 80-85 是甜点（质量/体积平衡）。
Web 常用宽度：
经验法则：不超过展示尺寸的 2 倍（避免浪费，Retina 屏已够）。
| 色深 | 颜色数 | 用途 |
|---|---|---|
| 8-bit | 1670 万 | 绝大多数场景 |
| 16-bit | 280 万亿 | 专业摄影 |
建议：默认 8-bit。
JPEG 参数，影响颜色精度：
| 设置 | 适用 |
|---|---|
| 4:4:4 | 最高质量（无损颜色） |
| 4:2:2 | 高质量（颜色略降） |
| 4:2:0 | 标准（推荐） |
简盒默认 4:2:0。
| 处理 | 建议 |
|---|---|
| EXIF（相机参数）| 摄影保留 / 网页删除 |
| GPS（位置）| 始终删除（隐私） |
| ICC（色彩）| 摄影保留 |
简盒默认删除 EXIF（减少体积 + 隐私），可选保留。
原理：AI 分析图片，重要区域（人脸、文字）高画质，不重要区域（背景）低画质。
效果：相同 Q 值，文件更小、画质更好。
简盒图片工具箱 的「智能感知」模式。
普通 JPEG：逐行显示（从顶到底）
渐进式 JPEG：先模糊再清晰
优点：网页加载时用户先看到模糊图，体验更好。
简盒图片工具箱 默认输出渐进式 JPEG。
简盒图片工具箱 支持：
节省时间：手动压缩 1000 张 = 5 小时，批量 = 15 分钟。
如果图片量大，建议用 CDN：
不一定！
建议：用 WebP / AVIF 替代 JPEG。
错！
错！
错！
简盒图片工具箱 完全本地处理，文件不上传。
不一定！
图片源
↓
sharp（Node.js 图片处理库）
↓
批量压缩（WebP + 多尺寸）
↓
CDN 缓存
↓
Lazy load（按需加载）| 工具 | 用途 |
|---|---|
| sharp | Node.js 库，自动生成多尺寸 |
| Squoosh CLI | Google 出品，批量压缩 |
| imagemin | 经典压缩库 |
| Cloudflare Images | CDN 集成图片压缩 |
特点：
本文由 简盒 JianHeBox 编辑整理。