一张未经优化的主图，其体积可能超过整个网页预算。

欢迎来到你的 图片压缩入门课程。接下来 10 分钟你将了解：

1. 图片为何拖慢网站速度（并影响 SEO）
2. 有损 vs 无损 压缩的区别
3. 关键指标：质量%、分辨率、文件大小
4. 常见格式：JPEG、PNG、WebP、AVIF
5. 使用 SlimImg 的实操演示——无需上传，隐私安全

1. 为什么你应该在意？

• 性能 – 每多 100 KB 会使 LCP 增加约 0.3 秒
• 移动数据成本 – 用户用流量访问，每 MB 可能要付费
• SEO – Google 的 Core Web Vitals 排名指标鼓励轻量页面
• 可访问性 – 轻量页面能在低端设备和慢网速下快速加载

🔍 案例：一家电商网站压缩所有商品图后，平均页面大小减少 68%，转化率提升 38%

2. 有损 vs 无损

类型	原理	典型压缩率	使用场景
无损压缩	删除元数据、重排像素，无图像损失	10–30%	UI 图标、Logo、有文字图像
有损压缩	删除人眼难察觉的细节	40–90%	照片、背景图、横幅图

专业建议：先无损，再轻度有损，效果最佳。

3. 核心指标

1. 质量 %（q-factor） – 越低文件越小，但越模糊
2. 分辨率 – 用 4K 图服务 1080p 屏幕是浪费
3. 文件大小 – 用户实际下载的数据量

graph LR;
A[原始 4MB] -->|无损压缩 20%| B(3.2MB);
B -->|尺寸减半| C(0.8MB);
C -->|有损压缩 q=80| D(0.25MB);

这是将 4MB 照片压缩成 250KB 网页图的完整流程

4. 主流格式对比

格式	适用场景	浏览器支持（2025）	相对 JPEG 的节省
JPEG / JPG	照片	100%	基准
PNG	透明图 / UI	99%	5–30%
WebP	网页图 + 透明	97%	25–35%
AVIF	高动态范围图像	92%	30–50%

5. 实操：用 SlimImg 压缩一张图

🕒 耗时：2 分钟

1. 打开 https://slimimg.tools
2. 拖入图片（JPG / PNG / WebP / AVIF）
3. 调整质量滑块 → 实时预览效果
4. (可选) 调整尺寸或开启 EXIF 清除
5. 点击下载——所有处理完全在本地浏览器中完成，不上传服务器

💡 提示：批量压图？切换至 Bulk Mode，拖入整文件夹，自动打包下载

6. 最佳实践清单 ✅

• 📐 图片尺寸匹配实际展示尺寸（避免 2 倍图浪费）
• 🖼️ 使用 <img srcset> 或 Next.js <Image> 加载响应图
• 🎨 照片用 WebP，图标用 PNG-8 或 SVG
• 🏷️ 添加 ALT 描述，提高 SEO 与可访问性
• 🚀 用 PageSpeed Insights 测试压图效果

7. 拓展阅读

• Google 图像 SEO 最佳实践
• Web.dev 使用 WebP
• SlimImg 如何删除 EXIF 信息保护隐私

现在就试试吧！

👉 立即压缩图片