为什么要压缩图片？
图片是网页中体积最大的资源之一。未经优化的图片会导致：
- 网页加载缓慢，影响用户体验和跳出率
- Google Core Web Vitals（LCP 指标）评分下降，影响 SEO 排名
- 移动端用户消耗更多流量
- 云存储和 CDN 成本增加
Google 研究表明，页面加载时间每增加 1 秒，移动端转化率下降约 20%。
有损压缩 vs 无损压缩
| 压缩类型 | 原理 | 画质影响 | 压缩率 | 适用场景 |
|---|
| 有损压缩 | 丢弃部分图像数据，降低细节精度 | 有轻微损失（可控） | 50%–80% | 照片、社交媒体图片 |
| 无损压缩 | 用更高效的算法重新编码，不丢失数据 | 无损失 | 10%–30% | 图标、截图、设计稿 |
如何免费在线压缩图片
使用 tool.tl 的图片压缩工具，在浏览器中完成压缩，图片不上传到服务器：
- 访问 tool.tl/image-compressor
- 上传图片（支持 JPG、PNG、WebP，可批量上传）
- 选择压缩质量（建议 75–85%，在画质和体积之间取得最佳平衡）
- 查看压缩前后对比，下载压缩后的图片
不同场景的推荐压缩参数
| 场景 | 格式 | 建议质量 | 目标体积 |
|---|
| 网页 Banner/Hero 图 | WebP / JPG | 75%–80% | < 200KB |
| 产品缩略图 | WebP / JPG | 70%–75% | < 50KB |
| 社交媒体分享图 | JPG | 85% | < 300KB |
| 图标/Logo | PNG（无损） | 无损 | < 20KB |
| 邮件内嵌图片 | JPG | 70% | < 100KB |
图片压缩的进阶技巧
- 选择正确格式：照片用 JPG 或 WebP，有透明背景用 PNG，图标/UI 元素用 SVG
- 先调整尺寸再压缩：如果图片显示尺寸是 400×300px，不需要上传 4000×3000px 的原图，先用调整尺寸工具缩小再压缩
- 使用响应式图片：为不同屏幕尺寸提供不同分辨率的图片（srcset 属性）
- 延迟加载：为非首屏图片添加 loading="lazy" 属性，减少初始页面加载
常见问题
压缩后图片画质会明显变差吗？
在 75%–85% 质量设置下，肉眼几乎无法分辨压缩前后的差异，但文件大小可减少 50%–70%。压缩工具提供前后对比预览，可以自行判断画质是否可接受。
压缩工具是免费的吗？
是的，tool.tl 的图片压缩工具完全免费，支持批量压缩，在浏览器本地处理，图片不会上传服务器，完全私密。
PNG 图片压缩效果不如 JPG 明显，为什么？
PNG 使用无损压缩算法，有损压缩对它效果有限。如果 PNG 图片（尤其是照片类）体积很大，最好的做法是转换为 JPG 或 WebP 格式，而不仅仅是压缩 PNG。