浏览器如何检测 GIF 图像大小？答案

【问题标题】：How do browsers detect GIF image sizes?浏览器如何检测 GIF 图像大小？
【发布时间】：2011-07-25 20:29:31
【问题描述】：

我注意到在 FireFox 5 和 IE 8 中显示的 GIF 带有填充。当我通过 FireBug 查看图像大小时，我注意到它比预期的大几个像素。

预期高度：160 像素与实际高度：171 像素

当我在图像编辑器中打开 GIF 时，编辑器显示了正确的尺寸，但是当我运行 ImageMagick identify 时，我收到了以下信息：

newGif.gif GIF 200x160 200x171+0+5 PseudoClass 256c 30kb

如果我将几何图形修改为 200x160+0+0，则图像在 FireFox 中的显示与我预期的一样。 FireFox 和 IE 8 似乎引用了图像的页面几何而不是尺寸！我的分析是否正确？如果正确，是否适用于所有图像类型或仅适用于 GIF？

已更新，我已附上一张图片供您观赏！此图像在 FF 中对我来说显示为 200 x 171，但当您下载并在图形程序中查看时实际上是 200 x 160。

【问题讨论】：

如果你能链接一个例子就太好了。我很想看到这个
很有趣，它看起来像是 GIF 标头和 ImageBlock 之间的区别。看起来此图像的图像块大于标头中的大小。 onicos.com/staff/iz/formats/gif.html
这个帖子已有 10 年历史，但最近派上了用场。不幸的是，上面的链接已经失效。但是，它可以在www33146ue.sakura.ne.jp/staff/iz/formats/gif.html 获得。 Internet Wayback Machine 找到了活动链接。

标签： html image http browser imagemagick

【解决方案1】：

此 GIF 文件的标题与其正文不对应。

图像尺寸存储在第 6 到第 9 个字节中，从屏幕截图中您可以看到标题中的尺寸为 00C8 x 00AB，即 200x171，但实际尺寸为 200x160

所以这张图片是无效的。解析无效 gif 没有标准化的行为，这就是为什么存在这种不一致的原因。

firefox 很可能会在图像完全下载之前为图像预分配位置，当图像完全下载时，它会被放入预分配空间的中心。并且因为预分配的空间是 200x171 但实际图像是 200x160，你会看到一个边框。

编辑：经过 GIF 格式参考后，GIF 似乎确实允许这样做。所以图像是有效的。所以这就是这里实际发生的事情： GIF 格式由几个块组成。有一个标题块和一个或多个（如果图像是动画）图像块（可能还有其他块，但它们与问题无关） .标题块包含有关图像的一些信息，包括它的宽度和高度。然而，每个图像块也有自己的宽度和高度。那么有问题的图像会发生什么，它的主图像尺寸为 200x171，但单帧尺寸为 200x160。因此，大多数不支持动画 gif 的编辑程序和库将提取第一帧并以 200x160 的大小显示它，支持动画的浏览器和编辑器应该以 200x171 的完整大小显示它。

PS 每个图像块都有图像顶部和图像左侧的位置。似乎通过允许帧小于画布，并允许在画布上移动帧的位置，GIF 的开发人员试图削减动画 gif 文件的几个字节。我想知道是否有任何现代图形编辑器利用了这一点……可能没有……:)

GIF format byte order

【讨论】：

不，如果您使用 ImageMagick 识别或类似工具，.GIF 的图像尺寸是正确的。它是标题中返回的图像画布大小。我发现一些文献表明 .GIF 图像尊重图像画布，而其他图像类型则不然。我不认为该图像无效。
确实经过更深入的研究，该图像似乎确实是有效的。我稍后会编辑答案。
感谢您的详细解答。我可以找到提到 .GIF 图像引用虚拟画布的文献，但没有任何解释解释了机制。直到现在才有意义！
是的，研究起来很有趣。我喜欢那些旧文件类型。他们会不惜一切代价在这里和那里节省几个字节：D

【解决方案2】：

我怀疑 GIF 是一种动画格式，因此它可能包含位于几何框架不同位置的多个图像。因此，浏览器应该为整个事物保留位置。

【讨论】：

【解决方案3】：

如果你保存图片，然后右键->属性，它会说它是200x160，还有注意，当你在windows中预览图片时，图片中会添加黑条，这很奇怪。如果您在 ms paint 中打开它（仅用于演示目的），您会注意到图像被黑条填充，当您查看文件->属性时，它说图像现在是 200x171。

最可能的情况是文件头显示它是 200x160（windows/浏览器等查看它以快速告诉您图像大小），而实际图像块是 200x171。黑条不会显示在浏览器中，因为它们可能是透明的，但由于 ms paint 和 windows preview 不支持透明度，黑条会显示在其中。此外，在 mspaint 中找到了正确的大小，因为标头数据被丢弃，并且属性显示了它们的数据结构的属性，现在将图像块保存到图像编辑中，类似地，如果您将图像加载到 mspaint，修改图像以删除黑条，保存，然后将该图片放入浏览器，然后填充将消失。

大多数时候，加载图像文件的图像时，只需要图像的水平分辨率，而图像块的水平分辨率只是读取图像的每一垂直行的水平分辨率，当您读取末尾时在图像块中，您位于图像的末尾，因此不必注意垂直分辨率以从中加载图像。这就是为什么图像看起来很正常，并且不会从底部边缘裁剪掉。

至于为什么在其他浏览器中没有填充此图像。我只能假设这种带有边框的填充图像是他们在图像文件中所期望的一种标准，并且当遇到大于文件头指定的图像块时，它们会将其裁剪到图像块的中心以尽力而为

【讨论】：