图片压到多少 KB 才够用又不糊

「这张图能不能再小一点」——绝大多数人第一反应是拖质量滑块。但图片体积的构成里，质量参数的权重远小于像素数。

体积 ≈ 像素数 × 每像素成本

一张 4000×3000 的照片有 1200 万像素。缩到 1200×900 是 108 万像素，像素数只剩 9%，文件通常也只剩一成多。

而把 JPEG 质量从 90 降到 80，体积大约降 30%；从 80 降到 70 再降 20%，但画质开始肉眼可见地劣化，尤其在文字边缘和渐变色块上。

所以正确的顺序永远是：

1. 先缩尺寸（决定它最终在屏幕/纸上占多大）
2. 再定格式（JPEG / PNG / WebP 各有适用面）
3. 最后调质量（在可接受画质下取最小的那个值）

顺序反了会做无用功：先压到质量 50 再缩尺寸，画质已经损失了，缩完还是那个糊样。

尺寸怎么定：按「显示宽度 × 2」

网页里最常见的目标宽度是 760~1200 CSS 像素。手机和笔记本普遍是 2 倍屏，所以导出宽度按显示宽度的 2 倍准备即可。

用途	建议像素宽	说明
网页正文配图	1200	2 倍屏下显示 600px 宽仍清晰
文章头图 / 封面	1600	留裁切余量
缩略图 / 列表图	400	别用大图缩着显示，白流量
微信朋友圈	1080 短边	平台会二次压缩，别指望原图
打印 A4 照片	2480×3508	300dpi 换算，少一点都不够
证件照一寸	295×413	25×35mm @300dpi

「72dpi 是屏幕标准」这句话是印刷时代留下的误解。屏幕只看像素，不看 dpi；dpi 只在打印时才有意义，用来把像素换算成物理尺寸。

格式：先排除明显不对的

内容	该用	不该用
照片、复杂渐变	JPEG 或 WebP	PNG（体积能大 5 倍）
截图、含文字的图	PNG 或 WebP	JPEG（文字边缘出现彩色噪点）
图标、logo、单色图	SVG	任何位图格式
需要透明背景	PNG 或 WebP	JPEG（不支持透明，透明区会变黑或变白）

同样是照片，WebP 在同等画质下通常比 JPEG 小 25%~35%。代价是老版本软件和部分系统不支持 —— 但 2026 年了，浏览器这边早就没有兼容问题，剩下的风险主要在「对方要下载下来用 Office 打开」这类场景。

需要批量换格式，用 图片格式转换；只改尺寸和质量的，用 图片压缩与缩放，支持批量、可以按最长边或宽度指定目标。

JPEG 质量参数的实际手感

质量	观感	适合
90~95	与原图几乎无差别	需要再编辑的中间产物
80~85	正常观看看不出差别	绝大多数交付场景的默认值
70	平滑区域出现轻微块状	缩略图、不在意细节的配图
50 以下	明显色块、文字发虚	只用于预览占位

为什么 80 是分水岭：JPEG 按 8×8 像素块做离散余弦变换，质量降到某个点后，高频信息被整体丢弃，块边界开始显形。人眼对平坦区域（天空、纯色背景）的块状伪影特别敏感，对纹理密集区（树叶、织物）反而宽容。所以同一张照片里，天空先糊，草地后糊。

判断方法：缩放到 100% 看平坦区域，而不是看整图缩略。

三个常见的过度压缩

1. 反复另存 JPEG。每存一次都是一次有损压缩，五代之后画质明显坍塌。要多次编辑就存 PNG 或保留原图。
2. 把截图存成 JPEG。文字边缘会出现彩色毛刺，且再也回不去。截图一律 PNG。
3. 压完再放大。像素已经被丢了，放大只是插值，不会变清晰。

加水印要放在最后一步

水印应该在所有尺寸调整之后再加，否则缩图时水印会跟着变小、变模糊；反过来说，先加水印再压缩，水印边缘的锐利线条又会被 JPEG 啃掉。

站内的图片加水印支持文字水印、调透明度和平铺，适合批量给素材加标识。

一份可照抄的检查清单

• [ ] 目标宽度按「显示宽的 2 倍」定了吗
• [ ] 格式选对了吗（照片 JPEG/WebP，截图 PNG，图标 SVG）
• [ ] 质量落在 80~85 了吗
• [ ] 100% 看过平坦区域有没有块状
• [ ] 有透明背景吗（有就别用 JPEG）
• [ ] 还需要二次编辑吗（需要就留原图）

按这个顺序做，一张 4MB 的手机照片压到 200KB 以内还能保持清晰，是很正常的结果 —— 关键在第一步缩尺寸，不在滑块。