你的网站是不是加载慢？多半是图太大。
Google 的 PageSpeed Insights 有一项指标叫 LCP（Largest Contentful Paint），衡量的就是首屏最大那张图从开始下载到完全显示要多久。一个真实案例：某个用 Divi 模板的网站，移动端 LCP 是 15.6 秒——查到原因后才发现，是头部那张背景图原图直接上传，没压缩过（Reddit r/divi 实测帖）。
更现实的场景：你往小红书、知乎、公众号、邮箱附件上传图，每家平台都有自己的体积限制——小红书封面要求 5MB 以下，公众号正文图建议 2MB 以内，很多报名系统干脆只让传 200KB。
压缩这件事，远不只是把图”变小”。本文会用 5 分钟讲清楚：到底压什么、压到多少、压成什么格式、什么工具最快。
三条压缩路径
图片变小的方法只有三种，但很多人分不清它们的区别：
| 路径 | 怎么做的 | 压缩率 | 画质损失 | 适合什么 |
|---|---|---|---|---|
| 有损压缩 | 丢掉一些细节（人眼几乎看不出来） | 高，60-80% | 极小 | 照片、风景图 |
| 无损压缩 | 优化存储方式，像 zip 一样 | 低，10-30% | 零损失 | PNG 截图、图标 |
| 改格式 | 从一种格式换到另一种 | 极高，70-95% | 看换到哪种 | PNG 转 WebP / AVIF |
一个比喻：有损压缩是把厚书里的废话删掉（书还是能读懂）；无损压缩是把书里的标点、空格精简（一个字都不改）；改格式是把厚词典换成电子版（同一本内容，体积差 10 倍）。
实际操作中，最有效的是第三条——把 PNG 直接转成 WebP，往往一张 5MB 的 PNG 照片能变成 200KB 的 WebP，画质几乎没差。
关键参数怎么选
光选路径还不够，工具会给你一堆参数。每个参数到底管什么：
Quality（质量）
从 0 到 100，控制丢多少细节。经验值：
| 场景 | 推荐 Quality | 文件大小目标 |
|---|---|---|
| 网页首屏 hero 图 | 75-80 | < 200KB |
| 博客正文插图 | 80 | < 150KB |
| 电商商品图 | 85-92 | < 300KB |
| 社媒头像 | 80 | < 100KB |
| 邮件附件 | 75 | < 1MB |
| 印刷/归档 | 92+ 或原图 | 不压缩 |
Quality 80 是网页的甜点——文件减少 60-70%，但绝大多数人肉眼看不出差别（cleverutils.com 实测）。
色度子采样（Chroma Subsampling）
JPEG/WebP 在编码时会丢掉一些颜色信息，因为人眼对亮度敏感、对颜色不敏感。参数写成 4:4:4、4:2:0、4:2:2：
4:4:4：颜色全保留（截图、UI 截图用）4:2:0：丢掉 75% 颜色信息（照片用这个，体积能再小一半）4:2:2：介于两者之间（视频常用）
你不需要手动调——多数工具默认 4:2:0，对的。
分辨率
如果一张 4000×3000 的手机原图只显示在网页 800px 宽的位置，那 75% 的像素都是浪费的。先缩小尺寸，再压缩，效果远好于直接压原图。
EXIF 信息
照片里藏着相机型号、GPS 位置、拍摄时间——这些对网页没用，还会让文件更大。上传网页之前删掉。具体怎么操作、删完会不会留坑，看这篇 EXIF 隐私指南。
格式决策树
五种主流格式，怎么选：
需要透明背景？
- 是 → 透明 PNG / WebP / AVIF 都行
- 要给老浏览器兼容?选 PNG
- 想要最小体积?AVIF > WebP > PNG
- 否 → 看是照片还是插图:
- 照片 → WebP > AVIF > JPG
- 插图/截图 → PNG(色彩精确)或 WebP
各格式特点：
| 格式 | 压缩率 | 透明支持 | 浏览器兼容 | 适合 |
|---|---|---|---|---|
| JPG | 基准 | ❌ | 100% | 兼容性优先时 |
| PNG | 差 | ✅ | 100% | 截图、图标 |
| WebP | 比 JPG 小 25-34% | ✅ | 97%+ | 网页默认推荐 |
| AVIF | 比 WebP 再小 ~20% | ✅ | 90%+ | 新项目、追求极致 |
| HEIC | 比 JPG 小 ~50% | ✅ | 仅 Apple | iPhone 原图 |
WebP 比 JPG 小 25-34% 这个数字来自 Google Developers 2010 年的研究，至今仍被引用为基准。Chrome、Firefox、Safari 14+、Edge 全都支持，覆盖率 97% 以上——基本可以无脑用。
AVIF 更狠，但 Safari 完整支持要到 16.4（2023 年 3 月），如果有用户还在用老 Safari，得做个 JPG fallback。
如果原图是 HEIC 格式（iPhone 默认），先转成 WebP 再压缩。piick.cc 的 图片格式转换工具 支持这几种格式互转。
实操：在 Piick 上 30 秒完成
不想装软件？直接在浏览器里跑。piick.cc 的 图片压缩工具 走纯前端压缩——图片不上传服务器，隐私没问题。
3 步搞定：
- 拖图片进去——支持 JPG / PNG / WebP，单文件最大 25MB
- 选 Quality——默认 80，对绝大多数场景都够用
- 下载压缩后的图——会显示压缩了多少，比如 4.8MB → 620KB（减小 87%）
实测一张 4000×3000 的手机照片（4.8MB）压到 Quality 80 后是 620KB，长宽不变，肉眼几乎无差别。
进阶：批量、Retina 屏、保留 EXIF
批量压缩
需要压 50 张图？手动一张张太慢。Squoosh CLI（npx squoosh-cli --mozjpeg '{"quality":80}' *.jpg）或 ImageMagick 脚本能做批量。piick.cc 工具当前是单张处理，批量功能在排期。
Retina 屏要不要压得更狠？
不需要。Retina 屏只是像素密度高，不是要更清晰的图——网页在 Retina 屏上仍然显示在 CSS 像素尺寸上。要做的是上传2x 分辨率的图（比如 1600×800 给 800×400 的容器），压缩参数保持不变。Quality 80 在 Retina 屏上一样够用。
要不要保留 EXIF？
- 个人照片分享：保留（方便归档）
- 商业网站：删掉（减少体积 + 保护隐私）
- 新闻/媒体：建议保留版权信息
具体哪些字段要警惕，看 EXIF 隐私指南。
常见问题
压到 200KB 以下，但 Quality 已经调到 60 还是糊，怎么办？
先缩小分辨率，再压缩。4000×3000 缩到 2000×1500 之后再压，体积能再降一半，画质也更好。piick.cc 的 图片裁剪工具 可以精确裁剪。
WebP 真的能无脑用吗？
对 97% 的浏览器可以。如果用户群里老 Safari / IE 占比较高，要么做个 JPG fallback，要么干脆就用 JPG。
PNG 转 WebP 是无损的吗？
不是。WebP 有两种模式——无损 WebP 和有损 WebP。默认工具用的是有损，画质损失肉眼几乎看不出。如果要绝对无损（截图归档），用 cwebp -lossless input.png -o output.webp。
为什么我压完比原图还大？
Quality 调到 95 以上经常出现这种情况——压缩算法本身要存一些元数据，质量越高元数据越完整，体积反而可能比原图还大。遇到这种情况直接用原图，别压。
AVIF 什么时候能完全替代 WebP？
浏览器支持率达到 95% 之后（预计 2026-2027）。现在主力推 WebP 更稳。想折腾可以上 Piick 的 格式转换工具 试试 AVIF。
压缩这件事没想象中复杂：先选格式（WebP 兜底），再选 Quality（80 起），最后看要不要缩尺寸。需要在线跑一次？直接打开 piick.cc 图片压缩工具，30 秒出结果。