PNG图像：像素化框架

Question

我有一张带有 PNG 文件的奇怪图片，首次加载图片时会出现一个像素化的框架。这在 Safari 中尤为普遍，加载完整、流畅的图像需要几秒钟的时间。

请访问此 URL，将拆分选项更改为 'Redraw...'，然后单击拆分以查看我正在谈论的框架：http://ezgif.com/split/01a0ed09bf.png

我的印象是 PNG 不支持图层，所以我不知道这个框架是从哪里来的。我已经尝试了几个实用程序来尝试重绘图像，包括 imagemagick 和 pngquant，但没有成功。

如何从图像中删除此框？理想情况下，这应该是一个命令行工具，因为我有数千张图像要处理。

这是一张 link 图片： https://drive.google.com/file/d/0B-mqMIMqm_XHcG5wZk5pTUpvNWc/view?usp=sharing

Answer 1

为了在 PNG 仍在加载时快速提供预览，PNG 规范提供了以 Adam7 隔行扫描格式保存图像位的选项：http://www.w3.org/TR/PNG/#8Interlace

不是连续（从上到下，从左到右），而是每第 8 行（从左上角开始）的每第 8 个像素被存储。该信息可用于立即以该颜色绘制一个 8x8 矩形（并且它是正确的颜色 仅适用于左上角像素 ）。接下来，每第 4 个像素传输一次，因此接收应用程序可以在 8x8 的顶部绘制一个 4x4 矩形，然后每第 2 个像素，依此类推，直到每个像素恰好传输一次。

Adam7 模式确保 (1) 每个像素仅传输一次，并且 (2) 没有新的矩形或像素会与已经具有正确颜色的矩形或像素重叠。

官方规范中的计数图很好地展示了这一点：

1 6 4 6 2 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7
3 6 4 6 3 6 4 6
7 7 7 7 7 7 7 7
5 6 5 6 5 6 5 6
7 7 7 7 7 7 7 7

由接收应用程序决定如何处理隔行扫描：一些应用程序可能决定等待整个文件加载，在内存中解码，然后才显示图像，其他应用程序将使用加载是时候展示预览了。

如果加载应用程序支持它，这只会在具有非常大的 PNG 的相对较慢的连接 and/or 上很快可见。

Answer 2

原来我找错树了。图像是交错的，对它们进行去交错处理有所改善，但并未完全解决问题。结果我看到的实际问题是 OS X 上 webkit 中图像渲染的一个怪癖，我最终使用 CSS:

解决了这个问题

img {
    image-rendering: optimizeQuality;
}

PNG图像：像素化框架

PNG Image: Pixelated frame

safari

png