PNG图像：像素化帧

Question

我有一个带有PNG文件的奇怪图像，当图像首次加载时会出现像素化的帧。这在Safari中尤为普遍，需要几秒钟才能完整，平滑的图像加载。

请访问此网址，将拆分选项更改为＆＃39;重绘...＆＃39;然后单击拆分以查看我正在谈论的框架：http://ezgif.com/split/01a0ed09bf.png

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

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

这是指向图片的链接： 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上看到它。

Answer 2

原来我正在咆哮着错误的树。图像是隔行扫描的，并且隔行扫描它们得到了改进，但并没有完全解决问题。结果我看到的实际问题是OS X上的webkit中的图像渲染的怪癖，我最终使用CSS解析：

img {
    image-rendering: optimizeQuality;
}