把一张 4 MB 的手机照片压到 300 KB，最有效的一步不是把质量滑到 60，而是先把宽度从 4032 改成 1600——前者只省一半，后者能省掉 85%。
图片在线压缩这件事，大多数人只用了「质量」一个参数，而且用在了错误的顺序上。下面按「先尺寸、再格式、最后质量」讲清楚，每个环节都给能直接抄的参数。
一、有损还是无损：只看这张图还要不要改
无损压缩（PNG、WebP 无损）解压后像素与原图完全一致，可以反复编辑不劣化；代价是照片类几乎压不动。有损压缩（JPEG、WebP 有损、AVIF）丢弃人眼不敏感的高频细节，体积能降到十分之一；代价是不可逆，每存一次丢一次。
判断标准只有一条：这张图以后还要不要继续编辑。
- 还要改（设计稿、需要二次标注的截图）→ 无损 PNG
- 只用于展示（网站配图、公众号、商品图）→ 有损 JPEG / WebP
- 中间稿自己留一份无损原图，对外只发有损版本
同一张 1920×1080 的照片，PNG 要 2～4 MB，JPEG 质量 80 只要 250～400 KB。差的不是压缩率，是编码方式。
二、质量 60 / 70 / 80：肉眼差多少，体积差多少
以 1920×1080 的普通照片为基准，设质量 95 的体积为 100%：
| 质量 | 相对体积 | 肉眼表现 | 建议用途 |
|---|---|---|---|
| 95 | 100% | 与原图几乎无差别 | 归档、需要二次编辑的中间稿 |
| 85 | 约 60% | 放大到 200% 才看出差别 | 摄影作品、电商主图 |
| 80 | 约 45% | 正常尺寸下看不出来 | 网站配图、公众号默认档 |
| 70 | 约 35% | 天空这类渐变可能有色带 | 列表缩略图、App 内置资源 |
| 60 | 约 28% | 文字边缘发糊、暗部起色块 | 只在硬性体积限额下用 |
| 50 以下 | 继续降但画质崩 | 明显劣化 | 不建议 |
关键是收益递减：90→80 能掉约三分之一，80→70 只掉约两成，70→60 掉的更少，但画质损失是加速的。所以 80 是绝大多数场景的甜点，往下压不如去改尺寸。
三、为什么必须先改尺寸
体积和像素总数基本成正比。宽度缩到一半，总像素变成四分之一，同质量下体积也大约变成四分之一——这是线性收益，比降质量那 20% 划算太多。
而且绝大多数场景根本不需要原图尺寸：手机直出 4032×3024，网页上最大也就显示 1920 宽，屏幕再高倍率也就吃掉 2 倍。多出来的像素全是白交的存储。
| 操作 | 典型节省 | 画质代价 |
|---|---|---|
| 质量 95 → 80 | 约 55% | 几乎无 |
| 质量 80 → 60 | 约 15% | 明显 |
| 宽度 4032 → 1600 | 约 85% | 只要不放大看，无 |
| PNG 转 JPEG（截图） | 约 80% | 小字边缘轻微发糊 |
| JPEG 转 WebP（同质量） | 约 25～35% | 无 |
所以顺序是：先定尺寸 → 再选格式 → 最后微调质量。反过来做，就是把一张已经糊了的图勉强塞进限额。
四、体积估算常识
上传前心里有个数，就不会反复试：
| 内容 | 尺寸 | 格式 / 质量 | 大致体积 |
|---|---|---|---|
| 手机直出照片 | 4032×3024 | JPEG（相机默认） | 3～6 MB |
| 风景 / 人像照片 | 1920×1080 | JPEG q80 | 250～400 KB |
| 风景 / 人像照片 | 1920×1080 | WebP q80 | 150～280 KB |
| 风景 / 人像照片 | 1280×720 | JPEG q80 | 120～200 KB |
| 同一张照片 | 1920×1080 | PNG | 2～4 MB |
| 软件截图（UI 界面） | 1920×1080 | PNG | 300 KB～1 MB |
| 软件截图（UI 界面） | 1920×1080 | JPEG q85 | 80～200 KB |
| 纯文字截图 | 1920×1080 | PNG | 150～400 KB |
| 商品方图 | 800×800 | JPEG q82 | 80～150 KB |
| 头像缩略图 | 200×200 | JPEG q80 | 8～15 KB |
注意最后两行的反差：截图类 PNG 反而比照片小得多，因为大面积纯色对 PNG 极友好；照片的连续渐变才是 PNG 的噩梦。
五、各平台限制与推荐参数
下表是常见口径，具体以平台当前提示为准（平台会改规则，但量级基本稳定）：
| 场景 | 常见上限 | 推荐尺寸 | 推荐格式 / 质量 | 目标体积 |
|---|---|---|---|---|
| 微信公众号封面 / 正文图 | 10 MB | 首图 900×383，正文宽 1080 | JPEG q80 | ≤ 300 KB |
| 网站首屏大图 | 自建站自控 | 宽 1920 | WebP 或 JPEG q80 | ≤ 300 KB |
| 网站内容配图 | 自建站自控 | 宽 1080 | WebP 或 JPEG q80 | ≤ 150 KB |
| 文章封面 / og:image | 社交平台抓取 | 1200×630 | JPEG q82 | ≤ 200 KB |
| 电商主图 | 常见 3 MB | 800×800 以上 | JPEG q85（要能放大看细节） | ≤ 2 MB |
| 小红书 / 抖音竖图 | 常见数十 MB | 1080×1440 或 1080×1920 | JPEG q82 | ≤ 2 MB |
| iOS 应用图标 | App Store 要求 | 1024×1024 | PNG，不能含透明通道 | — |
| Android 应用图标 | 应用市场要求 | 512×512 | PNG，可透明 | — |
| 简历 / 招聘附件 | 常见 2 MB | 原尺寸或宽 1600 | JPEG q80 | ≤ 500 KB |
| 考试报名证件照 | 常见 20 KB～500 KB | 295×413 | JPEG q80 | 按要求卡上限 |
| 邮件附件 | 多数 10～25 MB | 宽 1600 | JPEG q80 | ≤ 1 MB |
证件照那一档最坑：要求是「不超过 100 KB」而不是「不超过 2 MB」，这种只能靠改尺寸达成——295×413 这种尺寸本身就小，配合 q80 一般能压进 30～60 KB，正合适。
六、WebP 能省多少，AVIF 现在要不要上
同画质下 WebP 比 JPEG 小 25%～35%，比 PNG 小得更多（截图类常常能到 PNG 的四分之一），而且支持透明通道，这两点是它取代 JPG/PNG 的核心理由。兼容性上，Chrome、Edge、Firefox、Safari 14+ 都已支持，国内主流浏览器和微信内置浏览器也没问题。
AVIF 比 WebP 还能再省 20%～30%，但编码慢、老设备解码吃力，且各浏览器支持程度不一，目前不建议作为唯一格式。稳妥做法是同时出一份 JPEG 兜底，用 <picture> 让浏览器自己挑。
需要提醒的是：本站的压缩与转换工具基于浏览器 canvas 编码，输出只有 JPEG / PNG / WebP 三种（输入支持 JPG / PNG / WebP / BMP / GIF）。要出 AVIF 得用本地命令行工具。
七、三个高频坑
1. 二次压缩会越压越糊。 JPEG 是有损编码，每存一次就重新量化一次、丢一次高频信息，块效应还会累积。同一张图反复存五次，就算每次都是 q90，最后也会糊。正确做法是永远从原图重新导出，而不是拿上次压好的图再压一遍。
2. 截屏 PNG 换 JPEG 立省 80%，但要看有没有小字。 截图是大量纯色块 + 少量文字，PNG 无损存这块效率很低，转 JPEG 后体积常常掉到五分之一。代价是 JPEG 在小字边缘会产生振铃伪影。所以：截图里没有小字（或不需要看清）→ 直接转 JPEG q85；有表格、代码、小字 → 保留 PNG，或用 图片尺寸调整 先缩尺寸再存 PNG。
3. 别把含隐私的图片传到第三方服务器。 身份证、合同、内部截图这类图，传到任何在线压缩站都等于把原图交出去了，对方留不留、怎么用在条款里通常写得很含糊。纯前端实现的工具只在你自己的浏览器里用 canvas 处理，图片不出本机，这类内容就该用它。
八、图片在线压缩的正确顺序
调参数时照这个顺序走，一般一遍就能过：
- 先定最大宽度：网页用 1920 或 1080，公众号用 1080，证件照按对方要求的像素
- 再选输出格式：要透明 → PNG 或 WebP；照片且不要透明 → JPEG；网站用且能接受新格式 → WebP
- 最后滑质量：默认 80，只有还超限时才往 70 走，60 是底线
- 看一眼实时对比：确认节省比例和尺寸都对，再下载
👉 图片在线压缩（免登录、不上传）：拖进去就能同时调质量、输出格式和最大宽度，左右并排显示压缩前后的尺寸和体积，节省比例实时更新。
九、命令行批量处理
图片在线压缩工具适合单张、需要边调边看效果的场合。图片多的时候（比如一次几百张商品图），命令行更省事：
# ImageMagick：批量限制宽度到 1600、压到 q80、顺手去掉 EXIF（含 GPS 位置）
mogrify -path ./out -resize '1600x1600>' -quality 80 -strip *.jpg
# cwebp：单张转 WebP（-m 6 是压缩率最高的档，慢但更小）
cwebp -q 80 -m 6 input.jpg -o output.webp
# 只看尺寸和体积，不改动文件
identify -format '%f %wx%h %b\n' *.jpg
Python Pillow 版本，方便嵌进脚本：
from PIL import Image
im = Image.open('shot.png')
im = im.convert('RGB') # PNG 有 alpha 通道，转 JPEG 前必须先落底色
im.thumbnail((1600, 1600)) # 等比缩放，不会拉变形
im.save('shot.jpg', quality=80, optimize=True, progressive=True)
progressive=True 生成渐进式 JPEG，网页上会先出模糊轮廓再变清晰，体感加载更快，体积通常还略小一点。
十、速查清单
- 体积压不动 → 先改尺寸，别死磕质量
- 质量默认 80，70 是次选，60 只在硬性限额下用
- 照片 → JPEG / WebP；截图、Logo、需要透明 → PNG
- 已经压过的图不要二次压缩，回原图重导
- 截图转 JPEG 省约 80%，但有小字就留 PNG
- 证件照这类「≤100 KB」的限制，靠像素数达成，不靠质量
- 敏感图片用纯前端工具，别上传第三方服务器
全部纯前端实现，图片不上传服务器。