为什么需要压缩图片？
未压缩的图片是网页加载慢的主要原因之一。研究表明：
- 图片占网页总大小的60%-70%
- 页面加载时间每增加1秒，转化率下降7%
- Google将页面速度作为排名因素之一
图片格式对比
| 格式 | 压缩类型 | 支持透明 | 适用场景 |
|---|---|---|---|
| JPEG | 有损 | ✗ | 照片、渐变 |
| PNG | 无损 | ✓ | 截图、图标、文字 |
| WebP | 有损/无损 | ✓ | 通用，推荐 |
| AVIF | 有损/无损 | ✓ | 下一代格式，最佳压缩 |
压缩率参考
以一张 4000×3000 的照片（原图约 12MB）为例：
| 设置 | JPEG 大小 | WebP 大小 | 画质 |
|---|---|---|---|
| 最高质量(95%) | ~3.2 MB | ~2.1 MB | 肉眼无损 |
| 高质量(85%) | ~1.8 MB | ~1.2 MB | 优秀 |
| 中等质量(70%) | ~800 KB | ~540 KB | 良好 |
| 低质量(50%) | ~300 KB | ~200 KB | 可接受 |
压缩图片不影响画质的方法
- 选择合适的格式：优先用WebP替代JPEG/PNG
- 调整质量参数：JPEG质量设为80-85%，肉眼几乎看不出区别
- 缩小尺寸：网页显示宽度通常不超过1200px，上传前先缩小
- 去除不必要的元数据：EXIF信息可占几十KB
- 使用渐进式JPEG：边下载边显示，提升用户体验