[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f-6JRuEpS6BUoK6ru4zIGGloaQLrCppN184oZQlAhLFU":3},{"item":4,"related":41},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":18,"sourceLabel":31,"sourceName":32,"sourceUrl":33,"status":34,"seoTitle":17,"seoDescription":17,"canonicalUrl":17,"isFeatured":35,"sno":36,"sortOrder":37,"publishedAt":38,"updatedAt":39,"createdAt":40},"1bb735e6-efec-4ad5-9065-8ccfd38f5b5d","article","一张 JPEG 为什么会长出方块、蚊子噪点和白色光环？","why-jpeg-images-have-compression-artifacts","JPEG 通过色度抽样、分块变换、量化和熵编码大幅缩小照片，其中量化会永久舍弃部分细节。压缩过强或反复保存后，方块、边缘光环与蚊子噪点便会显现。本文从人眼偏好出发解释这些痕迹如何产生。","把一张照片反复截图、转发和保存后，天空可能出现一格一格的色块，文字边缘冒出白圈，细线周围还围着像蚊群一样的噪点。这些痕迹不是相机突然坏了，而是 JPEG 有损压缩在不断舍弃信息后留下的脚印。\n\nJPEG 的目标不是逐像素保留原图，而是在视觉质量尚可的前提下大幅缩小文件。它之所以成功，是因为压缩过程利用了人眼并非同样敏感于所有信息。\n\n![同一图像在不同 JPEG 压缩质量下的失真对比](https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Fb\u002Fb2\u002FJPEG_compression_Example.jpg)\n\n## 第一步：少记一些颜色细节\n\n图像可以拆成亮度与颜色差异。人眼通常对明暗轮廓比对细微色彩变化更敏感，因此 JPEG 常使用色度抽样：保留较完整的亮度信息，降低颜色通道的空间分辨率。\n\n照片里这通常不明显，但红色文字、界面截图和锐利彩色边缘容易发糊。JPEG 适合连续色调照片，却不是保存小字号文字、像素画和透明图形的理想格式。\n\n## 第二步：把小方块改写成波纹配方\n\nJPEG 通常把图像分成 8×8 像素的小块，再通过离散余弦变换，把每块像素改写为一组不同频率的变化。低频描述大面积缓慢明暗变化，高频描述细纹、噪点与锐利边缘。\n\n接着发生真正不可逆的一步：量化。压缩器用不同尺度除这些系数并取整，高频细节通常被舍弃得更多。质量设置越低，取整越粗，文件越小，丢失也越明显。MDN 对 [JPEG](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FJPEG) 的说明将其过程概括为色度抽样、离散余弦变换与量化，以及后续的游程和霍夫曼编码。\n\n最后的编码继续消除重复，但不再是画质损失的主要来源。真正让信息回不来的，是前面的抽样与量化。\n\n```mermaid\nflowchart LR\n    A[原始图像] --> B[亮度与颜色分离]\n    B --> C[色度抽样]\n    C --> D[分块与余弦变换]\n    D --> E[量化舍弃细节]\n    E --> F[熵编码得到 JPEG]\n```\n\n## 三种常见伤痕怎样出现\n\n方块效应来自每个 8×8 区块被相对独立地处理。压缩很强时，相邻块边界无法自然衔接，天空和皮肤等平滑区域便显出棋盘格。\n\n边缘光环或振铃来自有限频率近似锐利突变。黑字与白底交界越突然，变换后越容易在边缘两侧留下亮暗波纹。\n\n蚊子噪点常围绕文字、树枝等高对比边缘闪现。高频细节被粗略量化后，重建出的误差聚集在轮廓附近，看起来像细小颗粒在边缘盘旋。MDN 的[媒体编码指南](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FMedia\u002FGuides\u002FFormats\u002FVideo_codecs)也指出，使用离散余弦变换的 JPEG 可能出现这类痕迹。\n\n## 为什么反复保存越来越糟\n\n打开 JPEG 并不会损坏图片，关键在于再次有损编码。每次保存，软件都在上一次已经取整的结果上重新分块、变换和量化。若裁剪或尺寸变化让区块边界移动，旧伤痕与新一轮误差还可能叠加。\n\n因此，编辑时应保留无损母版或原始文件，只在最终发布时导出 JPEG。社交平台往往会再次压缩上传图片，提前把质量降得太低，会让两轮损失相加。\n\n## 什么时候换一种格式\n\n截图、图标、线稿和含透明区域的图像通常更适合 PNG 等无损格式。现代 WebP、AVIF 等格式能在许多场景提供更高压缩效率，但是否合适仍取决于兼容性、编码速度和内容类型。格式名称不是质量保证，任何有损格式在过强压缩下都会产生痕迹。\n\nJPEG 也并非落后的坏格式。它让照片在网络带宽昂贵的年代得以广泛流通，今天仍拥有极好的兼容性。方块和光环只是它做出取舍的可见边界：为了让文件轻得足以快速传递，它把人眼通常不在意的信息先丢掉；当我们要求它丢得太多，那些被忽略的部分就会回来提醒我们。","\u002Fuploads\u002F2026-08-14\u002F8011c7fa-472c-4599-a65a-c993b095375f.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",null,[19,23,27],{"id":20,"name":21,"slug":22},"4c2bbea6-eab7-40a8-8447-1de478ff7749","分析","analyse",{"id":24,"name":25,"slug":26},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug",{"id":28,"name":29,"slug":30},"a202d639-99a6-488a-a712-4d4c6ffd7e15","开发","dev","资料来源","MDN：JPEG Glossary","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FJPEG","published",false,60,0,"2026-08-14T00:00:00.000Z","2026-08-14T14:47:33.806Z","2026-08-14T03:06:16.293Z",[42,51,61],{"id":43,"type":6,"title":44,"slug":45,"summary":46,"coverUrl":47,"authorName":14,"sno":48,"publishedAt":49,"createdAt":50},"9ccde95c-d754-4808-91f7-488f392e3eeb","你的品牌在AI眼里到底存不存在？这套系统说了算","automated-geo-monitoring-system","靠手动抽查来验证GEO效果，本质上是在跟概率玩游戏。赢一次，不代表能一直赢。","\u002Fuploads\u002F2026-08-07\u002Fdf111c0d-f14a-4b2a-8347-141e96b71654.jpg",1,"2026-08-07T00:00:00.000Z","2026-08-07T04:31:30.843Z",{"id":52,"type":6,"title":53,"slug":54,"summary":55,"coverUrl":56,"authorName":57,"sno":58,"publishedAt":59,"createdAt":60},"544fc658-c911-4de6-93b0-d2520087119a","MCP：AI 的「USB-C」时刻","mcp-ai-usb-c-moment","以前每个 AI 应用都要为 GitHub、数据库、日历各写一套私有连接器，这是 M×N 的集成噩梦，直到 MCP 的出现","https:\u002F\u002Foxqtewbrpuiouqqjrvdv.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fpublic-media\u002F2026-07-19\u002Fc3c06d99-a0ac-40ac-a283-7e77aabb4c4c.jpg","Foundit AI",46,"2026-07-20T00:00:00.000Z","2026-07-19T16:13:40.316Z",{"id":62,"type":6,"title":63,"slug":64,"summary":65,"coverUrl":66,"authorName":14,"sno":36,"publishedAt":38,"createdAt":67},"7d31d4a8-e34c-45a5-818f-fd26583f4391","禁用 Cookie 以后，网站为什么仍可能认出你？","browser-fingerprinting-without-cookies","浏览器类型、屏幕尺寸、时区、字体和图形能力等普通信息组合起来，可能形成相对独特的浏览器指纹。本文解释指纹追踪与 Cookie 的区别、网站怎样提高识别概率、浏览器如何加入限制或噪声，以及隐私模式为什么不是隐身斗篷。","\u002Fuploads\u002F2026-08-14\u002F8c5ad71e-0f52-43f9-b25d-6e4ca7980bc5.jpg","2026-08-14T03:06:13.295Z"]