图片压缩原理科普：从像素到 WebP，一张图的旅行

（本文为中文深度解读。点击右上角 中 / EN 按钮可切换查看英文概要）

先理解一张图是怎么"存"的

你拍的照片、截图，本质上是一张位图（bitmap）：由无数个像素点（像素）组成，每个像素记录颜色值。一张 1000×1000 的图就是 100 万个像素，每个像素存红绿蓝（RGB）三个通道，按每通道 1 字节算，一个像素 3 字节，这张图原始体积约 3 MB——还不算透明通道。这就是照片"天生很大"的原因。

网页如果直接放原始图，加载会非常慢。于是人类发明了压缩：在保证观感尽量不变的前提下，把文件体积减下来。

有损压缩 vs 无损压缩

关键洞察：人眼对细节的敏感度有限——相近的颜色、细微的明暗变化，肉眼基本分不出来。有损压缩就是把这些"看不见的部分"果断扔掉，从而把 3 MB 压到几十 KB，观感几乎没有变化。

JPEG、PNG、WebP 怎么选

• JPEG：有损，照片首选，压缩率高；缺点是压缩时易出现"块状伪影"（色块感），且不支持透明。
• PNG：无损，适合图表、文字、logo、需要透明的图；缺点是大照片会很臃肿。
• WebP：谷歌主导的现代格式，有损时比 JPEG 更小，无损时比 PNG 更小，同时支持透明与动图，主流浏览器全兼容——是目前网页压缩的最优解之一。

压缩质量怎么调（质量系数）

几乎所有有损压缩都靠一个「质量系数」（0-100）控制。质量越高文件越大、细节越真；质量越低文件越小、伪影越明显。

• 照片分享：质量 80-85，几乎无损观感，体积优势明显。
• 网页配图：质量 70-80 最佳平衡点，很多大站实际用 70。
• 缩略图/装饰图：60-70 即可。

为什么网页一定要压缩图片

图片是网页第一大的"体重来源"。Compression 得当的收益很直接：更快的加载速度、更低的带宽流量、更好的搜索引擎表现（页面速度是排序因素之一）、以及更低的电费和对访客流量套餐的友好。常见说法「网页优化，先优化图片」完全成立。

浏览器本地压缩：数据不出门

现在优秀的在线压缩工具都支持本地计算：把图片拖进网页，浏览器用内置的 Canvas 技术完成缩放、格式转换、质量调整，全程不把原图上传到服务器。好处三合一：隐私安全（原图不泄露）、速度快（无需上传下载）、免费无限量。

小结

压缩的本质是「在肉眼可接受的范围内，舍弃信息换体积」。理解像素、有损/无损、格式差异这三件事，你就已经超过 90% 随手存原图的网民；再配合本地压缩工具，网页提速和隐私保护一次到位。