为何小尺寸 JPEG 在 Chrome 中显示不同
Why Tiny JPEGs Look Different in Chrome
我曾发现同一个图标在同事电脑上看起来更纤细、更还原，而在我的 Chrome 浏览器中却显得更粗。深入调查后，我发现这并非渲染 Bug，而是 Chrome 的一项巧妙优化。当 JPEG 图片被缩放到极小尺寸时，传统的全量解码再缩放方式极其浪费内存。Chrome 利用 Skia 和 libjpeg-turbo 实现了 partial IDCT scaling 技术，直接跳过高频细节系数，仅解码低频数据来生成缩略图。这种针对照片优化的机制，在处理图标等需要清晰边缘的图像时，反而导致了视觉上的差异。这也提醒我们，JPEG 格式及其优化逻辑是为摄影图像设计的，并不适合用于图标。
真正的教训是，你不应该使用 JPEG 格式来制作图标之类的图像。
HN 评论区
68- jonathanlydall
我相当确定 PNG 也有同样的问题。PNG 是无损格式，通常很适合做图标，因为它们不会出现像 JPEG 那样的压缩伪影（作者也指出了 JPEG 其实是为照片设计的），而且它们还支持 Alpha 通道混合。
当 Chrome 引入这项“优化”并随 Electron 发布后，我们当时正在升级，结果导致我们产品中很多地方的图标显示一团糟，以至于我们不得不推迟升级，直到能用 SVG 替换它们。
SVG 还有一个优势，就是能响应亮色/暗色模式。我们只需要把每个图标放在自己的 Shadow DOM 里，就能避免不同 SVG 之间因命名相同而导致的样式冲突，不过这给我们的 UI 设计师带来了一点麻烦。
- advisedwang
> 真正的教训是：你不应该用 JPEG 来做图标之类的东西
更重要的是，你应该使用与显示尺寸相匹配分辨率的图片。即使你换成了 PNG，用一张 2000x2000 的图片去显示一个 20x20 的图标，也是浪费。
- muizelaar
Firefox 正在进行的低分辨率解压工作见这里：https://bugzilla.mozilla.org/show_bug.cgi?id=2033250
- debazel
Chrome 和 Firefox 使用了两种不同的缩放算法，这很可能是造成差异的主要原因。Chrome 整体看起来更模糊，而 Firefox 更锐利，但会有轻微的振铃伪影。我个人更喜欢 Firefox 的版本。
- PetitPrince
那么 Firefox 是先完整渲染再缩放，还是也采用某种不同的部分渲染方式？你只讲了一方的情况。