如何把图片压缩到 100KB 以下：不靠上传到不明网站的实操指南
作者：Safe Local Tools 编辑组
**想把体积压到大约 100KB，很少只靠一次「最低画质」滑动条就够。**更稳妥的路线通常是：先缩小像素，再选对编码器，然后用真实观看场景（手机、投影、PDF 嵌入）做验收。
很多 portal、表单系统或邮件网关会把附件上限卡在百 KB 量级——未必合理，但门槛客观存在。你要做的是把比特花在肉眼敏感的区域，把噪声和不必要的元数据砍掉的优先级排到前面。
本文拆解像素数量、熵、透明度与格式如何共同决定文件大小，并强调 Safe Local Tools 在浏览器本地完成压缩与预览：截图里常有客户数据或未公开界面，不必为了省字节把原图交给未知的在线服务。
为什么「100KB」总在表单与 CMS 里出现
它不是物理学常数，而是折中：小到弱网环境也不容易炸，大到依然可能塞进一张「刻意缩小」的照片。
无论历史原因是带宽、磁盘还是网关默认值，作者侧的解法都一样：先把分辨率拉回展示宽度附近，再去谈编码参数。
体积从哪里来：像素、纹理与容器
影响字节的主要因素：
- 宽高乘出来的像素总量：分辨率减半，像素约降为四分之一（粗略地说压缩后可期待的降幅也常常在同一量级）。
- 图像熵：噪点、胶片颗粒、复杂植被纹理都让压缩器更难找到重复模式。
- 透明度与锐利边界：UI 截图往往在 PNG 下更小或更大取决于是否有大片渐变背景。
- 编码器：照片偏向 JPEG/WebP；线条稿偏向 PNG/SVG（矢量无法用时再栅格化）。
想在本机实验缩放与导出，Mozilla 文档里的 HTMLCanvasElement 可以帮助你把「画布像素」与 CSS 展示联系起来。
先把几何尺寸做对，再谈玄学参数
常见弯路：上传 4000×3000 的截图，只靠把 JPEG 质量拉到极低硬怼进 100KB——文字往往糊成一片。
更可靠的默认流程：
- 先确定展示宽度（例如正文插图 800 CSS 像素量级）。
- 等比例缩小到接近需求。
- 再微调质量或切换 WebP/PNG。
function fitInsideBox(width, height, maxSide) {
const scale = Math.min(1, maxSide / Math.max(width, height));
return {
w: Math.round(width * scale),
h: Math.round(height * scale),
scale,
};
}这段代码演示为何几何缩放常常是第一步：像素总量下来了，后面的编码器才有空间。
JPEG 画质不是跨软件可比的标尺
不同实现的「质量 75」未必等价。请以肉眼验收为准：渐变肤色容易出现条带；小字号最先崩；暗底彩色文字容易出现彩色镶边（常与色度采样有关）。
PNG / JPEG / WebP：按画面类型选工具
照片多用有损格式更划算；需要透明度或极致锐利边界时 PNG 可能更合适；WebP 在现代环境里常常赢字节，但要确认下游是否真能解码（邮件客户端与老旧终端有时是短板）。
元数据：不仅仅是几十字节的问题
EXIF 可能包含地理位置、设备序列号与缩略图。剥离元数据对体积帮助不一定巨大，但对隐私与合规经常是决定性的。
在线压缩器即便宣称立刻删除，也仍然是「先把字节发到别人家」。本地迭代能显著减少这种不必要的暴露面。
七种常见「必须压到 100KB」仍能落地的场景
- 头像缩略图：方形裁剪 + 适中边长通常很稳。
- 博客插图：宽度控制在合理范围后 JPEG/WebP 往往能进预算。
- 票据扫描：在合规前提下简化背景可巨幅降噪点（进而缩小体积）。
- 示意图：矢量 SVG 优先；不得已栅格化时避免无谓超大画布。
- 地图/大屏截图：裁剪关键区域，模糊无关区域（许可范围内）。
- 邮件附件：SMTP 限制严苛时本地压缩再发送，失败率低得多。
- 客服工单：截图包含隐私信息时，本地压缩比对上传到未知 SaaS 更可控。
视网膜屏幕导出：别让 @2x 白白吃掉配额
设计交付 @2x 很常见，但如果 CMS 实际只用较小 CSS 宽度展示，上传超大栅格往往买不到肉眼可见的收益。按 CSS 像素 × 设备像素比导出更贴近真实成本。
浏览器本地处理为什么契合截图工作流
Safe Local Tools 主打浏览器本地处理：你可以在不上传原图的情况下反复试错——这对医疗、金融、未发布产品界面尤其关键。它替代不了正式的脱敏流程，但能减少「随手丢进在线工具」这一类低级事故。
收尾：把压缩当成可验收的工程问题
一百 KB 的限制听起来粗暴，本质上却是感知优化：分配比特、裁剪噪声、选对格式，再用目标设备验收。
如果你正在寻找一个不强制上传、适合反复试错的压缩工作台，现在就 试用图片压缩工具 →